Come ottieni elementi da un javascript HTMLCollection

Question

Non riesco a capire perché non riesco a ottenere elementi da un HtmlCollection. Questo esempio di codice:

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

produce questo output su console:

sto cercando di ottenere l'oggetto dic.jcrop titolare, ma non posso ottenere dal mio col variabile. Niente di tutto questo funziona:

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

    // check length of collection 

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

Quindi, se la lunghezza è 0 Perché il console mostrano una lunghezza di 1, così come gli oggetti dentro? Quando apro il nodo contiene bambini. Cosa sta succedendo?

Ecco alcuni nodi espansi. Non ho espanso div.jcrop.holder perché è troppo lungo. Qui ci sono gli elementi per bambini:

Answer 1

stavo affrontando lo stesso problema e la soluzione a questo problema è stato quello di mettere il mio script alla fine del documento, al fine di attendere per l'intero documento da caricare prima di inizia a modificare o selezionare gli elementi HTMLCollection. Spero che aiuti.

Answer 2

Tratto da: Can't access the value of HTMLCollection

Il problema è che hanno posto lo script nell'intestazione che viene eseguito prima che gli elementi HTML vengono caricati, in modo getElementsByClassName() non restituirà alcun elemento.

Una soluzione è quella di aspettare che gli elementi HTML da caricare poi eseguire lo script, per questo si può utilizzare la finestra oggetti evento carico

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

Oppure è possibile inserire lo script in fondo del corpo elemento invece che in testa in modo che prima che lo script venga analizzato ed eseguito gli elementi siano caricati nella dom