Heim > Web-Frontend > Front-End-Fragen und Antworten > Was bedeutet Knotenliste?

Was bedeutet Knotenliste?

WBOY
Freigeben: 2022-07-04 16:56:30
Original
2566 Leute haben es durchsucht

nodelist bedeutet Knotenliste. Es handelt sich um ein Array-ähnliches Objekt, das zum Speichern einer geordneten Menge von Knoten verwendet wird. Auf die Elemente im Objekt kann zugegriffen werden Index.

Was bedeutet Knotenliste?

Die Betriebsumgebung dieses Artikels: Windows 10-System, NodeJS-Version 12.19.0, Dell G3-Computer.

nodelist Was bedeutet

NodeList ist ein Objekt in JavaScript, ein Array-ähnliches Objekt, das zum Speichern einer geordneten Menge von Knoten verwendet wird

NodeList-Objekt

NodeList-Objekt ist eine aus dem Dokument (Gather) erhaltene Knotenliste.

NodeList-Objekt ähnelt dem HTMLCollection-Objekt.

Einige Methoden in älteren Browsern (z. B. getElementsByClassName()) geben NodeList-Objekte anstelle von HTMLCollection-Objekten zurück.

Die childNodes-Eigenschaft aller Browser gibt ein NodeList-Objekt zurück.

QuerySelectorAll() der meisten Browser gibt ein NodeList-Objekt zurück.

Auf Elemente in NodeList kann über den Index zugegriffen werden (beginnend bei 0).

Die Knotenliste hält sich selbst auf dem neuesten Stand. Wenn ein Element gelöscht oder zur Knotenliste oder zum XML-Dokument hinzugefügt wird, wird die Liste automatisch aktualisiert.

Hinweis: In einer Knotenliste werden Knoten in derselben Reihenfolge zurückgegeben, in der sie im XML-Dokument angegeben sind.

NodeList-Objekteigenschaft

length gibt die Anzahl der Knoten in der Knotenliste zurück.

NodeList-Objektmethode

item() gibt den Knoten mit der angegebenen Indexnummer in der Knotenliste zurück.

Beispiele sind wie folgt:

Instanz 1:

var parent = document.getElementById('parent');
parent.childNodes.length // 2
parent.appendChild(document.createElement('div'));
parent.childNodes.length // 3
Nach dem Login kopieren

NodeList-Instanzobjekt kann eine dynamische Sammlung oder eine statische Sammlung sein. Die sogenannte dynamische Sammlung ist eine lebende Sammlung. Wenn der DOM-Baum einen zugehörigen Knoten löscht oder hinzufügt, wird dies sofort in der NodeList-Schnittstelle widergespiegelt.

Im obigen Code gibt parent.childNodes ein NodeList-Instanzobjekt zurück. Wenn der übergeordnete Knoten einen untergeordneten Knoten hinzufügt, erhöht sich die Anzahl der Mitglieder des Objekts um 1. Node.childNodes gibt eine dynamische Sammlung zurück.

Die Methode document.querySelectorAll gibt eine statische Sammlung zurück. Änderungen innerhalb des DOM werden nicht in Echtzeit im Rückgabeergebnis dieser Methode widergespiegelt.

Das NodeList-Schnittstelleninstanzobjekt stellt das Längenattribut und den numerischen Index bereit, sodass Sie den numerischen Index verwenden können, um jeden Knoten wie ein Array abzurufen, aber es ist selbst kein Array und Sie können keine arrayspezifischen Methoden wie Pop oder verwenden drücken. [

Beispiel 2:

//HTML部分代码
//<ul><li>one</li><li>two</li><li>three</li></ul>
//JAVASCRIPT代码
var myNodeList = document.querySelector(&#39;ul&#39;).childNodes;
for(var i=0;i<myNodeList.length;i++){
    console.log(myNodeList[i]);
}
/* <li>one</li>
<li>two</li>
<li>three</li>
*/
console.log(myNodeList.length);// 3
console.log(myNodeList.item(1));//<li>two</li>
Nach dem Login kopieren

Im obigen Code wird der numerische Indexteil von myNodeList durch die for-Schleife durchlaufen, die den 3 Indizes entsprechenden Mitglieder werden zurückgegeben und das Längenattribut wird korrekt mit 3 zurückgegeben.

Auf das zweite Mitglied des myNodeList-Instanzobjekts wird über die Methode item() zugegriffen. Da numerische Indizes bei Null beginnen zu zählen, verwenden Sie zum Abrufen des zweiten Elements den numerischen Index 1.

Alle Array-ähnlichen Objekte können den eckigen Klammeroperator verwenden, um Mitglieder zu entfernen. Daher wird im Allgemeinen die NodeList[index]-Methode anstelle der item-Methode verwendet.

Empfohlenes Lernen: „nodejs-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas bedeutet Knotenliste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage