If you're seeing this message, it means we're having trouble loading external resources on our website.

Bağlandığınız bilgisayar bir web filtresi kullanıyorsa, *.kastatic.org ve *.kasandbox.org adreslerinin engellerini kaldırmayı unutmayın.

Ana içerik

Özet: DOM erişim yöntemleri

Hangi yöntemleri kullanabiliriz?

Aşağıdaki yöntemleri kullanarak web sayfanızda bir öğe veya öğeler kullanabileceğinizi göstermiştik:

Bunlar ne verir?

Bir tek Element nesnesi veren iki yöntem vardır, getElementById ve querySelector:
var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "Math is cool";
getElementsByClassName ve getElementsByTagName yöntemleri, bir dizi gibi davranan HTMLCollection nesnesi verir. Bu koleksiyon "canlıdır", yani etiket adı veya sınıf adı olan fazladan öğeler belgeye eklenirse, koleksiyon güncellenir.
var teamMembers = document.getElementsByClassName("team-member");
for (var i = 0; i < teamMembers.length; i++) {
   console.log(teamMembers[i].innerHTML);
}
querySelectorAll() yöntemi bir NodeList verir, bu da bir diziye benzer. Bu liste "durağandır", yani sayfaya yeni eşleşen öğeler eklense bile, liste güncellenmez. Büyük olasılıkla, bu yöntemleri kullanırken, iki çıktı veri türleri arasındaki farka rastlamayacaksınız, ama bunları aklımızda tutmanın zararı olmaz.
var teamMembers = document.querySelectorAll(".team-member");
for (var i = 0; i < teamMembers.length; i++) {
   console.log(teamMembers[i].innerHTML);
}

Alt sorularla erişme

Bir öğeyi bulduktan sonra, gösterdiğimiz yöntemleri kullanarak alt sorgulama yapabiliriz. Örneğin:
// ID'si böyle olan ögeyi bulur
var salsMotto = document.getElementById("salsMotto");
// bu ögenin genişliğini bulur:
var mottoWords = salsMotto.getElementsByTagName("span");
// kaç tane olduğunun çıktısını verir
console.log(mottoWords.length);

DOM'u geçme

Öğelere erişmenin başka bir yolu, DOM ağacını "geçmektir". Her öğe, bununla ilgili öğelere işaret eden özelliklere sahiptir:
  • firstElementChild
  • lastElementChild
  • nextElementChild/nextElementSibling
  • previousElementChild/previousElementSibling
  • childNodes
  • childElementCount
Örneğin:
var salsMotto = document.getElementById("salsMotto");
for (var i = 0; i < salsMotto.childNodes.length; i++) {
   console.log(salsMotto.childNodes[i]);
}
Bu özellikler, Text düğümlerinde mevcut değildir, sadece Element düğümlerinde mevcuttur. Bir öğeyi geçebileceğinizden emin olmak için, nodeType/nodeValue özelliklerini kontrol edebilirsiniz. Büyük olasılıkla, DOM geçişini kullanmak gerekli olmayacak veya bunu yapmayı istemeyeceksiniz, ama bu sizin için başka bir seçenektir.