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:

html<div id="elem"><!--com-->text<span>tag</span></div>

Bu div'e bir referansı değişkende alalım:

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

Şimdi de firstChild ve firstElementChild özelliklerinde ne olduğuna bir bakalım:

javascriptconsole.log(elem.firstChild);        // yorum
console.log(elem.firstElementChild); // span etiketi