Darbas su mazgais JavaScript

Kaip žinote, žymės gali turėti kitas žymes arba, kalbant JavaScript terminija, DOM elementai gali turėti kitus DOM elementus. Be to, tačiau, juose gali būti komentarai ir paprastas tekstas. Komentarus, tekstus ir DOM elementus vienija vienas pavadinimas - mazgai.

Jums jau pažįstamos savybės firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. Šios savybės dirba būtent su DOM elementais, ignoruodamos likusius mazgus. Paprastai, būtent tai mums ir reikia.

Tačiau, egzistuoja ir savybės firstChild, lastChild, nextSibling, previousSibling. Šios savybės dirba analogiškai, tačiau, atsižvelgia į visus mazgus. Pažiūrėkime skirtumą tarp šių savybių pavyzdyje. Tegul mes turime div, kuriame yra trys mazgai:

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

Gaukime nuorodą į šį div kintamajame:

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

O dabar pažiūrėkime, kas yra savybėse firstChild ir firstElementChild:

javascriptconsole.log(elem.firstChild);        // komentaras
console.log(elem.firstElementChild); // žymė span