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:

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

Haetaan linkki tähän diviin muuttujaan:

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

Katsotaan nyt mitä sisältyy ominaisuuksiin firstChild ja firstElementChild:

javascriptconsole.log(elem.firstChild);        // kommentti
console.log(elem.firstElementChild); // span-tagi