En son web geliştirme öğreticiler
 

JavaScript HTML DOM Elemanları

❮ Önceki Sonraki Bölüm ❯

Bu sayfa, nasıl bulup bir HTML sayfası erişim HTML öğeleri öğretir.

Bulma HTML Elemanları

Çoğu zaman, JavaScript, HTML öğelerini işlemek istiyorum.

Bunu yapmak için öncelikle eleman bulmak zorunda. Bunu yapmak için bir çift yol var:

  • HTML öğelerini bulma id
  • etiket adıyla HTML öğelerini bulma
  • Tarafından HTML öğelerini bulma class adı
  • CSS seçicileri tarafından HTML öğelerini bulma
  • HTML nesnesi koleksiyonları ile HTML öğelerini bulma

Tarafından HTML Element Bulma Id

DOM bir HTML elemanı bulmanın en kolay yolu, eleman kullanmaktır id .

Bu örnek ile eleman bulur id="intro" :

Örnek

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

Elemanı bulunduğunda, yöntem (bir nesne olarak elemanının döner myElement ).

Eleman bulunmazsa, myElement boş içerecektir.

Etiket Adı HTML Öğeleri Bulma

Bu örnek, tüm bulur <p> elemanları:

Örnek

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

Bu örnek görmemektedir id="main" ve tüm bulur <p> içinde elemanları "main" :

Örnek

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

HTML Öğeleri bulma Class Adı

Aynı ile tüm HTML öğelerini bulmak istiyorsanız class adı, kullanmak getElementsByClassName() .

Bu örnek ile tüm unsurların bir listesini döndürür class="intro" .

Örnek

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

sınıf adına göre bulma elemanları Internet Explorer 8 ve önceki sürümlerinde çalışmaz.

CSS Seçiciler HTML Öğeleri Bulma

Eğer belirli bir CSS seçici eşleşen tüm HTML öğelerini bulmak istiyorsanız ( id , class names, types, attributes, values of attributes, etc) kullanmak querySelectorAll() yöntemini.

Bu örnek, bütün bir listesini verir <p> ile elemanlarının class="intro" .

Örnek

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

querySelectorAll() metodu Internet Explorer 8 ve önceki sürümlerinde çalışmaz.

HTML Nesne Koleksiyonları HTML Öğeleri Bulma

Bu örnek formu ile eleman bulur id="frm1" formları koleksiyonunda, ve görüntüler tüm eleman değerleri:

Ö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;
Kendin dene "

Aşağıdaki HTML nesneleri (and object collections) da erişilebilir:

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »


❮ Önceki Sonraki Bölüm ❯