Werken met nodes in JavaScript
Zoals je weet, kunnen tags andere tags bevatten of, in JavaScript termen, DOM elementen kunnen andere DOM elementen bevatten. Daarnaast kunnen er echter ook commentaren en gewone tekst in staan. Commentaren, teksten en DOM elementen worden samengebracht onder één naam - nodes.
Je bent al bekend met de eigenschappen firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Deze eigenschappen werken specifiek met DOM elementen,
en negeren andere nodes. In de regel is dat
precies wat we nodig hebben.
Er bestaan echter ook de eigenschappen firstChild,
lastChild, nextSibling, previousSibling.
Deze eigenschappen werken op een vergelijkbare manier,
maar houden rekening met alle nodes. Laten we het
verschil tussen deze eigenschappen bekijken aan de hand van een voorbeeld.
Stel we hebben een div die drie nodes bevat:
<div id="elem"><!--com-->text<span>tag</span></div>
Laten we een referentie naar deze div in een variabele zetten:
let elem = document.querySelector('#elem');
En laten we nu eens kijken wat er zit
in de eigenschappen firstChild en firstElementChild:
console.log(elem.firstChild); // commentaar
console.log(elem.firstElementChild); // span tag
Schrijf code die het verschil laat zien tussen
lastChild en lastElementChild.
Schrijf code die het verschil laat zien tussen
nextSibling en nextElementSibling.
Schrijf code die het verschil laat zien tussen
previousSibling en previousElementSibling.
