Arbeiten mit Knoten in JavaScript
Wie Sie wissen, können Tags andere Tags enthalten oder, in JavaScript-Begriffen gesprochen, DOM- Elemente können andere DOM-Elemente enthalten. Zusätzlich können sie jedoch Kommentare und normalen Text enthalten. Kommentare, Texte und DOM- Elemente werden unter einem Namen zusammengefasst - Knoten.
Ihnen sind bereits die Eigenschaften firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling bekannt.
Diese Eigenschaften arbeiten genau mit DOM-Elementen,
ignorieren dabei aber die anderen Knoten. In der Regel ist es genau das,
was wir benötigen.
Allerdings existieren auch die Eigenschaften firstChild,
lastChild, nextSibling, previousSibling.
Diese Eigenschaften funktionieren auf ähnliche Weise,
berücksichtigen jedoch alle Knoten. Schauen wir uns
den Unterschied zwischen diesen Eigenschaften an einem Beispiel an.
Nehmen wir an, wir haben ein Div, das drei Knoten enthält:
<div id="elem"><!--com-->text<span>tag</span></div>
Holen wir uns einen Verweis auf dieses Div in eine Variable:
let elem = document.querySelector('#elem');
Und jetzt schauen wir uns an, was in den
Eigenschaften firstChild und firstElementChild enthalten ist:
console.log(elem.firstChild); // Kommentar
console.log(elem.firstElementChild); // Tag span
Schreiben Sie Code, der den Unterschied zwischen
lastChild und lastElementChild zeigt.
Schreiben Sie Code, der den Unterschied zwischen
nextSibling und nextElementSibling zeigt.
Schreiben Sie Code, der den Unterschied zwischen
previousSibling und previousElementSibling zeigt.
