Ö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.

Tartışmaya katılmak ister misiniz?

Giriş Yap

Sıralama ölçütü:

Henüz gönderi yok.

İngilizce biliyor musunuz? Khan Academy'nin İngilizce sitesinde neler olduğunu görmek için buraya tıklayın.