Element Traversal implementiert die Elementdurchquerung im Detail

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung der Element-Traversal-Implementierung. Was sind die Vorsichtsmaßnahmen für die Element-Traversal-Implementierung?

Für Leerzeichen zwischen Elementen werden Dokumentknoten nicht vor IE9 zurückgegeben. 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

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 von 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 die folgenden 5 Attribute zu DOM-Elementen hinzu:

• childElementCount: gibt die Anzahl der untergeordneten Elemente (mit Ausnahme von Textknoten und

  Anmerkungen) zurück.

• 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 diesen schreiben:

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

Wenn Sie Element Traversal

verwenden, um das Attribut hinzuzufügen, Der Code wird sich ändern:

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

Browser, die die Element Traversal-Spezifikation unterstützen, sind: IE9+, Firfox3.5+, Safari4+, Chrome und Opera10+.

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:

So implementieren Sie den Diff-Algorithmus in React

Vue implementiert eine bidirektionale Datenbindungsfunktion ( mit Code)

Das obige ist der detaillierte Inhalt vonElement Traversal implementiert die Elementdurchquerung im Detail. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!