Solmujen käsittely JavaScriptissä
Kuten tiedät, tagit voivat sisältää muita tageja tai JavaScriptin termein ilmaistuna DOM- elementit voivat sisältää muita DOM-elementtejä. Lisäksi niissä voi kuitenkin olla kommentteja ja normaalia tekstiä. Kommentit, tekstit ja DOM- elementit yhdistetään yhdellä nimellä - solmut.
Olet jo perehtynyt ominaisuuksiin firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Nämä ominaisuudet toimivat nimenomaan
DOM-elementtien kanssa,
jättäen muut solmut huomiotta. Yleensä juuri
se on mitä tarvitsemme.
Kuitenkin on olemassa myös ominaisuudet firstChild,
lastChild, nextSibling, previousSibling.
Nämä ominaisuudet toimivat vastaavalla tavalla,
ottaen kuitenkin huomioon kaikki solmut. Katsotaan
eroa näiden ominaisuuksien välillä esimerkin avulla.
Oletetaan, että meillä on div, joka sisältää kolme solmua:
<div id="elem"><!--com-->text<span>tag</span></div>
Haetaan linkki tähän diviin muuttujaan:
let elem = document.querySelector('#elem');
Katsotaan nyt mitä sisältyy
ominaisuuksiin firstChild ja firstElementChild:
console.log(elem.firstChild); // kommentti
console.log(elem.firstElementChild); // span-tagi
Kirjoita koodi, joka näyttää eron
lastChild ja lastElementChild välillä.
Kirjoita koodi, joka näyttää eron
nextSibling ja nextElementSibling välillä.
Kirjoita koodi, joka näyttää eron
previousSibling ja previousElementSibling välillä.
