What is the best way to retrieve the values of document.getElementsByTagName("...") using JavaScript?

Question

What is the best way to retrieve the values of document.getElementsByTagName("...") using JavaScript?

Here is a snippet of my code:

const headings = document.getElementsByTagName("h2");
const paragraphs = document.getElementsByTagName("p");

In my HTML file, I have two h2 elements and four p elements.

My goal is to retrieve the entire text content of each element. I attempted to do so with the following code:

const testHeading = headings[0].innerText;

Unfortunately, this approach did not yield the desired result.

If anyone can provide guidance or assistance, it would be greatly appreciated.

javascript arrays string

Answer 1

Answer №1

let headings = document.getElementsByTagName("h2");
let paragraphs = document.getElementsByTagName("p");

for(let h2 of headings){
    console.log(h2.textContent);
}

for(let p of paragraphs){
    console.log(p.textContent);
}

<h2>Heading 1</h2>
  <p>Paragraph 1</p>


<h2>Heading 2</h2>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>

Answer 2

let headings = document.getElementsByTagName("h2");
let paragraphs = document.getElementsByTagName("p");

for(let h2 of headings){
    console.log(h2.textContent);
}

for(let p of paragraphs){
    console.log(p.textContent);
}

<h2>Heading 1</h2>
  <p>Paragraph 1</p>


<h2>Heading 2</h2>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>

Answer 3

Answer №2

To retrieve the value of a Node, you can utilize the textContent method.

var headerNodes = document.getElementsByTagName("h2");
var paraNodes = document.getElementsByTagName("p");

const headerTexts = [...headerNodes].map(node => node.textContent);
const paraTexts = [...paraNodes].map(node => node.textContent);

console.log(headerTexts);
console.log(paraTexts);

<h2>h2 first</h2>
<h2>h2 second</h2>

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>

Answer 4

To retrieve the value of a Node, you can utilize the textContent method.

var headerNodes = document.getElementsByTagName("h2");
var paraNodes = document.getElementsByTagName("p");

const headerTexts = [...headerNodes].map(node => node.textContent);
const paraTexts = [...paraNodes].map(node => node.textContent);

console.log(headerTexts);
console.log(paraTexts);

<h2>h2 first</h2>
<h2>h2 second</h2>

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>

What is the best way to retrieve the values of document.getElementsByTagName("...") using JavaScript?

Answer №1

Answer №2

Similar questions

What is the best way to display pages with different states in ExpressJS?

Should one consider employing NodeJS global events through the process object?

dividing a matrix into sections (JAVA)

Not all words are compatible with word-wrap, don't you think?!

Exploring the inner workings of view encapsulation in Angular

Conceal the top row of the second HTML table that does not contain any class or ID attributes

Retrieve information from an external JSON API using jQuery

Challenges when using NodeJs require('../file.js')

Ensure that video controls remain visible for 3 seconds after hovering over them

The X axis labels are missing on the Google column chart

Each time I load the page, it displays differently depending on the browser. I'm struggling to understand the reason

Tips for managing a session when adding a List of strings

What is causing the loss of context for 'this' in the latest Angular 1.5 components?

transforming hex string into decimal number and back again

The issue I'm facing in Jest is the "SyntaxError: Unexpected token 'export'" even after configuring transformIgnorePatterns

I utilize a Bootstrap modal popup to showcase user alerts across various sections of my website. Each instance of the modal window is triggered from different locations and displays personalized content

Using conditional statements to render content based on a certain condition within a

Don't forget about managing cookies in JavaScript!

Using ngFor in Angular 2-5 without the need for a div container wrapping

Encountered a 400 error when attempting to send a request to a RestController in Spring MVC