Erfahren Sie, wie Sie die neue Element-Traversal-Eigenschaft von JavaScript zum Durchlaufen von untergeordneten Elementen verwenden.

Bisher konnten untergeordnete Elemente mithilfe der Eigenschaft childNodes oder firstChild durchlaufen werden. Dabei musste jedoch ermittelt werden, ob es sich bei dem untergeordneten Element um ein ELement-Element handelte.

Später definierte das W3C durch die Element-Traversal-Spezifikation einen neuen Satz von Attributen für die Traversierung, der die Notwendigkeit einer Beurteilung überflüssig macht und sehr praktisch ist.

1. ChildNodes-Attributdurchlauf

Untergeordnete Elemente werden normalerweise über die Eigenschaft childNodes durchlaufen, diese Eigenschaft enthält jedoch leere Knoten, was sehr unpraktisch ist, wenn Sie nur Element Element durchlaufen möchten.

Bitte sehen Sie sich das folgende Codebeispiel an:

<div Klasse="Artikel">

    <p>Absatz 1</p>

    <p>Absatz 2</p>

    <p>Absatz drei</p>

</div>

 

<Skripttyp="text/javascript">

    let childList = document.querySelector(".article").childNodes;

    console.log(untergeordneteListe);

    // Konsolenausgabe:

    // Knotenliste(7) 1

</Skript>

Effekt der Konsolenansicht:

Durchlaufen Sie den leeren Knoten des untergeordneten Elements:

Die erhaltenen untergeordneten Elemente enthalten leere text , also Zeilenumbrüche, Einzüge, Leerzeichen usw.

Wenn Sie das p-Element in childList durchlaufen möchten, ist dies in der Praxis häufig der Fall.

Anschließend müssen Sie feststellen, ob das untergeordnete Element vom Typ „Element“ ist:

let childList = document.querySelector(".article").childNodes;

// Durchlaufe die untergeordneten Elemente childList.forEach((item, index) => {

    if (item.nodeType == 1) { // Prüfen, ob es vom Elementtyp ist console.log(item);

    }

});

 

// Konsolenausgabe:

// 3 p-Elemente

2. Durchquerung der Attributreihen von Elementreihen

Durch Element Traversal werden DOM-Elementen fünf Eigenschaften hinzugefügt:

• 1. childElementCount : die Anzahl der untergeordneten Elemente ( nodeType=1 ).
• 2. firstElementChilde zeigt auf das erste untergeordnete Element vom Typ Element .
• 3. lastElementChilde zeigt auf das letzte untergeordnete Element vom Typ Element .
• 4. previousElementSibling zeigt auf das vorherige Geschwisterelement vom Typ Element .
• 5. nextElementSibling zeigt auf das nächste Geschwisterelement vom Typ Element .

Mit diesen neuen Attributen ist es viel einfacher, Element -Elemente zu durchlaufen.

Nehmen wir immer noch das obige Beispiel:

// Holen Sie das erste Element let currentElement = document.querySelector(".article").firstElementChild;

// Untergeordnete Elemente durchlaufen while (currentElement) {

    konsole.log(aktuellesElement);

    //Nächstes Element abrufen currentElement = currentElement.nextElementSibling;

}

Dadurch wird der Vorgang prägnanter.

Derzeit unterstützen IE9 und höher sowie alle modernen Browser diese Eigenschaften.

Dies ist das Ende dieses Artikels über die Verwendung des neuen Element Traversal Element Traversal -Attributs in JavaScript zum Durchlaufen von untergeordneten Elementen. Weitere JavaScript Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!