Kufanya Kazi na Nodes katika JavaScript

Kama unavyojua, vitambulisho vinaweza kuwa na vitambulisho vingine ndani yake au, kusema kwa istilahi za JavaScript, vipengele vya DOM vinaweza kuwa na vipengele vingine vya DOM. Lakini zaidi ya hayo, vinaweza kuwa na maoni na maandishi ya kawaida. Maoni, maandishi na vipengele vya DOM vinaunganishwa kwa jina moja - nodes.

Tayari unafahamu sifa za firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. Sifa hizi hufanya kazi hasa na vipengele vya DOM, zikipuuza nodes zingine. Kwa kawaida, hii ndio tunayohitaji.

Hata hivyo, pia kuna sifa firstChild, lastChild, nextSibling, previousSibling. Sifa hizi hufanya kazi kwa njia ile ile, lakini, zikizingatia nodes zote. Hebu tuone tofauti kati ya sifa hizi kwa kutumia mfano. Hebu tuchukulie tuna div, iliyo na nodes tatu ndani yake:

html<div id="elem"><!--com-->maandishi<span>kitambulisho</span></div>

Tupate kiungo kwenye div hii kwenye kutofautisha:

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

Sasa hebu tuone nini kimo katika sifa firstChild na firstElementChild:

javascriptconsole.log(elem.firstChild);        // maoni
console.log(elem.firstElementChild); // kitambulisho span