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:

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

Pobierzmy referencję do tego diva do zmiennej:

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

A teraz spójrzmy, co zawierają właściwości firstChild i firstElementChild:

javascriptconsole.log(elem.firstChild);        // komentarz
console.log(elem.firstElementChild); // znacznik span