JavaScript DOM: Parent, Children ve Siblings

Şimdiye kadar querySelector gibi metodlarla doğrudan element seçmeyi öğrendik. Peki ya bir elementi seçtikten sonra onun üst elementine, alt elementlerine veya kardeş elementlerine erişmek istersek?

İşte DOM Traversing (DOM'da gezinme) tam da bu! Bir elementten başlayarak DOM ağacında yukarı, aşağı veya yanlara hareket edebilirsiniz.

DOM Ağacı Hatırlatma

html

<div id="container">
    <h1>Başlık</h1>
    <p>Paragraf 1</p>
    <p>Paragraf 2</p>
</div>

metin

        div#container (Parent)
        /      |      \
      h1       p       p    (Children - Kardeşler)
   (first)          (last)

Terim	Türkçe	Açıklama
Parent	Ebeveyn	Üst element
Child	Çocuk	Alt element
Sibling	Kardeş	Aynı seviyedeki element

Parent'a Erişim

parentElement

Bir elementin doğrudan üst elementini döndürür.

html

<div class="kart">
    <h3 class="baslik">Ürün Adı</h3>
    <p class="fiyat">100 TL</p>
</div>

javascript

const baslik = document.querySelector(".baslik");

// Parent'a eriş
const kart = baslik.parentElement;
console.log(kart);  // <div class="kart">...</div>

// Zincir halinde yukarı çık
console.log(baslik.parentElement);                    // div.kart
console.log(baslik.parentElement.parentElement);      // body (muhtemelen)
console.log(baslik.parentElement.parentElement.parentElement);  // html

parentNode vs parentElement

Çoğu durumda aynı sonucu verirler, ancak küçük bir fark var:

javascript

// Genellikle aynı
element.parentElement;  // Her zaman Element döner (veya null)
element.parentNode;     // Node döner (Element, Text, Comment olabilir)

// document.documentElement (html) için fark var
document.documentElement.parentElement;  // null
document.documentElement.parentNode;     // #document

Tavsiye: Genellikle parentElement kullanın.

Children'a Erişim

children

Bir elementin tüm çocuk elementlerini HTMLCollection olarak döndürür.

html

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

javascript

const menu = document.querySelector("#menu");

// Tüm çocukları al
const menuOgeleri = menu.children;
console.log(menuOgeleri);        // HTMLCollection(3) [li, li, li]
console.log(menuOgeleri.length); // 3

// İndeks ile erişim
console.log(menuOgeleri[0]);  // <li>Ana Sayfa</li>
console.log(menuOgeleri[1]);  // <li>Hakkımızda</li>
console.log(menuOgeleri[2]);  // <li>İletişim</li>

childElementCount

Çocuk element sayısını döndürür.

javascript

const menu = document.querySelector("#menu");
console.log(menu.childElementCount);  // 3

firstElementChild & lastElementChild

İlk ve son çocuk elementi döndürür.

html

<div id="container">
    <p>Birinci paragraf</p>
    <p>İkinci paragraf</p>
    <p>Üçüncü paragraf</p>
</div>

javascript

const container = document.querySelector("#container");

// İlk çocuk
console.log(container.firstElementChild);  // <p>Birinci paragraf</p>

// Son çocuk
console.log(container.lastElementChild);   // <p>Üçüncü paragraf</p>

Sibling'lere Erişim (Kardeşler)

nextElementSibling

Bir sonraki kardeş elementi döndürür.

html

<ul>
    <li id="madde1">Madde 1</li>
    <li id="madde2">Madde 2</li>
    <li id="madde3">Madde 3</li>
</ul>

javascript

const madde1 = document.querySelector("#madde1");

console.log(madde1.nextElementSibling);  // <li id="madde2">Madde 2</li>
console.log(madde1.nextElementSibling.nextElementSibling);  // <li id="madde3">Madde 3</li>
console.log(madde1.nextElementSibling.nextElementSibling.nextElementSibling);  // null (yok)

previousElementSibling

Bir önceki kardeş elementi döndürür.

javascript

const madde3 = document.querySelector("#madde3");

console.log(madde3.previousElementSibling);  // <li id="madde2">Madde 2</li>
console.log(madde3.previousElementSibling.previousElementSibling);  // <li id="madde1">Madde 1</li>

Element vs Node

DOM'da iki önemli kavram var: Element ve Node.

Element: HTML etiketleri (<div>, <p>, <span>, vb.)
Node: Element + Text + Comment + diğer node türleri

Fark Nerede Ortaya Çıkar?

html

<ul id="liste">
    <li>Madde 1</li>
    <li>Madde 2</li>
</ul>

Yukarıdaki HTML'de <ul> ile <li> arasında boşluk/satır sonu var. Bu boşluklar Text Node olarak sayılır!

javascript

const liste = document.querySelector("#liste");

// children - Sadece Element'leri verir
console.log(liste.children);      // HTMLCollection(2) [li, li]
console.log(liste.children[0]);   // <li>Madde 1</li>

// childNodes - Tüm Node'ları verir (text dahil)
console.log(liste.childNodes);    // NodeList(5) [text, li, text, li, text]
console.log(liste.childNodes[0]); // #text (boşluk/satır sonu)

Element Metodlarını Kullanın!

Node Versiyonu	Element Versiyonu	Tavsiye
`parentNode`	`parentElement`	✅ Element
`childNodes`	`children`	✅ Element
`firstChild`	`firstElementChild`	✅ Element
`lastChild`	`lastElementChild`	✅ Element
`nextSibling`	`nextElementSibling`	✅ Element
`previousSibling`	`previousElementSibling`	✅ Element

Tavsiye: Text node'larla uğraşmamak için her zaman Element versiyonlarını kullanın!

Pratik Örnekler

Örnek 1: Tıklanan Öğenin Parent'ını Vurgula

html

<div class="kart">
    <h3>Başlık 1</h3>
    <button class="detay-btn">Detay</button>
</div>
<div class="kart">
    <h3>Başlık 2</h3>
    <button class="detay-btn">Detay</button>
</div>

javascript

const butonlar = document.querySelectorAll(".detay-btn");

butonlar.forEach(btn => {
    btn.addEventListener("click", function() {
        // Butonun parent'ı olan kartı bul
        const kart = this.parentElement;
        kart.style.backgroundColor = "#ffffd0";
        kart.style.border = "2px solid #ffc107";
    });
});

Örnek 2: Sil Butonu (Parent'tan Kaldırma)

html

<ul id="gorev-listesi">
    <li>Görev 1 <button class="sil-btn">Sil</button></li>
    <li>Görev 2 <button class="sil-btn">Sil</button></li>
    <li>Görev 3 <button class="sil-btn">Sil</button></li>
</ul>

javascript

const silButonlari = document.querySelectorAll(".sil-btn");

silButonlari.forEach(btn => {
    btn.addEventListener("click", function() {
        // Butonun parent'ı olan li'yi bul ve sil
        const li = this.parentElement;
        li.remove();
    });
});

Örnek 3: Tüm Çocukları Döngüyle İşleme

html

<nav id="navbar">
    <a href="/">Ana Sayfa</a>
    <a href="/urunler">Ürünler</a>
    <a href="/hakkimizda">Hakkımızda</a>
    <a href="/iletisim">İletişim</a>
</nav>

javascript

const navbar = document.querySelector("#navbar");

// Tüm çocukları döngüyle işle
for (const link of navbar.children) {
    link.style.marginRight = "15px";
    link.style.textDecoration = "none";
}

// veya Array.from ile
Array.from(navbar.children).forEach((link, index) => {
    console.log(`${index + 1}. link: ${link.innerText}`);
});

Örnek 4: İlk ve Son Öğeye Özel Stil

html

<ul class="liste">
    <li>Öğe 1</li>
    <li>Öğe 2</li>
    <li>Öğe 3</li>
    <li>Öğe 4</li>
</ul>

javascript

const liste = document.querySelector(".liste");

// İlk öğeye stil
liste.firstElementChild.style.fontWeight = "bold";
liste.firstElementChild.style.color = "green";

// Son öğeye stil
liste.lastElementChild.style.fontStyle = "italic";
liste.lastElementChild.style.color = "red";

Örnek 5: Bir Sonraki/Önceki Öğeye Geçiş

html

<div class="galeri">
    <img src="1.jpg" class="aktif">
    <img src="2.jpg">
    <img src="3.jpg">
</div>
<button id="onceki">◀ Önceki</button>
<button id="sonraki">Sonraki ▶</button>

javascript

const oncekiBtn = document.querySelector("#onceki");
const sonrakiBtn = document.querySelector("#sonraki");

sonrakiBtn.addEventListener("click", function() {
    const aktif = document.querySelector(".galeri .aktif");
    const sonraki = aktif.nextElementSibling;

    if (sonraki) {
        aktif.classList.remove("aktif");
        sonraki.classList.add("aktif");
    }
});

oncekiBtn.addEventListener("click", function() {
    const aktif = document.querySelector(".galeri .aktif");
    const onceki = aktif.previousElementSibling;

    if (onceki) {
        aktif.classList.remove("aktif");
        onceki.classList.add("aktif");
    }
});

Örnek 6: Accordion - Kardeşleri Kapat

html

<div class="accordion">
    <div class="panel aktif">
        <h3>Panel 1</h3>
        <div class="icerik">İçerik 1</div>
    </div>
    <div class="panel">
        <h3>Panel 2</h3>
        <div class="icerik">İçerik 2</div>
    </div>
    <div class="panel">
        <h3>Panel 3</h3>
        <div class="icerik">İçerik 3</div>
    </div>
</div>

javascript

const panelBasliklari = document.querySelectorAll(".panel h3");

panelBasliklari.forEach(baslik => {
    baslik.addEventListener("click", function() {
        const panel = this.parentElement;  // h3'ün parent'ı olan panel
        const accordion = panel.parentElement;  // accordion container

        // Tüm kardeş panelleri kapat
        Array.from(accordion.children).forEach(p => {
            p.classList.remove("aktif");
        });

        // Tıklanan paneli aç
        panel.classList.add("aktif");
    });
});

Örnek 7: Tablo Satırı Vurgulama

html

<table id="urun-tablosu">
    <tr><td>Ürün A</td><td>100 TL</td><td><button class="sec-btn">Seç</button></td></tr>
    <tr><td>Ürün B</td><td>200 TL</td><td><button class="sec-btn">Seç</button></td></tr>
    <tr><td>Ürün C</td><td>150 TL</td><td><button class="sec-btn">Seç</button></td></tr>
</table>

javascript

const secButonlari = document.querySelectorAll(".sec-btn");

secButonlari.forEach(btn => {
    btn.addEventListener("click", function() {
        // button → td → tr
        const satir = this.parentElement.parentElement;

        // Tüm satırların seçimini kaldır
        const tablo = satir.parentElement;
        Array.from(tablo.children).forEach(tr => {
            tr.classList.remove("secili");
        });

        // Bu satırı seç
        satir.classList.add("secili");
    });
});

javascript

// Bir elementten en üst parent'a kadar yol bul
function yolBul(element) {
    const yol = [];
    let current = element;

    while (current && current !== document.body) {
        yol.unshift(current.tagName.toLowerCase());
        current = current.parentElement;
    }

    return yol.join(" > ");
}

const hedef = document.querySelector(".hedef-element");
console.log(yolBul(hedef));  // "div > ul > li > span"

closest() Metodu

closest() metodu, bir elementten başlayarak yukarı doğru belirtilen seçiciyle eşleşen ilk elementi bulur.

html

<div class="kart" data-id="42">
    <div class="kart-body">
        <h3>Başlık</h3>
        <p>Açıklama</p>
        <button class="detay-btn">Detay</button>
    </div>
</div>

javascript

const btn = document.querySelector(".detay-btn");

// En yakın .kart'ı bul (parentElement zinciri yerine)
const kart = btn.closest(".kart");
console.log(kart.dataset.id);  // "42"

// En yakın div'i bul
const yakinDiv = btn.closest("div");
console.log(yakinDiv);  // <div class="kart-body">...</div>

closest() vs parentElement Karşılaştırma

javascript

// parentElement ile (her seviyeyi tek tek geçmen gerekir)
const kart = btn.parentElement.parentElement;

// closest ile (direkt hedefi bul)
const kart = btn.closest(".kart");

closest() daha pratik ve okunaklı!

Özet Tablosu

Property/Metod	Açıklama	Dönen Değer
`parentElement`	Üst element	Element veya null
`children`	Tüm çocuk elementler	HTMLCollection
`childElementCount`	Çocuk sayısı	Number
`firstElementChild`	İlk çocuk	Element veya null
`lastElementChild`	Son çocuk	Element veya null
`nextElementSibling`	Sonraki kardeş	Element veya null
`previousElementSibling`	Önceki kardeş	Element veya null
`closest(selector)`	Yukarıda eşleşen ilk element	Element veya null

Özet

javascript

const element = document.querySelector("#element");

// YUKARI GİTME (Parent)
element.parentElement;              // Doğrudan üst element
element.closest(".wrapper");        // Yukarıda eşleşen ilk element

// AŞAĞI GİTME (Children)
element.children;                   // Tüm çocuklar (HTMLCollection)
element.childElementCount;          // Çocuk sayısı
element.firstElementChild;          // İlk çocuk
element.lastElementChild;           // Son çocuk

// YANA GİTME (Siblings)
element.nextElementSibling;         // Sonraki kardeş
element.previousElementSibling;     // Önceki kardeş

Sırada Ne Var?

DOM'da gezinmeyi öğrendik. Peki yeni elementler oluşturup DOM'a eklemek istersek?

Bir sonraki makalede Append & AppendChild konusunu öğreneceğiz - JavaScript ile yeni elementler oluşturma ve DOM'a ekleme yolları.

JavaScript DOM: Parent, Children ve Siblings

DOM Ağacı Hatırlatma

Parent'a Erişim

parentElement

parentNode vs parentElement

Children'a Erişim

children

childElementCount

firstElementChild & lastElementChild

Sibling'lere Erişim (Kardeşler)

nextElementSibling

previousElementSibling

Element vs Node

Fark Nerede Ortaya Çıkar?

Element Metodlarını Kullanın!

Pratik Örnekler

Örnek 1: Tıklanan Öğenin Parent'ını Vurgula

Örnek 2: Sil Butonu (Parent'tan Kaldırma)

Örnek 3: Tüm Çocukları Döngüyle İşleme

Örnek 4: İlk ve Son Öğeye Özel Stil

Örnek 5: Bir Sonraki/Önceki Öğeye Geçiş

Örnek 6: Accordion - Kardeşleri Kapat

Örnek 7: Tablo Satırı Vurgulama

closest() Metodu

closest() vs parentElement Karşılaştırma

Özet Tablosu

Özet

Sırada Ne Var?

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword

DOM Ağacı Hatırlatma

Parent'a Erişim

parentElement

parentNode vs parentElement

Children'a Erişim

children

childElementCount

firstElementChild & lastElementChild

Sibling'lere Erişim (Kardeşler)

nextElementSibling

previousElementSibling

Element vs Node

Fark Nerede Ortaya Çıkar?

Element Metodlarını Kullanın!

Pratik Örnekler

Örnek 1: Tıklanan Öğenin Parent'ını Vurgula

Örnek 2: Sil Butonu (Parent'tan Kaldırma)

Örnek 3: Tüm Çocukları Döngüyle İşleme

Örnek 4: İlk ve Son Öğeye Özel Stil

Örnek 5: Bir Sonraki/Önceki Öğeye Geçiş

Örnek 6: Accordion - Kardeşleri Kapat

Örnek 7: Tablo Satırı Vurgulama

Örnek 8: Breadcrumb Gezinme

closest() Metodu

closest() vs parentElement Karşılaştırma

Özet Tablosu

Özet

Sırada Ne Var?

İlgili yazılar

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword