Durchlaufen ausgewählter Elemente mit document.querySelectorAll

In der Webentwicklung ist häufig ein Durchlaufen ausgewählter Elemente erforderlich. document.querySelectorAll stellt ein Array-ähnliches Objekt bereit, das die ausgewählten Elemente darstellt. Allerdings können Probleme auftreten, wenn die Iteration direkt auf der NodeList durchgeführt wird, was dazu führt, dass zusätzliche Elemente in der Ausgabe erscheinen.

Um ausgewählte Elemente ordnungsgemäß zu durchlaufen, konvertieren Sie die NodeList mithilfe der Spread-Syntax in ein Array. Indem Sie stattdessen das resultierende Array durchlaufen, können Sie die zusätzlichen Elemente vermeiden. Diese Methode ist ideal für moderne JavaScript-Umgebungen mit Unterstützung für ES2015 und Babel.js.

Wenn Sie beispielsweise mit document.querySelectorAll('.check'):

var checkboxes = document.querySelectorAll('.check');
var checkboxesArray = [...checkboxes];

checkboxesArray.forEach(checkbox => {
  console.log(checkbox);
});

Dieses Code-Snippet durchläuft korrekt nur die Kontrollkästchenelemente ohne zusätzliche Elemente.