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:
<div id="elem"><!--com-->matn<span>teg</span></div>
Keling ushbu divga havolani o'zgaruvchiga olaylik:
let elem = document.querySelector('#elem');
Endi keling, firstChild va firstElementChild
xossalarida nima borligini ko'rib chiqaylik:
console.log(elem.firstChild); // sharh
console.log(elem.firstElementChild); // span tegi
lastChild va lastElementChild o'rtasidagi
farqni ko'rsatadigan kod yozing.
nextSibling va nextElementSibling o'rtasidagi
farqni ko'rsatadigan kod yozing.
previousSibling va previousElementSibling o'rtasidagi
farqni ko'rsatadigan kod yozing.
