0Pricing
JavaScript Academy · Ders

Üst, Alt ve Kardeş Öğeler Arasında Gezinme

İlişkili düğümler arasında DOM ağacında gezinin.

Üst, Alt ve Kardeş Öğeler Arasında Gezinme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Neden gezinmeli

Bir öğeyi elde ettikten sonra çoğu zaman onun akrabalarına da ihtiyaç duyarsınız: çevresindeki kapsayıcıya, içindeki öğelere veya hemen yanındaki öğeye. DOM gezinme özellikleri, ağaçta hareket etmenizi sağlar.

parentElement

parentElement, current öğeyi içeren öğeyi verir; ağacın en üstünde ise null döner.

const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);

Alt öğeler

children, bir öğenin doğrudan alt öğelerinden oluşan canlı bir HTMLCollection'dır (metin düğümleri dahil edilmez).

const list = document.querySelector("ul");
console.log(list.children.length);

firstElementChild ve lastElementChild

Bu özellikler, metin veya yorum düğümlerini atlayarak doğrudan ilk ya da son alt öğeye gider.

const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);

nextElementSibling

nextElementSibling, aynı üst öğe içindeki current öğenin hemen sonrasında bulunan öğeyi döndürür.

const current = document.querySelector("li.active");
const after = current.nextElementSibling;

previousElementSibling

previousElementSibling ters yönde ilerler. Her ikisi de kardeş öğe olmadığında null döndürür.

const current = document.querySelector("li.active");
const before = current.previousElementSibling;

Öğe ve düğüm özellikleri

Dikkatli olun: childNodes, nextSibling ve parentNode metin düğümlerini (boşluklar dahil) içerir. *Element* sürümleri genellikle istediğiniz özelliklerdir.

list.childNodes;          // includes whitespace text nodes
list.children;            // only elements

closest

closest, current öğeden başlayarak ağaçta yukarı doğru ilerler ve bir seçiciyle eşleşen en yakın üst öğeyi (veya öğenin kendisini) döndürür.

const btn = document.querySelector(".delete");
const row = btn.closest("tr");

Olay devri için closest

closest, bir tıklama içteki bir öğeye geldiğinde, ancak işlemi gerçekleştiren dış kapsayıcıya ihtiyaç duyduğunuzda mükemmeldir.

function onClick(e) {
  const card = e.target.closest(".card");
  if (card) {
    console.log(card.dataset.id);
  }
}

matches

matches, bir öğenin kendisinin bir seçiciyle eşleşip eşleşmediğini sınar ve bir mantıksal değer döndürür. Gezinmeyle birlikte kullanışlıdır.

const el = document.querySelector(".item");
console.log(el.matches(".item.active"));

Gezinmeyi birleştirme

Karmaşık yapılarda gezinmek için gezinme adımlarını zincirleyebilirsiniz; örneğin bir düğmeden satırına, oradan da sonraki satıra geçebilirsiniz.

const next = btn.closest("tr").nextElementSibling;

Hızlı kontrol

Doğru özelliği seçin.

Özet

parentElement ve closest ile yukarı, children, firstElementChild ve lastElementChild ile alt öğelere, nextElementSibling ve previousElementSibling ile yanlara hareket edebilirsiniz. Boşluk metin düğümlerini atlamak için yalnızca öğelerle çalışan özellikleri tercih edin.

Sıkça Sorulan Sorular

“Üst, Alt ve Kardeş Öğeler Arasında Gezinme” dersi ücretsiz mi?

Evet — “Üst, Alt ve Kardeş Öğeler Arasında Gezinme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Üst, Alt ve Kardeş Öğeler Arasında Gezinme” dersinde ne öğreneceğim?

İlişkili düğümler arasında DOM ağacında gezinin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Üst, Alt ve Kardeş Öğeler Arasında Gezinme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. querySelector ile Öğe Seçme
  2. getElementById ve getElementsByClassName
  3. Üst, Alt ve Kardeş Öğeler Arasında Gezinme
  4. NodeList ve HTMLCollection Karşılaştırması
← JavaScript Academy Sayfasına Dön