JavaScript DOM ERİŞİM YÖNTEMLERİ

Belge nesnesi, bir web belgesini veya sayfayı temsil eder. Bir belgeyi hiyerarşik bir ağaç yapısı olarak temsil eder ve belge ağacındaki her öğeye DOM'da (Belge Nesnesi Modeli) bir Düğüm denir.

Yapısal olarak, Belge Nesnesi Modeli düğümlerden oluşur ve her düğüm web belgesindeki içeriği temsil eder. Geliştiricilere her şeyi bir web sayfasında göstermek için bir yol sunar böylece web sayfasının içeriğine erişim yöntemler seti aracılığıyla erişilebilir olur.

HTML ELEMANLARI BULMA

---

Genellikle JavaScript ile HTML öğelerini değiştirmek isteyebilirsiniz. Bunu yapmak için önce HTML öğeleri bulmanız gerekir. HTML öğelerini bulmak için javaScript'de çeşitli erişim yöntemleri sunar.

• HTML öğelerini kimlik numarasıyla bulma
• HTML öğelerini etiket adına göre bulma
• HTML öğelerini sınıf adına göre bulma
• CSS seçicileriyle HTML öğelerini bulma
• HTML öğelerini HTML nesne koleksiyonlarıyla bulma

Id ile HTML Elemanı Bulma

---

Genellikle DOM içindeki bir öğeye erişmek ve niteliklerini değiştirmek istiyorsanız. Javascript, bir öğeye DOM ağaç yapısından erişmenin en kolay yolu olan document.getElementById() yöntemini sağlar. Belirtilen değer ile ID özniteliğine sahip olan öğeyi döndürür.

Aşağıda ki örnek, id = "test" olan öğeyi bulur:

ÖRNEK:

 
 var x = document.getElementById("test");
 
 

Eleman bulunursa, yöntem öğeyi bir nesne olarak (x öğesinde) döndürür. Eleman bulunamazsa, x'de boş değer bulunacaktır.

Etiket Adına Göre HTML Elements Bulma

---

getElementsByTagName() yöntemi, dokümandaki tüm öğelerin belirtilen etiket adına sahip bir koleksiyonunu bir NodeList nesnesi olarak döndürür.

NodeList nesnesi düğümlerin bir koleksiyonunu temsil eder. Düğümlere dizin numaraları erişilebilir. Endeks 0'dan başlar.

İpucu: NodeList nesnesinin length özelliğini, belirtilen etiket adına sahip öğe sayısını belirlemek için kullanabilirsiniz; ardından, tüm öğeler arasında döngü oluşturabilir ve istediğiniz bilgiyi ayıklayabilirsiniz.

İpucu: Parametre "*", belgedeki tüm öğeleri döndürür.

ÖRNEK:

 
 var x = document.getElementsByTagName("p");
 
 

Yukarıda ki örnek tüm <p> öğelerini bulur:

ÖRNEK:

 
 var x = document.getElementById("deneme");
 
 var y = x.getElementsByTagName("p");
 
 

Yukarıda ki örnek, id = "deneme" öğesini bulur ve sonra "deneme" içindeki tüm <p> öğelerini bulur:

ÖRNEK:

Belgedeki tüm <p> öğelerinin arka plan rengini değiştirin:

var x = document.getElementsByTagName("P");

var i;

for (i = 0; i < x.length; i++) {

    x[i].style.backgroundColor = "blue";
  
}

ÖRNEK:

Dokümandaki tüm öğeleri alın:

 
 var x = document.getElementsByTagName("*");
 
 

HTML Öğelerini Sınıf adına göre bulma

---

getElementsByClassName() yöntemi, belgede belirtilen sınıf adına sahip tüm öğelerin bir koleksiyonunu bir NodeList nesnesi olarak döndürür.

NodeList nesnesi düğümlerin bir koleksiyonunu temsil eder. Düğümlere dizin numaraları erişilebilir. Endeks 0'dan başlar.

İpucu: Belirtilen sınıf adına sahip öğe sayısını belirlemek için NodeList nesnesinin length özelliğini kullanabilirsiniz, ardından tüm öğeler arasında döngü oluşturabilir ve istediğiniz bilgiyi ayıklayabilirsiniz.

ÖRNEK:

class="deneme" olan elementi seçin.

var x = document.getElementsByClassName("deneme");

ÖRNEK:

Hem "test" ve "renk" sınıflarına sahip tüm öğeleri alın:

 var x = document.getElementsByClassName("test renk");

ÖRNEK:

Class = "deneme" olan tüm öğelerin arka plan rengini değiştirin:

var x = document.getElementsByClassName("test");

var i;

for (i = 0; i < x.length; i++) {

    x[i].style.backgroundColor = "blue";
  
}

HTML DOM querySelector () Yöntemi

querySelector() yöntemi, belgede belirtilen bir CSS seçiciyle eşleşen ilk öğeyi döndürür.

Not:querySelector() yöntemi yalnızca belirtilen seçicilerle eşleşen ilk öğeyi döndürür. Tüm eşleşenleri geri getirmek için bunun yerine querySelectorAll() yöntemini kullanın.

Seçici, birkaç kez kullanılan belgede bir kimlikle eşleşirse (bir "kimlik", bir sayfada benzersiz olması gerektiğini ve birden fazla kullanılmaması gerektiğini unutmayın), ilk eşleşen öğeyi döndürür.

Sözdizimi :

document.querySelector(CSS selectors)

Dokümandaki ilk <p> öğesini seçin.

ÖRNEK:

document.querySelector("p");

<p> öğesinin ilk Class = "test" olan elemanı şeçin.

ÖRNEK:

document.querySelector("p.test");

id="test" olan elemanı seçin.

ÖRNEK:

document.querySelector("#test");

HTML DOM querySelectorAll () Yöntemi

---

querySelectorAll() yöntemi, belgede belirtilen bir CSS seçiciyle eşleşen tüm öğeleri statik bir NodeList nesnesi olarak döndürür.

NodeList nesnesi düğümlerin bir koleksiyonunu temsil eder. Düğümlere dizin numaraları erişilebilir. Endeks 0'dan başlar.

İpucu: Belirtilen seçiciyle eşleşen öğelerin sayısını belirlemek için NodeList nesnesinin length özelliğini kullanabilirsiniz, ardından tüm öğeler arasında dolaşıp istediğiniz bilgiyi alabilirsiniz.

div etiketin alt elemanı p'yi seçin.

ÖRNEK:

var x = document.querySelectorAll("div > p");

Belgede tüm <h2>, <div> ve <span> öğelerinin arka plan rengini ayarlayın:

ÖRNEK:

var x = document.querySelectorAll("h2, div, span");

var i;

for (i = 0; i < x.length; i++) {

    x[i].style.backgroundColor = "green";
    
}

NOT : querySelector , jquery seçicilere göre hızlıdır.

HTML Elemanlarını HTML Nesne Koleksiyonlarıyla Bulma

---

Bu örnek, form koleksiyonunda id = "frm1" olan form öğesini bulur ve tüm öğe değerlerini görüntüler:

var x = document.forms["frm1"];

var text = "";

var i;

for (i = 0; i < x.length; i++) {

    text += x.elements[i].value + "<br>";
  
}

document.getElementById("demo").innerHTML =

Aşağıdaki HTML nesnelerine (ve nesne koleksiyonlarına) de erişilebilir:

• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title
• document.baseURI
• document.cookie
• document.domain
• document.URL

2371

Gönder