HTML- und CSS-Sheets strukturieren

[Gunnar Bittersmann]

@@Matthias Scharwies

Das war früher auch so, wenn man JavaScript/DOM/Node/childNodes ermitteln wollte - Weißraum, auch Zeilenumbrüche und Einrückungen waren ein eigener Knoten.

Das ist heute immer noch so.

<ul>
	<li>Palstek</li>
	<li>Schotstek</li>
</ul>

const listElement = document.querySelector('ul');

console.log(listElement.childNodes.length); // 5

Heute gibt's JavaScript/DOM/Node/nextSibling

?? Und was willst du damit sagen?

Mit nextSibling kommt man zum nächsten Knoten – das kann ein Elementknoten sein oder ein Textknoten oder …

const firstListItemElement = document.querySelector('li');

console.log(firstListItemElement.nextSibling); // [object Text]

Was du vielleicht sagen wolltest: Es gibt children.

console.log(listElement.children.length); // 2

Und mit nextElementSibling kommt man zum nächsten Elementknoten.

console.log(firstListItemElement.nextElementSibling); // <li>Schotstek</li>

☞ Codepen: Knoten

Kwakoni Yiquan