Arbeid med noder i JavaScript
Som du vet, kan tagger inneholde andre tagger eller, i JavaScript-terminologi, kan DOM- elementer inneholde andre DOM-elementer. I tillegg kan de imidlertid ha kommentarer og vanlig tekst. Kommentarer, tekster og DOM- elementer forenes under ett navn - noder.
Du er allerede kjent med egenskapene firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Disse egenskapene arbeider spesifikt med DOM-elementer,
og ignorerer andre noder. Som regel er det nettopp
dette vi trenger.
Imidlertid finnes det også egenskapene firstChild,
lastChild, nextSibling, previousSibling.
Disse egenskapene fungerer på en lignende måte,
men tar hensyn til alle noder. La oss se
forskjellen mellom disse egenskapene med et eksempel.
La oss si at vi har en div som inneholder tre noder:
<div id="elem"><!--com-->text<span>tag</span></div>
La oss få en referanse til denne diven i en variabel:
let elem = document.querySelector('#elem');
Og la oss nå se hva som finnes
i egenskapene firstChild og firstElementChild:
console.log(elem.firstChild); // kommentar
console.log(elem.firstElementChild); // taggen span
Skriv kode som viser forskjellen mellom
lastChild og lastElementChild.
Skriv kode som viser forskjellen mellom
nextSibling og nextElementSibling.
Skriv kode som viser forskjellen mellom
previousSibling og previousElementSibling.
