JavaScript HTML DOM Öğesi

Bu bölüm, HTML sayfasındaki HTML elemanlarını nasıl bulup erişeceğinizi öğretir.

HTML elemanlarını bulma

Genellikle, JavaScript ile HTML elemanlarını işlemek gerekir.

Bu amaca ulaşmak için önce bu elemanları bulmanız gerekmektedir. Bu görevi tamamlamak için çeşitli yöntemler vardır:

  • ID ile HTML elemanlarını bulma
  • Etiket adı ile HTML elemanlarını bulma
  • CSS seçicisi ile HTML elemanlarını bulma
  • CSS seçicisi ile HTML elemanlarını bulma
  • HTML nesne koleksiyonu ile HTML elemanlarını bulma

ID ile HTML elemanlarını bulma

DOM'da HTML elemanlarını bulmanın en basit yolu, elemanın id'sini kullanmaktır.

Bu örnek, id="intro" olan elemanı arar:

Örnek

var myElement = document.getElementById("intro");

Kişisel olarak deneyin

Eleman bulunursa, bu yöntem elemanı nesne olarak döndürür (myElement içinde).

Eleman bulunamadığında, myElement içeriği null.

Etiket adı ile HTML elemanlarını bulma

Bu örnek, tüm <p> Element:

Örnek

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

Kişisel olarak deneyin

Bu örnek, id="main" olan elemanı bulur, ardından "main" içindeki tüm <p> Element:

Örnek

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

Kişisel olarak deneyin

CSS seçicisi ile HTML elemanlarını bulma

Aynı sınıf adına sahip tüm HTML elemanlarını bulmak için aşağıdaki kullanın getElementsByClassName().

Bu örnek, class="intro" içeren tüm elemanların listesini döndürür:

Örnek

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

Kişisel olarak deneyin

Internet Explorer 8 ve daha eski sürümlerine uygulanmaz.

CSS seçicisi ile HTML elemanlarını bulma

Belirtilen CSS seçicisi (id, sınıf adı, tür, özellik, özellik değeri vb.) ile eşleşen tüm HTML elemanlarını bulmanız gerekiyorsa, aşağıdaki kullanın querySelectorAll() metodları döndürür.

Bu örnek, class="intro" olan tüm <p> Element listesi:

Örnek

var x = document.querySelectorAll("p.intro");

Kişisel olarak deneyin

querySelectorAll() Internet Explorer 8 ve daha eski sürümlerine uygulanmaz.

HTML nesnesi seçicisi ile HTML nesnesi bulma

Bu örnek, id="frm1" olan form elementini forms koleksiyonunda bulur ve tüm element değerlerini gösterir:

Örnek

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 = text;

Kişisel olarak deneyin

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