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:
<div id="elem"><!--com-->text<span>tag</span></div>
Iegūsim saiti uz šo div mainīgajā:
let elem = document.querySelector('#elem');
Un tagad apskatīsim, kas atrodas
īpašībās firstChild un firstElementChild:
console.log(elem.firstChild); // komentārs
console.log(elem.firstElementChild); // span tags
Uzrakstiet kodu, kas parādīs atšķirību starp
lastChild un lastElementChild.
Uzrakstiet kodu, kas parādīs atšķirību starp
nextSibling un nextElementSibling.
Uzrakstiet kodu, kas parādīs atšķirību starp
previousSibling un previousElementSibling.
