Eğer bu mesajı görüyorsanız, web sitemizde dış kaynakları yükleme sorunu yaşıyoruz demektir.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

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.

Tartışmaya katılmak ister misiniz?

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