HTMLCollection's length is 8 but logging any of its indices returns undefined?

Question

I am trying to loop over an HTMLCollection but it appears as though the break-condition is met before the loop is entered. Furthermore, when I print the HTMLCollection to console, it returns the HTMLCollection and I can see that there are elements in it, however, when I try to print any of its indices, it returns undefined

Here is the code:

var applicant_elements = document.getElementsByClassName('applicant');
console.log(applicant_elements); // returns the HTMLCollection
                                 // with length of 8
                                 // and valid elements
console.log(applicant_elements[0]); // returns undefined
for (var i = 0; i < applicant_elements.length; i++) {
    console.log('hello'); // this is never logged
}

Here is what is logged from the above code:

I should also state that I am running the following code within an angularJS controller. Not sure if that changes anything, but I feel like it shouldn't

Answer 1

As mentioned in this answer , console.log() calls are not necessarily immediate in different browsers. document.getElementsByClassName returns a reference to a live HTMLCollection. This means that any changes to the DOM will automatically be reflected in the collection, and thus when the call to console.log is finally resolved, you'll see all of the associated nodes in the output. However, reference to applicant_elements[0] is not a live reference - it is resolved at the given point in time and thus will not change from being undefined.

To summarize: your HTMLCollection is likely empty right after the query, but your code adds elements before the console.log() call is resolved (eg before returning from the function).

Answer 2

The fun thing with getElementsByClassName is it is a LIVE html collection. So that means things get added and removed from it. And add in the fact you have lazy evaluation in the console, makes for fun debugging.

 var x = document.getElementsByClassName("test"); console.log("before", x.length); // will show 0 console.log(x); // In browser console will show one item because of code below var d = document.createElement("div"); //create an element to add d.classList.add("test") // our class we are looking for document.body.appendChild(d); // add it console.log("after", x.length); // will show 1 console.log(x); //will show 1 item