Ana içerik
Bilgisayar Programlama
Konu: Bilgisayar Programlama > Ünite 6
Ders 3: DOM Erişim YöntemleriÖ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?
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.