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:
<div id="elem"><!--com-->text<span>tag</span></div>
Să obținem o referință la acest div într-o variabilă:
let elem = document.querySelector('#elem');
Și acum să vedem ce conțin
proprietățile firstChild și firstElementChild:
console.log(elem.firstChild); // comentariu
console.log(elem.firstElementChild); // eticheta span
Scrieți un cod care va arăta diferența dintre
lastChild și lastElementChild.
Scrieți un cod care va arăta diferența dintre
nextSibling și nextElementSibling.
Scrieți un cod care va arăta diferența dintre
previousSibling și previousElementSibling.
