Javascript html dom Array-Elemente in Schleife

Question

Also lassen Sie uns sagen, dass ich ein Array von DOM-Elemente haben:

var z = document.getElementsByClassName('name'); 

und für jedes Element möchte ich mit Attribut für in-Schleife:

for(var n in z){z[n].setAttribute('marked', '1');} 

Für obigen Code bekomme ich z[n].setAttibute is not a function. Wenn ich jedoch Konsolenelemente des z-Arrays manuell einchecke, wurde das Attribut marked jedem Element hinzugefügt. Warum passiert das und wie kann ich einen solchen Fehler verhindern?

Answer 1

document.getElementsByClassName gibt eine Instanz von HTMLCollection zurück, ein array-ähnliches Objekt. for..in Schleife wurde für Objekte, nicht für Arrays entwickelt. Es durchläuft alle Eigenschaften eines Objekts. Daher erhalten Sie bei der Iteration durch HTMLCollection neben Array-Indizes auch andere Eigenschaften wie length. Als length ist einfach eine Zahl, es hat keine setAttribute Methode, so dass Sie diesen Fehler bekommen.

Sie entweder eine regelmäßige for Schleife verwenden sollten, oder for..of Schleife:

const z = document.getElementsByClassName('name') 

// Regular loop: 
for (let i = 0, len = z.length; i < len; i++) { 
    z[i].setAttribute('marked', '1') 
} 

// for..of loop: 
for (const element of z) { 
    element.setAttribute('marked', '1') 
} 

Sie können auch HTMLCollection zu Array konvertieren Array.from() verwenden. Dann können Sie alle Array-Methoden auf sie verwenden, zum Beispiel .forEach():

const z = Array.from(document.getElementsByClassName('name')) 

z.forEach(element=> element.setAttribute('marked', '1')) 

Answer 2

[].forEach.call(z, function(el) { 
el.setAttribute('marked', '1'); 
}) 

for..in erhält alle Schlüssel der HTMLCollection, einschließlich der Eigenschaft .length. .length ist eine Zahl und hat keine .setAttribute-Funktion.