Praca z węzłami w JavaScript
Jak wiesz, znaczniki mogą zawierać inne znaczniki lub, mówiąc w terminologii JavaScript, elementy DOM mogą zawierać inne elementy DOM. Oprócz tego jednak, mogą zawierać komentarze i zwykły tekst. Komentarze, teksty i elementy DOM łączy jedna nazwa - węzły.
Znane Ci są już właściwości firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Te właściwości działają właśnie na elementach DOM,
ignorując pozostałe węzły. Z reguły właśnie
to jest nam potrzebne.
Istnieją jednak również właściwości firstChild,
lastChild, nextSibling, previousSibling.
Te właściwości działają w analogiczny sposób,
jednakże, uwzględniając wszystkie węzły. Spójrzmy
na różnicę między tymi właściwościami na przykładzie.
Załóżmy, że mamy div, zawierający w sobie trzy węzły:
<div id="elem"><!--com-->text<span>tag</span></div>
Pobierzmy referencję do tego diva do zmiennej:
let elem = document.querySelector('#elem');
A teraz spójrzmy, co zawierają
właściwości firstChild i firstElementChild:
console.log(elem.firstChild); // komentarz
console.log(elem.firstElementChild); // znacznik span
Napisz kod, który pokaże różnicę między
lastChild i lastElementChild.
Napisz kod, który pokaże różnicę między
nextSibling i nextElementSibling.
Napisz kod, który pokaże różnicę między
previousSibling i previousElementSibling.
