cannot get length of getElementsByClassName

Question

Im super confused. I am trying to use pure JS to test if there are any elements with the class name .example on a page with a few instances of .example but I cant get consistent results...

<script>
var example = document.getElementsByClassName('example');

console.log( example ); 
// gives [],
            0:div.example
            1:div.example
            2:div.example
            length:3

console.log(example.length);
// gives 0

 console.log(example[0])
// gives undefined
</script>

Is something weird going on with my computer or am I missing something? How should I access the length property?

Can you post your HTML as well? This basic example is showing me results in the console: https://jsfiddle.net/2mLo55bp/ — Anuj, Jun 11 '15 at 17:29
It seems to be fine. The only issue can be your script is running before the HTML is painted. — Nikhil Aggarwal, Jun 11 '15 at 17:30
http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — Teemu, Jun 11 '15 at 17:33
thx @Teemu that is in fact the case except that I can see the length property and DOM elements that WILL exist before they're painted. Its a shame that we cant just access them or simply check if they WILL exist. — chris, Jun 11 '15 at 18:47
I think I didn't read your question properly. The reason why you'll get those values at the first place might be the asynchronous nature of the console. It takes time to iterate the properties, and `gEBCN()` returns a live list. — Teemu, Jun 11 '15 at 19:04
@Teemu I think you are correct about the consoles async nature being the root of my confusion. In chrome, I noticed a little "i" after the empty object... Hovering over it gives "Object state below is captured upon first expansion" — chris, Jun 11 '15 at 19:08

score 0 · Accepted Answer · answered Jun 11 '15 at 17:37

0

I tested the console you must be defining the script before the divs. here is the two scenario check your console, the first one will give undefined.

<script>
    var example = document.getElementsByClassName('example');

console.log( example ); 

console.log(example.length);

console.log(example[0])
</script>

<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>

this one where the script tag is defined after the elements are loaded, i am getting the consistent result

<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>

<script>
    var example = document.getElementsByClassName('example');

console.log( example ); 

console.log(example.length);

console.log(example[0])
</script>

javascript tags are supposed to be declared at the bottom, because it deals with manipulating of you html elements, you need to wait untill the elements are loaded, hence declare the script tags at the end, and since css must be declared right at the top, because the elements adapts their design from those css declarations!

answered Jun 11 '15 at 17:37

Anirudh Modi

1,530
9
8

true that in my case the js is before the dom elements but so strange that it logs the correct length on the object... except I cant access it. – chris Jun 11 '15 at 18:27
The elements are yet to be intialized..teemu gave a post which explains exactly why! So i hope your doubt will be cleared :) – Anirudh Modi Jun 11 '15 at 18:31
It all makes sense except its confusing because the script seems to know that the elements are being initialized... and shows it knows they will exist... is there no way to check if the element WILL exist? The data is in the logged object before its painted... shame if we just cant access it. – chris Jun 11 '15 at 18:45
I guess its really not possible to find whether the element will exist or not. I am still searching if we can or not. – Anirudh Modi Jun 11 '15 at 18:50
Teemu is right in that the reason we're seeing the object properties even though the DOM elements dont exist yet is because of the consoles async nature. – chris Jun 11 '15 at 19:11

cannot get length of getElementsByClassName

1 Answers1