Darbība ar mezgliem JavaScript

Kā jūs zināt, tagi var saturēt citus tagus vai, runājot JavaScript terminoloģijā, DOM elementi var saturēt citus DOM elementus. Papildus tam, tomēr, tie var saturēt komentārus un parastu tekstu. Komentārus, tekstus un DOM elementus apvieno ar vienu nosaukumu - mezgli.

Jums jau ir pazīstamas īpašības firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. Šīs īpašības strādā tieši ar DOM elementiem, ignorējot pārējos mezglus. Parasti, tieši tas mums arī ir vajadzīgs.

Tomēr, pastāv arī īpašības firstChild, lastChild, nextSibling, previousSibling. Šīs īpašības strādā līdzīgā veidā, tomēr, ņemot vērā visus mezglus. Apskatīsim atšķirību starp šīm īpašībām ar piemēru. Pieņemsim, ka mums ir div, kas satur sevī trīs mezglus:

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

Iegūsim saiti uz šo div mainīgajā:

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

Un tagad apskatīsim, kas atrodas īpašībās firstChild un firstElementChild:

javascriptconsole.log(elem.firstChild);        // komentārs
console.log(elem.firstElementChild); // span tags