2

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 h3object 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.

Improve this question
2
  • getElement S ByTagName so you should write getElementsByTagName("h3")[0] Commented Jul 6, 2015 at 16:11
  • gEBTagName returns an ARRAY of matched elements... Commented Jul 6, 2015 at 16:13

4 Answers 4

Reset to default
4

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 Arrays, even though they are array-like objects (like arguments). You can read more about Array-like objects.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Here you are, faster:

alert(document.querySelector('h3').innerText);
<div id="details">
  <h3>Summary for</h3>
</div>

Hope this helps.

Improve this answer

Comments

0

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
Improve this answer

Comments

0

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.

Improve this answer

1 Comment

No, it is not an array of element, but a NodeList, or an HTMLCollection, that are both array-like objects, but not Arrays

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.