Wie durchlaufen ausgewählte Elemente mit document.querySelectorAll

Question

Ich versuche, auf ausgewählten Elementen, die mit document.querySelectorAll abgefragt werden, Schleife, aber wie?

Zum Beispiel verwende ich:

var checkboxes = document.querySelectorAll('.check'); 
for(i in checkboxes) { 
    console.log(checkboxes[i]); 
} 

Ausgang:

<input id="check-1" class="check" type="checkbox" name="check"> 
<input id="check-2" class="check" type="checkbox" name="check"> 
<input id="check-3" class="check" type="checkbox" name="check"> 
<input id="check-4" class="check" type="checkbox" name="check"> 
<input id="check-5" class="check" type="checkbox" name="check"> 
<input id="check-6" class="check" type="checkbox" name="check"> 
<input id="check-7" class="check" type="checkbox" name="check"> 
<input id="check-8" class="check" type="checkbox" name="check"> 
<input id="check-9" class="check" type="checkbox" name="check"> 
<input id="check-10" class="check" type="checkbox" name="check" checked=""> 

10 
item() 
namedItem() 

Mein Problem ist, dass diese Methode am Ende 3 zusätzliche Elemente zurückgibt. Wie kann ich das richtig machen?

Answer 1

for in Schleife wird nicht für Arrays und Array-ähnliche Objekte empfohlen - Sie sehen, warum. Es kann mehr als nur nummerierte Elemente geben, zum Beispiel die length Eigenschaft oder einige Methoden, aber for in wird alle durchlaufen. Sie können beide

for (var i = 0, len = checkboxes.length; i < len; i++) { 
    //work with checkboxes[i] 
} 

oder

for (var i = 0, element; element = checkboxes[i]; i++) { 
    //work with element 
} 

Der zweite Weg kann nicht verwendet werden, wenn einige Elemente in Array falsy sein kann (nicht Ihr Fall ist), kann aber mehr lesbar, weil Sie nicht brauchen, überall die Notation [] zu verwenden.

Answer 2

Eine schöne Alternative ist:

[].forEach.call(
    document.querySelectorAll('.check'), 
    function (el) { 
     console.log(el); 
    } 
); 

aber wie erwähnt, sollten Sie eine for-Schleife verwenden.

Answer 3

Mein Favorit ist spread operator, um es in Array zu konvertieren und dann forEach für das Schleifen zu verwenden.

Ich Code in ES2015 und verwenden Sie Babel.js, so sollte es nicht ein Browser-Support-Problem sein.

Answer 4

Mit ES6, gibt es eine statische Methode Array.from zu nehmen Vorteile Array nicht statischen Methoden (forEach, Karte, Filter, ..):

Array.from(document.querySelectorAll('div')).forEach((element,index) => 
{ 

    // handle "element" 

}); 

Eine andere, die Verwendung von Array.from da querySelector liefert item Methode:

var all=document.querySelectorAll('div'); 
// create range [0,1,2,....,all.length-1] 
Array.from({length:all.length},(v,k)=>k).forEach((index)=>{ 
    let element=all.item(index); 
}); 

Answer 5

Es sieht aus wie Firefox 50+, 51+ Chrome und Safari 10+ alle unterstützen nun die .forEach Funktion für NodeList Objekte. Hinweis: .forEach wird in Internet Explorer nicht unterstützt. Wenn IE-Unterstützung erforderlich ist, sollten Sie einen der obigen Ansätze berücksichtigen.

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

const paragraphs = document.querySelectorAll('p'); 
 
paragraphs.forEach(p => console.log(p));

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p> 
 
<p>paragraph 4</p> 
 
<p>paragraph 5</p>

Answer 6

ES6 const checkboxes = Array.from(document.querySelectorAll('.check'));