JavaScript HTML DOM Öğeleri
Bu sayfa size bir HTML sayfasındaki HTML öğelerini nasıl bulacağınızı ve bunlara nasıl erişeceğinizi öğretir.
HTML Öğelerini Bulma
JavaScript ile genellikle HTML öğelerini değiştirmek istersiniz.
Bunun için önce elementleri bulmanız gerekir. Bunu yapmanın birkaç yolu vardır:
- kimliğe göre HTML öğeleri bulma
- Etiket adına göre HTML öğelerini bulma
- HTML öğelerini sınıf adına göre bulma
- CSS seçicileri tarafından HTML öğelerini bulma
- HTML nesne koleksiyonlarına göre HTML öğeleri bulma
Kimliğe göre HTML Öğesi Bulma
DOM'da bir HTML öğesini bulmanın en kolay yolu, öğe kimliğini kullanmaktır.
Bu örnek, öğeyi şu şekilde bulur id="intro"
:
Örnek
const element = document.getElementById("intro");
Öğe bulunursa, yöntem öğeyi bir nesne olarak (öğe içinde) döndürür.
Öğe bulunamazsa, öğe içerecektir null
.
Etiket Adına Göre HTML Öğelerini Bulma
<p>
Bu örnek tüm öğeleri bulur :
Örnek
const element = document.getElementsByTagName("p");
Bu örnek, öğesini içeren öğeyi bulur id="main"
ve ardından <p>
içindeki tüm öğeleri bulur "main"
:
Örnek
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
Sınıf Adına Göre HTML Öğelerini Bulma
Aynı sınıf adına sahip tüm HTML öğelerini bulmak istiyorsanız,
getElementsByClassName()
.
Bu örnek, içeren tüm öğelerin bir listesini döndürür class="intro"
.
Örnek
const x = document.getElementsByClassName("intro");
CSS Seçicileri ile HTML Öğelerini Bulma
Belirtilen bir CSS seçiciyle (id, sınıf adları, türler, nitelikler, nitelik değerleri vb.) eşleşen tüm HTML öğelerini bulmak istiyorsanız, querySelectorAll()
yöntemi kullanın.
<p>
Bu örnek, içeren tüm öğelerin bir listesini döndürür class="intro"
.
Örnek
const x = document.querySelectorAll("p.intro");
HTML Nesne Koleksiyonları ile HTML Öğelerini Bulma
Bu örnek, form koleksiyonunda ile form öğesini bulur id="frm1"
ve tüm öğe değerlerini görüntüler:
Örnek
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Aşağıdaki HTML nesnelerine (ve nesne koleksiyonlarına) da erişilebilir: