So durchlaufen Sie ausgewählte Elemente effektiv mit document.querySelectorAll

Durchlaufen ausgewählter Elemente mit document.querySelectorAll

document.querySelectorAll ist eine leistungsstarke Methode, mit der Sie mehrere Elemente basierend auf einem bestimmten Wert auswählen können CSS-Selektor. Um diese ausgewählten Elemente zu durchlaufen, ist es wichtig, die Nuancen des resultierenden NodeList-Objekts zu verstehen.

NodeList vs. Array

Das Problem, mit dem Sie bei der Verwendung eines for konfrontiert waren. ..in Schleife ist, dass NodeList kein Array ist. Obwohl NodeList einem Array ähnelt, verfügt es über zusätzliche Eigenschaften wie item() und namedItem(). Infolgedessen durchläuft eine for...in-Schleife diese Eigenschaften zusätzlich zu den Elementen selbst, was zu den zusätzlichen drei Elementen führt, auf die Sie gestoßen sind.

Best Practices für Schleifen

Um dieses Problem zu vermeiden und die Schleife korrekt durchzuführen, sollten Sie die folgenden Ansätze in Betracht ziehen:

Verwenden einer For-Schleife mit Index

<code class="javascript">var checkboxes = document.querySelectorAll(".check");

for (var i = 0; i <p><strong>Verwenden einer ForEach-Schleife (ES2015)</strong></p>
<p>Die forEach()-Methode wurde speziell für die Iteration über Arrays und NodeLists entwickelt. Es vereinfacht die Schleifensyntax und macht sie prägnanter:</p>
<pre class="brush:php;toolbar:false"><code class="javascript">var checkboxes = document.querySelectorAll(".check");

checkboxes.forEach(function(checkbox) {
  // Do something with checkbox
});</code>

NodeList in Array konvertieren (ES2015)

Eine weitere effektive Methode, insbesondere für ES2015-Umgebungen, ist Konvertieren Sie die NodeList mithilfe der Spread-Syntax in ein Array:

<code class="javascript">var div_list = document.querySelectorAll("div"); // returns NodeList
var div_array = [...div_list]; // converts NodeList to Array

div_array.forEach(function(div) {
  // Do something with div
});</code>

Zusätzliche Überlegungen

• Stellen Sie aus Gründen der Browserkompatibilität sicher, dass Sie einen Transpiler wie Babel.js verwenden, wenn erforderlich.
• Wenn Sie mit Node.js arbeiten, können Sie die .map()-Methode für NodeLists nutzen.

Das obige ist der detaillierte Inhalt vonSo durchlaufen Sie ausgewählte Elemente effektiv mit document.querySelectorAll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!