So durchlaufen Sie Elemente in js

Dieses Mal zeige ich Ihnen, wie Sie eine Elementdurchquerung in js durchführen und welche Vorsichtsmaßnahmen für die Elementdurchquerung in js gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Zu den Browsern, die die Element Traversal-Spezifikation unterstützen, gehören IE 9+, Firefox 3.5+, Safari 4+, Chrome und Opera 10+.

Für Leerzeichen zwischen Elementen werden Dokumentknoten vor IE9 nicht zurückgegeben, und alle anderen Browser geben Dokumentknoten zurück.

Um mit den Unterschieden zwischen Browsern kompatibel zu sein, ohne den bestehenden DOM-Standard zu ändern, wurde die Element Traversal-Spezifikation erstellt.

Diese Spezifikation fügt 5 Attribute zu Elementen hinzu

childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

Detaillierte offizielle Dokumentation; http: // www.w3.org/TR/ElementTraversal/

Für Leerzeichen zwischen Elementen geben Versionen vor IE9 keine Textknoten zurück, während andere Browser Leerzeichen als Textknoten zurückgeben. Dies führt zu inkonsistentem Verhalten bei der Verwendung der Eigenschaften childNodes und firstChild. Um diesen Unterschied auszugleichen und gleichzeitig die DOM-Spezifikation unverändert zu lassen, definiert die W3C-Element-Traversal-Spezifikation einen neuen Satz von Attributen.

Element Traversal API fügt DOM-Elementen die folgenden 5 Attribute hinzu:

• childElementCount: Gibt die Anzahl der untergeordneten Elemente zurück (ohne Textknoten und Kommentare).

• firstElementChild: Zeigt auf das erste untergeordnete Element.

• lastElementChild: Zeigt auf das letzte untergeordnete Element.

• previousElementSibling: Zeigt auf das vorherige Geschwisterelement.

• nextElementSibling: Zeigt auf das nächste Geschwisterelement.

Unterstützte Browser haben diese Attribute zu DOM-Elementen hinzugefügt, sodass Sie sich keine Gedanken über leere Textknoten machen müssen, was das Auffinden von DOM-Elementen sehr erleichtert.

Hier ist ein Beispiel. Wenn Sie in der Vergangenheit alle untergeordneten Elemente eines Elements browserübergreifend durchlaufen wollten, mussten Sie Code wie den folgenden schreiben:

var i,len,child = element.firstChild;
while(child != element.lastChild){
 if(child.nodeType == 1){
  processChild(child);
 }
 child = child.nextSibling;
}

Mit den neuen Attributen von Element Traversal wird der Code sehr prägnant:

var i,len,child = element.firstElementChild;
while(child != element.lastElementChild){
 processChild(child);
 child = child.nextElementSibling;
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man Vue bedient, um einen Proxy zu erstellen

Wie man mit Flackern beim V-Cloak umgeht wird in vue geladen

Das obige ist der detaillierte Inhalt vonSo durchlaufen Sie Elemente in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!