✅ HTML5 - DOM Ağacında Gezinme

İçindekiler

Bir belge içinde HTML DOM ağacına ait farklı öğeler arasında gezinebiliriz, bunun için hiyerarşik bir yapıya sahibiz ve belgelerin ilişkilerine yaklaşabileceğimiz birden fazla yöntem kullanabiliriz.
DOM ağacında gezinin
Bahsettiğimiz gibi, şemayı bir ağaç olarak görselleştiren hiyerarşik yapı üzerinden gezinme yapılabilir, bu şekilde öğeleri ebeveyn, çocuk, kardeş olarak ele alabiliriz.
Bununla ilişkiye göre arama felsefesi izlenerek bir eleman aranabilir.
Pratik uygulamalara geçmeden önce mevcut yöntemleri görelim:

· alt düğümler: Üst öğenin tüm alt öğelerini döndürür.

· ilk çocuk: Bir üst öğenin ilk çocuğu olan öğeyi döndürür.

· hasChildNodes(): Geçerli öğenin alt düğümleri varsa true veya true döndürür.

· son Çocuk: Belgedeki bir öğenin son alt öğesini döndürür.

· sonrakiKardeş: Geçerli HTML öğesi tarafından tanımlanan kardeş öğeyi döndürür.

· ebeveynDüğümü: Geçerli HTML öğesinin üst öğesini döndürür.

· öncekiKardeş: Geçerli HTML öğesinden önceki kardeş öğeyi döndürür.

Hangi yöntemlere sahip olduğumuzu öğrendikten sonra, gezinmenin ne hakkında olduğunu anlayacağımız basit bir kod örneği göreceğiz. DOM ağacı.

Örnek

Pek çok farklı meyve türü vardır - tek başına 500'den fazla muz çeşidi vardır. Sayısız elma, portakal ve diğer bilinen meyveleri eklediğimizde binlerce seçenekle karşı karşıyayız.

Meyvenin en ilginç yönlerinden biri, her ülkede bulunan çeşitliliktir. Londra yakınlarında elmalarıyla ünlü bir bölgede yaşıyorum.

Ebeveyn İlk Çocuk Önceki Kardeş Sonraki Kardeş

Bu kodun başardığı şey, öğeler arasında gezinebilmektir ve belgenin hangi bölümünde olduğumuzu ayırt edebilmek için onları açık gri renkte gölgeledikten sonra, tarayıcımızda nasıl göreceğimizi resimde görelim:

Gördüğümüz gibi, öğeleri DOM içine yerleştirmenin bu yolu, tanımlayıcılardan emin olmadığımızda veya dinamik ancak tanımlanmış bir yapı olduğunda bize yardımcı olur.
Bununla, tanımlayıcılara veya öğe adlarına güvenmeden, yalnızca hiyerarşik yapıdaki ilişkilerini kullanarak bir HTML belgesindeki öğeleri arayabileceğimiz bu öğreticiyi bitirdik.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.