I am trying to use the js document.getElementsByClassName to locate an html element, which is actually the header of a table.
For the following codes:
console.log(document.getElementsByClassName('gtableheader'));
From the Firebug, I can see it log a HTMLCollection, and when I click it, it shows:
-> 0 tr.gtableheader length 1
So it do locate the element I want.
But when I using:
console.log(document.getElementsByClassName('gtableheader').length);
Then output is 0. That’s so weird, any ideas about this?
Advertisement
Answer
Using getElementsByClassName() will return all the elements with that class name in a document as a NodeList. This object represents a collection of nodes that can be accessed by index numbers, which starts in 0. In order to access the elements in the NodeList you will have to use a loop.
When you console.log(document.getElementsByClassName('gtableheader').length);
you see 0 because when you run it there is no element with class gtableheader. You are able to see the items in the console because document.getElementsByClassName() returns a live collection that is updated when the new elements are added.
As well, in the code you are using and the length is 0, you can use the code below to access the class name.
document.getElementsByClassName('gtableheader')[0].style.color="red";
If you want to access all the elements in the class you can use a for loop.
var x = document.getElementsByClassName('gtableheader');
for (var i = 0; i < x.length; i++) {
x[i].style.color = "red";
}
More information: http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp