Wie erhalten Sie Elemente von einem Javascript HTMLCollection

Question

Ich kann nicht verstehen, warum ich Elemente aus einer HtmlCollection nicht bekommen kann. Dieses Codebeispiel:

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

erzeugt diese Ausgabe auf der Konsole:

Ich versuche, das dic.jcrop-Halter-Objekt zu erhalten, aber ich kann es aus meiner Variable col zu bekommen. Keines dieser Werke:

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

    // check length of collection 

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

Also, wenn die Länge ist 0 warum die Konsole eine Länge von 1 zeigt, sowie Objekte im Innern? Wenn ich den Knoten öffne, enthält er Kinder. Was ist los?

Hier sind einige erweiterte Knoten. Ich habe div.jcrop.holder nicht erweitert, weil es zu lang ist. Hier sind Kinder Elemente:

Answer 1

Ich war vor dem gleichen Problem und die Lösung für dieses Problem war mein Skript am Ende des Dokuments zu platzieren, um das gesamte Dokument zu warten, bevor geladen werden Beginnen Sie mit dem Ändern oder Auswählen der HTMLCollection-Elemente. Hoffe es hilft.

Answer 2

von Genommen: Can't access the value of HTMLCollection

Das Problem wird Sie das Skript in den Kopf gesetzt haben, die vor die HTML-Elemente geladen werden, ausgeführt wird, so getElementsByClassName() nicht alle Elemente zurück.

Eine Lösung ist, zu warten, bis die HTML-Elemente und führen Sie dann das Skript geladen werden, dass Sie das Fenster

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

Objekte Ereignis Last verwenden, oder Sie können Ihr Skript an der Unterseite des Körpers platzieren Element statt in Kopf, so dass zu dem Zeitpunkt, das Skript geparst und ausgeführt wird, die Elemente in der Dom geladen werden