Search code examples
javascriptarraysgetelementsbytagname

JavaScript: Array created by getElementsByTagName() won't return length of its elements?

I have an array created by getElementsByTagName() method and I don't understand why I get undefined when I ask for its elements length.

In the code the array in question is called b, there's also the array called theArray which is used as an example of the behavior I would expect from the array b.

var str = document.getElementById("str");
var b = document.getElementsByTagName("b");
var h1 = document.getElementsByTagName("h1");
var h2 = document.getElementsByTagName("h2");

b[0].style.color = "red";
b[1].style.color = "yellow";
b[2].style.color = "green";
 
var theArray = ["Goodbye", "World"]; 

h1[0].innerHTML = b[0].length;
h2[0].innerHTML = theArray[0].length;
<h1>H1</h1>
<h2>H2</h2>

<span id="str">He is <b>likely</b> to be <b>called</b> up for Thursday's <b>match</b> against Italy.</span>

Update: What I don't understand is what is the real difference between the array b and the theArray and why they behave differently. I think, I see what @jens meant by calling them the two different things, that is, one is pure JavaScript the other is generated out of HTML element, but I still don't understand why they behave differently. I mean, at the end they both are just arrays that hold values, aren't they? Could someone please elaborate a little bit more on it? Thank you!

Solution

  • No. They both are not the same.

    var theArray = ["Goodbye", "World"]; this what we call a real array whereas

    var b = document.getElementsByTagName("b"); here b is a HTMLCollection which is again almost same as array with some extra functionality.

    enter image description here

    BUT the individual elements contained in the HTMLCollection aren't simple strings that you can call string functions or methods on but rather objects more specifically HTMLElement

    enter image description here

    You can say this is analogues to java ; in java you can find length of an array using length property and for strings you can use length() method but you can't do that on class objects like employee.length; (unless you have implemented that function in the class yourself).This is exactly similar to b[0].length; you were doing

    Now you can guess what you need to do to fix this.You need to get the innerHTML property which holds a string representation of the contents of an html tag. You can call that on the HTMLElement object of that tag( which is obj representation of that tag , sorta "handle" to the tag)

    var str = document.getElementById("str");
var b = document.getElementsByTagName("b");
var h1 = document.getElementsByTagName("h1");
var h2 = document.getElementsByTagName("h2");

b[0].style.color = "red";
b[1].style.color = "yellow";
b[2].style.color = "green";
 
var theArray = ["Goodbye", "World"]; 

h1[0].innerHTML = b[0].innerHTML.length;
h2[0].innerHTML = theArray[0].length;
    <h1>H1</h1>
<h2>H2</h2>

<span id="str">He is <b>likely</b> to be <b>called</b> up for Thursday's <b>match</b> against Italy.</span>