JavaScript DOM: Parent, Children ve Siblings

eminbasbayan

3 dk okuma

JavaScript DOM: Parent, Children ve Siblings

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

Web sayfalarının arka planında büyük bir yapı yer alır: DOM, yani Document Object Model. HTML ile yazdığımız her satır, tarayıcı tarafından bir ağaç gibi dallanarak nesnelere dönüştürülür. JavaScript, bu ağaç üzerinde gezinmemizi sağlar. Bu makalede, DOM içinde bir elemanın ebeveynine, çocuklarına ve kardeşlerine nasıl ulaşabileceğimizi sade bir dille anlatacağız.

1. Ebeveyn Elemanlara Ulaşmak: `parentElement`

Her HTML elemanı, başka bir elemanın içinde yer alabilir. İçinde bulunduğu bu üst elemana ebeveyn (parent) diyoruz. DOM üzerinde yukarıya doğru çıkmak, yani bir elemanın kapsayıcısını bulmak için .parentElement özelliğini kullanırız.

Örnek:

<div>
  <section>
    <h2>Başlık</h2>
  </section>
</div>

Yukarıdaki yapıda <h2> etiketi, <section>’ın içinde. <section> de <div>’in içinde. JavaScript ile <h2> etiketine ulaşıp onun üst elemanlarını sırayla görebiliriz:

const heading = document.querySelector('h2');

const parent1 = heading.parentElement;        // <section>
const parent2 = parent1.parentElement;        // <div>
const parent3 = parent2.parentElement;        // <body>

Bu özellik özellikle dinamik işlemlerde işe yarar. Örneğin bir kullanıcı bir butona tıklayınca onun bağlı olduğu tüm kutuyu (div, section gibi) silmek isteyebilirsin. Bunun için .parentElement ile yukarı çıkmak gerekir.

2. Çocuk Elemanlarla Çalışmak: `children`, `childElementCount`

Bir HTML etiketi, içinde birden fazla eleman barındırabilir. Bu içerideki elemanlara çocuk (children) denir. Bir elemana ait çocukları görmek için .children özelliği kullanılır. Ayrıca kaç çocuk olduğunu öğrenmek için .childElementCount kullanılabilir.

Örnek:

<ul id="menu">
  <li>Ana Sayfa</li>
  <li>Hakkımızda</li>
  <li>İletişim</li>
</ul>

JavaScript ile bu liste öğelerini elde etmek çok kolaydır:

const menu = document.getElementById('menu');
console.log(menu.childElementCount);    // 3

const items = menu.children;
console.log(items[0].textContent);      // Ana Sayfa
console.log(items[1].textContent);      // Hakkımızda

children bize HTMLCollection verir. Bu yapı dizilere benzer, ama dizi değildir. Bu yüzden for döngüsüyle gezebilirsin ama map gibi dizi fonksiyonları çalışmaz.

3. Kardeş Elemanlarla Gezinme: `nextElementSibling` ve `previousElementSibling`

Bir HTML elemanının hemen yanında başka elemanlar olabilir. Aynı ebeveynin altındaki bu elemanlara kardeş (sibling) denir. DOM'da bu kardeşlere ulaşmak için nextElementSibling (sağındaki) ve previousElementSibling (solundaki) özelliklerini kullanırız.

Örnek:

<article>
  <h3>Başlık 1</h3>
  <h3>Başlık 2</h3>
  <h3>Başlık 3</h3>
</article>

Burada üç adet başlık elemanı var. JavaScript ile ortadaki başlığı bulup diğer kardeşlerini inceleyelim:

const secondHeading = document.querySelectorAll('h3')[1];

const onceki = secondHeading.previousElementSibling;   // Başlık 1
const sonraki = secondHeading.nextElementSibling;      // Başlık 3

Peki ya `nextSibling` ve `previousSibling`?

Bunlar da var, ama dikkatli kullanılmalı. nextSibling ve previousSibling, sadece HTML elemanlarını değil, aradaki boşlukları ve satır sonlarını da birer "node" (düğüm) olarak görür. Yani bazen beklenmedik sonuçlar verebilir.

console.log(secondHeading.previousSibling); // #text (boşluk karakteri)

Bu yüzden genelde yalnızca HTML etiketleriyle çalışacaksan, nextElementSibling ve previousElementSibling kullanman daha güvenli olur.

Uygulamalı Bir Örnek

HTML:

<div class="card">
  <h4>Kart Başlığı</h4>
  <p>Açıklama metni</p>
  <button>Kaldır</button>
</div>

Bu örnekte, butona tıklanınca tüm kartın (div) kaldırılmasını istiyoruz. JavaScript ile bunu şöyle yapabiliriz:

const button = document.querySelector('button');

button.addEventListener('click', function () {
  const card = button.parentElement;
  card.remove();
});

Burada .parentElement ile butonun kapsayıcısına (div) ulaştık ve onu sildik.

Sonuç

DOM'da gezinmeyi öğrenmek, JavaScript ile etkileşimli web sayfaları oluşturmanın temelidir. parentElement, children, nextElementSibling, previousElementSibling gibi özellikler sayesinde bir HTML yapısında yukarı, aşağı ve yanlara rahatlıkla hareket edebiliriz.

Bu özellikleri öğrendikten sonra artık HTML elementlerini sadece görüntülemekle kalmaz, onlarla dinamik olarak etkileşim kurabilir, kullanıcı davranışlarına göre güncellemeler yapabilir, elemanları silebilir veya ekleyebilirsin.