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:
<div id="elem"><!--com-->text<span>tag</span></div>
Gaukime nuorodą į šį div kintamajame:
let elem = document.querySelector('#elem');
O dabar pažiūrėkime, kas yra
savybėse firstChild ir firstElementChild:
console.log(elem.firstChild); // komentaras
console.log(elem.firstElementChild); // žymė span
Parašykite kodą, kuris parodys skirtumą tarp
lastChild ir lastElementChild.
Parašykite kodą, kuris parodys skirtumą tarp
nextSibling ir nextElementSibling.
Parašykite kodą, kuris parodys skirtumą tarp
previousSibling ir previousElementSibling.
