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:

html<div id="elem"><!--com-->text<span>tag</span></div>

Lad os få en reference til denne div i en variabel:

javascriptlet elem = document.querySelector('#elem');

Og lad os nu se, hvad der indeholdes i egenskaberne firstChild og firstElementChild:

javascriptconsole.log(elem.firstChild);        // kommentar
console.log(elem.firstElementChild); // span-tag