JavaScript'te Düğümlerle Çalışma
Bildiğiniz gibi, etiketler diğer etiketleri içerebilir veya JavaScript terminolojisiyle konuşursak, DOM elemanları diğer DOM elemanlarını içerebilir. Bunun yanı sıra, içlerinde yorumlar ve düz metin de bulunabilir. Yorumlar, metinler ve DOM elemanları tek bir isimle birleştirilir - düğümler.
Size firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling
özellikleri zaten tanıdık geliyor.
Bu özellikler tam olarak DOM elemanlarıyla çalışır,
diğer düğümleri yok sayar. Kural olarak, genellikle
bizim ihtiyacımız olan da budur.
Ancak, ayrıca firstChild,
lastChild, nextSibling, previousSibling
özellikleri de vardır.
Bu özellikler benzer şekilde çalışır,
ancak, tüm düğümleri dikkate alır. Bu özellikler
arasındaki farkı bir örnek üzerinde görelim.
İçinde üç düğüm bulunan bir div'imiz olduğunu varsayalım:
<div id="elem"><!--com-->text<span>tag</span></div>
Bu div'e bir referansı değişkende alalım:
let elem = document.querySelector('#elem');
Şimdi de firstChild ve firstElementChild
özelliklerinde ne olduğuna bir bakalım:
console.log(elem.firstChild); // yorum
console.log(elem.firstElementChild); // span etiketi
lastChild ve lastElementChild
arasındaki farkı gösterecek kodu yazın.
nextSibling ve nextElementSibling
arasındaki farkı gösterecek kodu yazın.
previousSibling ve previousElementSibling
arasındaki farkı gösterecek kodu yazın.
