Eine NodeList ist eine Auflistung von Knoten, die bei Verwendung einer Methode zurückgegeben wird querySelectorAll() oder Eigenschaften childNodes in JavaScript. Dieses Objekt hat eine ähnliche Schnittstelle wie ein Array, bietet jedoch keine Methoden zum Hinzufügen, Entfernen oder Modifizieren seiner Elemente. Daher ist es manchmal notwendig, die NodeList zu löschen, um Speicher freizugeben oder die Daten zu aktualisieren.
Es gibt mehrere Möglichkeiten, eine NodeList zu bereinigen. Eine davon besteht darin, alle Elemente in der Sammlung zu durchlaufen und nacheinander zu löschen. Sie können einen Zyklus verwenden for oder while für diese Operation. Zum Beispiel:
let nodeList = document.querySelectorAll('.element');
Eine andere Möglichkeit besteht darin, eine NodeList mit einer Methode in ein Array zu konvertieren Array.from() und die Verwendung der Methode forEach() um die Elemente des Musters zu löschen. Zum Beispiel:
let nodeList = document.querySelectorAll('.element');
let nodeArray = Array.from(nodeList);
Die Wahl der Entfernungsmethode hängt von Ihren Vorlieben und Ihrer Situation ab. Beide Methoden ermöglichen es Ihnen, die NodeList zu löschen und Speicher freizugeben und die Daten bei Bedarf zu aktualisieren.
Was ist eine NodeList in JavaScript
NodeList in JavaScript ist es eine Auflistung von Knoten, die zurückgegeben wird, wenn Sie mithilfe einer Methode nach Dokumentelementen abfragen querySelectorAll(). Knoten können von jedem Typ sein, z. B. Elemente, Textknoten oder Kommentare, und können aus einem Dokument oder einem Element stammen.
NodeList ist ein Pseudo-Array, was bedeutet, dass es einem Array ähnlich ist, aber nicht über alle Methoden und Eigenschaften verfügt, die in einem echten JavaScript-Array verfügbar sind. Mit NodeList können Sie jedoch nach Index auf jeden Knoten zugreifen und einige Operationen an ihnen durchführen.
Eine NodeList ist besonders nützlich, wenn Sie Vorgänge für bestimmte Elemente ausführen oder Stile auf sie anwenden müssen. Es wird auch automatisch aktualisiert, wenn sich das Dokument ändert, sodass die NodeList immer die aktuellen Knoten enthält.
Wenn Sie jedoch alle Elemente aus der NodeList entfernen oder löschen möchten, verwenden Sie die Schleife for oder forEach() kann eine kleine Herausforderung sein. Zu diesem Zweck können Sie mithilfe einer Methode eine NodeList in ein echtes Array konvertieren Array.from() oder einen Verteilungsoperator [. nodelist], um alle Vorteile der Arbeit mit einem Array zu erhalten.
Wie bekomme ich eine NodeList in JavaScript
Es gibt mehrere Möglichkeiten, eine NodeList zu erhalten:
1. querySelectorAll() -Methode
Die querySelectorAll() -Methode wird für ein document-Objekt oder ein beliebiges Element aufgerufen und gibt eine NodeList zurück, die alle Elemente enthält, die dem angegebenen CSS-Selektor entsprechen.
var elements = document.querySelectorAll('.my-class');
2. childNodes-Eigenschaft
Die childNodes-Eigenschaft gibt eine NodeList zurück, die alle untergeordneten Knoten des angegebenen Elements enthält. Untergeordnete Knoten können Elemente, Text, Kommentare usw. sein.
var elements = parentElement.childNodes;
3. Eigenschaft children
Die children-Eigenschaft gibt eine HTMLCollection zurück, die nur die untergeordneten Elemente des angegebenen Elements enthält. Es ignoriert alle anderen Knotentypen, z. B. Text und Kommentare.
var elements = parentElement.children;
4. getElementsByTagName()-Methode
Die getElementsByTagName() -Methode wird für ein document-Element oder ein beliebiges Element aufgerufen und gibt eine HTMLCollection zurück, die alle Elemente mit dem angegebenen Tag enthält.
var elements = document.getElementsByTagName('p');
Jede dieser Methoden stellt eine NodeList oder eine HTMLCollection bereit, mit der Sie verschiedene Manipulationen an den Elementen einer Webseite durchführen können.
Hinweis: NodeList und HTMLCollection sind "live", was bedeutet, dass sie sich entsprechend den Änderungen auf der Seite ändern können. Daher wird empfohlen, beim Abrufen einer NodeList eine Kopie zu erstellen, um den Status der NodeList beizubehalten.
Merkmale der Arbeit mit NodeList in JavaScript
Hauptmerkmale der Arbeit mit NodeList:
- Implizite Aktualisierung: Wenn die DOM-Struktur geändert wird, werden die Änderungen automatisch in der NodeList widergespiegelt, auch wenn sie zuvor erhalten wurden. Dies ist nützlich, wenn Sie beispielsweise dynamisch hinzugefügte Elemente abrufen möchten.
- Index-basierter Zugriff: auf NodeList-Elemente kann mithilfe von eckigen Klammern nach Index zugegriffen werden, z. B., nodeList[0]. Dabei ist die NodeList kein Array, sondern unterstützt die Eigenschaft length und die Methode item(index), die auch den Zugriff auf Elemente ermöglichen.
- Live-Sammlung: NodeList ist eine «Live» -Sammlung, was bedeutet, dass sie automatisch aktualisiert wird, wenn sich das DOM ändert. Dies hängt mit Schritt 1 zusammen, kann aber auch Probleme verursachen, wenn während der Codeausführung häufige Änderungen auftreten.
- Alternative Konvertierung in ein Array: bei Bedarf kann die NodeList mithilfe von Array-Konvertierungsmethoden wie folgt in ein normales Array konvertiert werden Array.from oder der Verteilungsoperator [. nodeList]. Diese Konvertierung ist nützlich, wenn Sie Array-Methoden verwenden möchten, die für NodeList nicht verfügbar sind.
Bei der Arbeit mit NodeList ist es wichtig, diese Merkmale zu berücksichtigen, um das gewünschte Ergebnis zu erzielen und unerwünschte Fehler zu vermeiden.
