DOM'u anlamak, web geliştirme kariyerinizde çok önemlidir. DOM'da farklı öğeleri nasıl seçeceğinizi bilmelisiniz, böylece içeriklerini okuyabilir veya değiştirebilirsiniz.

DOM geçişi, HTML belgelerinin oluşturduğu ağaç benzeri yapıda nasıl gezinileceğini açıklar. İşte DOM'da JavaScript ile nasıl geçiş yapılacağına dair eksiksiz bir kılavuz.

DOM Geçişi Nedir?

bu Belge Nesnesi Modeliveya kısaca DOM, bir HTML belgesinin ağaç benzeri bir temsilidir. sağlar API bu, web geliştiricisi olarak JavaScript kullanarak bir web sitesiyle etkileşim kurmanıza olanak tanır.

DOM'daki her öğe bir düğüm olarak bilinir. HTML belge yapınızı, içeriğinizi ve stilinizi yalnızca DOM aracılığıyla değiştirebilirsiniz.

DOM geçişi (DOM'da yürüme veya gezinme olarak da adlandırılır), DOM ağacındaki düğümleri diğer düğümlerden seçme eylemidir. Muhtemelen çeşitli yöntemlere zaten aşinasınızdır. DOM ağacındaki öğelere erişme kimliklerine, sınıflarına veya etiket adlarına göre. gibi yöntemleri kullanabilirsiniz. Document.querySelector() Ve Document.getElementById() böyle yaparak.

instagram viewer

DOM'da daha verimli ve sağlam yollarla gezinmek için birlikte kullanabileceğiniz başka yöntemler de vardır. Tahmin edebileceğiniz gibi, harita üzerinde önceden bilinen bir noktadan arama yapmak, tam bir arama yapmaktan daha iyidir.

Örneğin, üst öğesinden bir alt öğe seçmek, onu tüm ağaçta aramaktan daha kolay ve verimlidir.

Geçiş Yapılacak Örnek Bir Belge

DOM ağacındaki belirli bir düğüme erişiminiz olduğunda, ilgili düğümlerine farklı şekillerde erişebilirsiniz. Seçtiğiniz düğümden DOM ağacında aşağı, yukarı veya yana doğru hareket edebilirsiniz.

İlk yöntem, en üstteki bir düğümden (belge düğümü gibi) başlayarak ve aşağı doğru hareket eden bir öğe aramayı içerir.

İkinci yol ise tam tersidir: bir iç öğeden ağacın yukarısına doğru hareket eder, bir dış öğe ararsınız. Son yöntem, belge ağacında aynı düzeydeki başka bir öğeden (iki öğenin kardeş olduğu anlamına gelir) bir öğe aradığınız zamandır.

Göstermek için şu örnek HTML belgesini göz önünde bulundurun:

<!DOCTYPE html>
<html dili="tr">
<KAFA>
<meta karakter kümesi="UTF-8" />
<meta http eşdeğeri="X-UA Uyumlu" içerik="IE=kenar" />
<meta adı="görüntü alanı" içerik="genişlik=cihaz genişliği, başlangıç ​​ölçeği=1.0" />
<başlık>Örnek Sayfa</title>
</head>
<vücut>
<ana>
<h1>Sayfa Başlığım</h1>
<P>Güzel başlık buraya gelecek</P>


<makale sınıfı="ilk makale">
<h2>Harika meyvelerin listesi</h2>
<P>meyve yemeli</P>


<div sınıfı="sarmalayıcı-1">
<Ul sınıfı="elma listesi">
<li sınıfı="elma">Elmalar</li>
<li sınıfı="turuncu">portakallar</li>
<li sınıfı="avokado">Avokado</li>
<li sınıfı="üzüm">
 üzüm


<Ul>
<li sınıfı="tip-1">Ay damlaları</li>
<li>Valide Sultan</li>
<li>Uyum</li>
<li>Kızıl Çekirdeksiz</li>
</ul>
</li>
<li sınıfı="muz">Muz</li>
</ul>


<düğme sınıfı="btn-1">Listenin tamamını oku</button>
</div>
</article>


<makale sınıfı="ikinci makale">
<h2>Kenya'daki harika yerler</h2>
<P>Kenya'da görülmesi gereken yerler</P>


<div sınıfı="sarmalayıcı-2">
<Ul sınıfı="yerler listesi">
<li>Masai Mara</li>
<li>Diani Plajı</li>
<li>Watamu Plajı</li>
<li>Amboseli milli parkı</li>
<li>Nakuru Gölü</li>
</ul>


<düğme sınıfı="btn-2">Listenin tamamını oku</button>
</div>
</article>
</main>
</body>
</html>

DOM'u Aşağıya Doğru Gezmek

İki yöntemden birini kullanarak DOM'u aşağı doğru hareket ettirebilirsiniz. İlki ortak seçici yöntemdir (eleman.querySelector veya element.querySelectorAll). İkinci olarak, kullanabilirsiniz çocuklar veya çocuk Düğümleri mülk. Ayrıca iki özel özellik daha vardır, yani, son çocuk Ve ilk çocuk.

Seçici Yöntemleri Kullanma

QuerySelector() yöntemleri, belirli bir seçiciyle eşleşen bir veya daha fazla öğe aramanıza olanak tanır. Örneğin, "ilk makale" sınıfına sahip ilk öğeyi şunu kullanarak arayabilirsiniz: Document.querySelector('.ilk makale'). Ve hepsini almak için h2 belgedeki öğeleri kullanabilirsiniz sorguSelectorAll yöntem: Document.querySelectorAll('h2'). bu sorguSelectorAll yöntem, eşleşen öğelerin bir düğüm listesini döndürür; köşeli parantez gösterimini kullanarak her bir öğeyi seçebilirsiniz:

sabit başlıklar = belge.querySelectorAll('h2');
sabit firstHeading = başlıklar[0]; // ilk h2 öğesinin seçilmesi
sabit ikinci Başlık = başlıklar[1]; // ikinci h2 öğesinin seçilmesi

Seçici yöntemleri kullanırken en önemli nokta, CSS'de yaptığınız gibi seçiciden önce uygun sembolleri kullanmanız gerektiğidir. Örneğin, sınıflar için ".classname" ve kimlikler için "#id".

Sonucun yalnızca seçilen öğenin iç içeriği değil, bir HTML öğesi olacağını unutmayın. İçeriğe erişmek için düğümün içHTML mülk:

belge.querySelector('.orange').innerHTML

Children veya childNodes Özelliklerini Kullanma

bu çocuklar özelliği, doğrudan belirli bir öğenin altındaki tüm alt öğeleri seçer. İşte bir örnek çocuklar eylemdeki özellik:

sabit elmaListesi = belge.querySelector('.elma listesi');
sabit elmalar = appleList.children; 
konsol.log (elmalar);

Kerestecilik elmalar konsola, bir HTML koleksiyonu olarak bir "elma listesi" sınıfına sahip öğenin hemen altındaki tüm liste öğeleri kümesini görüntüler. Bir HTML koleksiyonu, dizi benzeri bir nesnedir, bu nedenle, querySelectorAll'da olduğu gibi öğeleri seçmek için parantez gösterimini kullanabilirsiniz.

aksine çocuklar mülk, çocuk Düğümleri tüm doğrudan alt düğümleri döndürür (yalnızca alt öğeleri değil). Yalnızca alt öğelerle ilgileniyorsanız, yalnızca liste öğelerini söyleyin, çocuklar mülk.

Özel lastChild ve firstChild Özelliklerini Kullanma

Bu iki yöntem, ilk ikisi kadar sağlam değildir. İsimlerinden de anlaşılacağı gibi, son çocuk Ve ilk çocuk özellikler bir öğenin son ve ilk alt düğümlerini döndürür.

sabit elmaListesi = belge.querySelector('.elma listesi');
sabit firstChild = appleList.firstChild;
sabit lastChild = appleList.lastChild;

DOM'u Yukarı Doğru Gezmek

kullanarak DOM'da gezinebilirsiniz. üst öğe (veya ebeveyn Düğümü) Ve en yakın özellikler.

parentElement veya parentNode kullanma

İkisi birden üst öğe veya ebeveyn Düğümü özellikler, seçilen öğenin üst düğümünü bir üst düzey seçmenize izin verir. Kritik fark şu ki üst öğe yalnızca bir öğe olan üst düğümü seçer. Diğer taraftan, ebeveyn Düğümü bir öğe veya farklı bir düğüm türü olup olmadığına bakılmaksızın bir ebeveyn seçebilir.

Aşağıdaki kod örneğinde kullandığımız üst öğe "elma listesinden" "wrapper-1" sınıfına sahip div'i seçmek için:

sabit elmaListesi = belge.querySelector('.elma listesi');
sabit ebeveynDiv = elmaList.parentElement; 
konsol.log (anaDiv); // sarmalayıcı-1 sınıfıyla div öğesini görüntüler

En yakın Mülkü kullanma

bu en yakın özelliği, belirtilen bir seçiciyle eşleşen ilk üst öğeyi seçer. Bir yerine birden fazla seviye seçmenizi sağlar. Örneğin, "btn-1" sınıfı seçiliyken buton zaten seçiliyse, ana öğesini kullanan öğe en yakın mülkiyet aşağıdaki gibidir:

sabit btn1 = belge.querySelector('.btn-1');
const mainEl = btn1.closest('ana');
konsol.log (anaEl); // ana öğeyi görüntüler

Beğenmek sorgu seçici Ve sorguSelectorAll, uygun seçicileri kullanın en yakın yöntem.

DOM'u Yan Yana Gezmek

DOM'u yanlara doğru yürümek için iki yöntem vardır. Kullanabilirsiniz nextElementKardeş veya öncekiElementKardeş. Kullanmak nextElementKardeş aşağıdaki kardeş öğeyi seçmek için ve öncekiElementKardeş önceki kardeşi seçmek için

sabit turuncu = belge.querySelector('.turuncu');
sabit elma = orange.previousElementSibling;
sabit avokado = orange.nextElementSibling;

eşdeğerleri de var sonrakiKardeş Ve ÖncekiKardeş yalnızca öğelerden değil, tüm düğüm türlerinden de seçim yapan özellikler.

DOM Geçiş Özelliklerini ve Yöntemlerini Zincirleyerek Daha Fazlasını Yapın

Yukarıdaki tüm yöntemler ve özellikler, DOM'da herhangi bir düğümü seçmenizi sağlayabilir. Ancak bazı durumlarda önce yukarı, sonra aşağı veya yanlara doğru hareket etmek isteyebilirsiniz. Bu durumda, farklı özellikleri birlikte zincirlemek kullanışlı olacaktır.