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:
<div id="elem"><!--com-->text<span>tag</span></div>
Saame lingi sellele divile muutujasse:
let elem = document.querySelector('#elem');
Ja nüüd vaatame, mis sisaldub
omadustes firstChild ja firstElementChild:
console.log(elem.firstChild); // kommentaar
console.log(elem.firstElementChild); // span silt
Kirjutage kood, mis näitab erinevust
lastChild ja lastElementChild vahel.
Kirjutage kood, mis näitab erinevust
nextSibling ja nextElementSibling vahel.
Kirjutage kood, mis näitab erinevust
previousSibling ja previousElementSibling vahel.
