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:
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:
To get elements from a HTMLCollection with JavaScript, we can access them by their index. to add elements with a class. to call getElementsByClassName with 'review' to select elements with class review . Then we can get the first one in the collection with els[0] .
HTMLCollection items can be accessed by their name, id, or index number. NodeList items can only be accessed by their index number. An HTMLCollection is always a live collection. Example: If you add a <li> element to a list in the DOM, the list in the HTMLCollection will also change.
An HTMLCollection is an array-like collection (list) of HTML elements. The elements in a collection can be accessed by index (starts at 0). The length Property returns the number of elements in the collection.
The length property returns the number of elements in a HTMLCollection. This property is read-only. This element is useful when you want to loop through a HTMLCollection.
An HTMLCollection object is an array-like list of HTML elements. Methods like the getElementsByTagName () returns an HTMLCollection.
The item () method returns the element at the specified index in an HTMLCollection. The Elements are sorted as they appear in the source code, and the index starts at 0.
This will not work, because the first getElementsByClassName call will give us an HTMLCollection, which doesn't have getElementsByClassName defined on it. Why is this? This would be a great function to use in this way, since it would let you get elements based on them having multiple different classes, not just one. That's a decent solution.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With