23

I can't understand why I cant get elements from a HtmlCollection. This code example:

 var col = (document.getElementsByClassName("jcrop-holder"));
 console.log(col);

produces this output on console:

enter image description here

I'm trying to get the dic.jcrop-holder object but i cant get it from my variable col. None of this works:

  console.log(col[0]); // undefined
  console.log(col.item(0)); // null

  // check length of collection

  console.log(col.length); // 0

So if the length is 0 why does the console show a length of 1, as well as objects inside? When I open the node it contains children. What's going on?

Here are some expanded nodes. I didn't expand div.jcrop.holder because it is too long. Here are children elements:

enter image description here

cham
  • 8,666
  • 9
  • 48
  • 69
Michał Ziembiński
  • 1,124
  • 2
  • 10
  • 31
  • 1
    Try `document.getElementsByClassName("jcrop-holder")[0]` and `document.querySelector(".jcrop-holder")` – Tushar Oct 02 '15 at 10:25
  • You should show us your full code (or at least the part that you use `console.log` and the one where you try to use it. It seems you're changing that class between the time you log into console and the time you're trying to use it. – Buzinas Oct 02 '15 at 10:28
  • 3
    `getElementsByClassName` returns a _live collection_. The little blue `i` in the console indicates that the array will be evaluated _when you expand it_. There is clearly something going on between you retrieving the collection and `console.log`ing the properties of it, and you actually inspecting the collection in the console. – James Thorpe Oct 02 '15 at 10:35
  • 1
    Notice, that `console` works asynchronously. Try to change something within `col[0]` despite of console saying it's `undefined`. – Teemu Oct 02 '15 at 10:42
  • I'm facing the same issue, any other answer to this question ? – Julha Nov 14 '16 at 22:43
  • @JamesThorpe how can I investigate on your comment? I got the same problem. – Timo Jul 11 '22 at 13:29

3 Answers3

26

Taken from : Can't access the value of HTMLCollection

The problem is you have placed the script in the header which gets executed before the html elements are loaded, so getElementsByClassName() will not return any elements.

One solution is to wait for the html elements to be loaded then execute your script, for that you can use the window objects load event

window.addEventListener('load', function () {
var eles = document.getElementsByClassName('review');
console.log(eles);
console.log(eles.length);
console.log(eles[0]);
})

Or you can place your script at the bottom of the body element instead of in head so that by the time the script is parsed and executed the elements are loaded in the dom

Community
  • 1
  • 1
jasminejeane
  • 476
  • 5
  • 8
  • 1
    The OP can access the collection, but not the first one. So your answer does not help here. `var col = (document.getElementsByClassName("jcrop-holder"));console.log(col);` works, but not `col[0]`. – Timo Jul 11 '22 at 12:15
0

I was facing the same issue and the solution to this problem was to place my script in the end of the document, in order to wait to the whole document to be loaded before start changing or selecting the HTMLCollection elements. Hope it helps.

Greenish
  • 1
0

look this code, with it you can use a class attribute for a HTMLColletion 

  var eles = document.getElementsByClassName('className');
    for (let i = 0; i < eles.length; i++) {            
            eles[i].addEventListener('click',function(){
                // code ex. eles[i].querySelector(".contenedor").classList.toggle('ocultar');
                // code here...
            })

    }
albertto
  • 1