Sõlmedega töötamine JavaScriptis

Nagu te teate, võivad sildid sisaldada teisi silte või JavaScripti terminoloogias, DOM elemendid võivad sisaldada teisi DOM elemente. Lisaks sellele võivad nad sisaldada kommentaare ja tavalist teksti. Kommentaare, tekste ja DOM elemente ühendab üks nimetus - sõlmed.

Teile on juba tuttavad omadused firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. Need omadused töötavad just DOM elementidega, ignoreerides ülejäänud sõlmi. Reeglina on see just see, mida me vajame.

Siiski, on olemas ka omadused firstChild, lastChild, nextSibling, previousSibling. Need omadused töötavad sarnaselt, kuid arvestavad kõiki sõlmi. Vaatame nende omaduste erinevust näite abil. Olgu meil div, mis sisaldab kolme sõlme:

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

Saame lingi sellele divile muutujasse:

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

Ja nüüd vaatame, mis sisaldub omadustes firstChild ja firstElementChild:

javascriptconsole.log(elem.firstChild);        // kommentaar
console.log(elem.firstElementChild); // span silt