Arbete med noder i JavaScript
Som ni vet kan taggar innehålla andra taggar eller, i JavaScript-termer, DOM- element kan innehålla andra DOM-element. Dessutom kan de dock innehålla kommentarer och vanlig text. Kommentarer, texter och DOM- element förenas under ett namn - noder.
Du är redan bekant med egenskaperna firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Dessa egenskaper arbetar specifikt med DOM-element,
och ignorerar övriga noder. Oftast är det just
detta vi behöver.
Det finns dock också egenskaperna firstChild,
lastChild, nextSibling, previousSibling.
Dessa egenskaper fungerar på ett liknande sätt,
men tar hänsyn till alla noder. Låt oss se
skillnaden mellan dessa egenskaper med ett exempel.
Låt oss säga att vi har en div som innehåller tre noder:
<div id="elem"><!--com-->text<span>tag</span></div>
Låt oss få en referens till denna div i en variabel:
let elem = document.querySelector('#elem');
Och låt oss nu se vad som finns
i egenskaperna firstChild och firstElementChild:
console.log(elem.firstChild); // kommentar
console.log(elem.firstElementChild); // taggen span
Skriv kod som visar skillnaden mellan
lastChild och lastElementChild.
Skriv kod som visar skillnaden mellan
nextSibling och nextElementSibling.
Skriv kod som visar skillnaden mellan
previousSibling och previousElementSibling.
