Arbejde med noder i JavaScript
Som du ved, kan tags indeholde andre tags eller, sagt i JavaScript-termer, kan DOM- elementer indeholde andre DOM-elementer. Derudover kan de dog også indeholde kommentarer og almindelig tekst. Kommentarer, tekster og DOM- elementer forenes under et enkelt navn - noder.
Du er allerede bekendt med egenskaberne firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Disse egenskaber arbejder specifikt med DOM-elementer,
og ignorerer de øvrige noder. Som regel er det netop
det, vi har brug for.
Der findes imidlertid også egenskaberne firstChild,
lastChild, nextSibling, previousSibling.
Disse egenskaber fungerer på tilsvarende måde,
men de tager højde for alle noder. Lad os se
forskellen mellem disse egenskaber med et eksempel.
Lad os sige, at vi har en div, der indeholder tre noder:
<div id="elem"><!--com-->text<span>tag</span></div>
Lad os få en reference til denne div i en variabel:
let elem = document.querySelector('#elem');
Og lad os nu se, hvad der indeholdes
i egenskaberne firstChild og firstElementChild:
console.log(elem.firstChild); // kommentar
console.log(elem.firstElementChild); // span-tag
Skriv en kode, der viser forskellen mellem
lastChild og lastElementChild.
Skriv en kode, der viser forskellen mellem
nextSibling og nextElementSibling.
Skriv en kode, der viser forskellen mellem
previousSibling og previousElementSibling.
