JavaScript-da tugunlar bilan ishlash

Bilishingizdek, teglar boshqa teglarni o'z ichiga olishi mumkin yoki JavaScript terminlarida aytganda, DOM elementlari boshqa DOM elementlarini o'z ichiga olishi mumkin. Bundan tashqari, ularda sharhlar va oddiy matn bo'lishi mumkin. Sharhlar, matnlar va DOM elementlari bitta nom bilan birlashtirilgan - tugunlar.

Sizga firstElementChild, lastElementChild, nextElementSibling, previousElementSibling xossalari tanish. Ushbu xossalar aniq DOM elementlari bilan ishlaydi, qolgan tugunlarni e'tiborsiz qoldiradi. Odatda, aynan bizga shu kerak bo'ladi.

Biroq, shuningdek firstChild, lastChild, nextSibling, previousSibling xossalari mavjud. Ushbu xossalar shu o'xshash tarzda ishlaydi, biroq, barcha tugunlarni hisobga oladi. Keling ushbu xossalar o'rtasidagi farqni misolda ko'rib chiqaylik. Aytaylik, bizda o'z ichida uchta tugun bo'lgan div mavjud:

html<div id="elem"><!--com-->matn<span>teg</span></div>

Keling ushbu divga havolani o'zgaruvchiga olaylik:

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

Endi keling, firstChild va firstElementChild xossalarida nima borligini ko'rib chiqaylik:

javascriptconsole.log(elem.firstChild);        // sharh
console.log(elem.firstElementChild); // span tegi