使用Javascript检索文本时遇到问题

Question

I'm having trouble retrieving the text of an HTML element.

 var text_element = document.getElementById("details").getElementsByTagName("h3"); var text = text_element.innerText; console.log(text_element); console.log(text); 

 <div id="details"> <h3>Summary for</h3> </div> 

When I make the console call for text_element , I can actually see the h3 object info, but when I call text I get undefined .

If I change the JS to be var text = text_element.innerHTML; I get the same, undefined .

Shouldn't I be getting the text inside the h3 element, Summary for instead of undefined ?

Can anyone tell me what I'm doing wrong and what I need to do to fix it?

I am not using jQuery, this is strictly pure Javascript.

Answer 1

The method .getElementsByTagName("h3") returns a NodeList (Or an HTMLCollection, now, in Firefox), not an Element, and NodeList prototype does not have a innerText property.

You can get the first element of the node list with its index:

 var text_elements = document.getElementById("details").getElementsByTagName("h3"); var text = text_elements[0].innerText; console.log(text_elements[0]); console.log(text); 

 <div id="details"> <h3>Summary for</h3> </div> 

Beware: NodeList and HTMLCollection objects are not Array s, even though they are array-like objects (like arguments ). You can read more about Array-like objects .

Answer 2

Here you are, faster:

 alert(document.querySelector('h3').innerText); 

 <div id="details"> <h3>Summary for</h3> </div> 

Hope this helps.

Answer 3

Approach:1 Accessing by id

var text_element = document.getElementById("details");
var text = text_element.innerText;
console.log(text_element);
console.log(text);

Approach:2 Accessing by getElementsByTagName("h3") .

var text_elements = document.getElementById("details").getElementsByTagName("h3");
var text = text_elements[0].innerText;
console.log(text_elements[0]);
console.log(text);

MDN - Element.getElementsByTagName

The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name. The subtree underneath the specified element is searched, excluding the element itself. The returned list is live, meaning that it updates itself with the DOM tree automatically. Consequently, there is no need to call several times Element.getElementsByTagName() with the same element and arguments.

Answer 4

When you get a text/content of tag by this method "getElementsByTagName()" - then it returns a collection of an elements's child elements with the specified tag name or can say collection of HTML and you can get by giving index.

Example.

document.getElementsByTagName("h3"); - [<h3> Summary For </h3>]
document.getElementsByTagName("h3")[0]; - [<h3> Summary For </h3>]
document.getElementsByTagName("h3")[0].innerHTML; - Summary For

In your example

var text_element = document.getElementById("details").getElementsByTagName("h3")[0];
var text = text_element.innerHTML;    
alert(text); // Summary For