Lucrul cu noduri în JavaScript

După cum știți, etichetele pot conține alte etichete sau, vorbind în termeni de JavaScript, elementele DOM pot conține alte elemente DOM. În plus, totuși, acestea pot conține comentarii și text simplu. Comentariile, textele și elementele DOM sunt unite printr-un singur nume - noduri.

Sunteți deja familiarizați cu proprietățile firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. Aceste proprietăți lucrează tocmai cu elementele DOM, ignorând celelalte noduri. De regulă, tocmai aceasta ne este necesară.

Cu toate acestea, există și proprietățile firstChild, lastChild, nextSibling, previousSibling. Aceste proprietăți funcționează într-un mod similar, însă, ținând cont de toate nodurile. Să vedem diferența dintre aceste proprietăți cu un exemplu. Să presupunem că avem un div care conține în el trei noduri:

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

Să obținem o referință la acest div într-o variabilă:

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

Și acum să vedem ce conțin proprietățile firstChild și firstElementChild:

javascriptconsole.log(elem.firstChild);        // comentariu
console.log(elem.firstElementChild); // eticheta span