JavaScript HTML DOM Gezinme
HTML DOM ile düğüm ilişkilerini kullanarak düğüm ağacında gezinebilirsiniz.
DOM Düğümleri
W3C HTML DOM standardına göre, bir HTML belgesindeki her şey bir düğümdür:
- Belgenin tamamı bir belge düğümüdür
- Her HTML öğesi bir öğe düğümüdür
- HTML öğelerinin içindeki metin, metin düğümleridir.
- Her HTML özniteliği bir öznitelik düğümüdür (kullanımdan kaldırıldı)
- Tüm yorumlar yorum düğümleridir
HTML DOM ile düğüm ağacındaki tüm düğümlere JavaScript ile erişilebilir.
Yeni düğümler oluşturulabilir ve tüm düğümler değiştirilebilir veya silinebilir.
Düğüm İlişkileri
Düğüm ağacındaki düğümler birbirleriyle hiyerarşik bir ilişkiye sahiptir.
Ebeveyn, çocuk ve kardeş terimleri ilişkileri tanımlamak için kullanılır.
- Bir düğüm ağacında, en üstteki düğüme kök (veya kök düğüm) adı verilir.
- Kök dışında (ebeveyni olmayan) her düğümün tam olarak bir ebeveyni vardır.
- Bir düğümün birkaç çocuğu olabilir
- Kardeşler (kardeşler) aynı ebeveyne sahip düğümlerdir
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
Yukarıdaki HTML'den şunları okuyabilirsiniz:
<html>kök düğümdür<html>ebeveyni yok<html>ebeveynidir<head>ve<body><head>ilk çocuğu<html><body>son çocuğu<html>
ve:
<head>bir çocuğu var:<title><title>bir çocuğu var (bir metin düğümü): "DOM Eğitimi"<body>iki çocuğu var:<h1>ve<p><h1>bir çocuğu var: "DOM Dersi bir"<p>bir çocuğu var: "Merhaba dünya!"<h1>ve<p>kardeşler
Düğümler Arasında Gezinme
JavaScript ile düğümler arasında gezinmek için aşağıdaki düğüm özelliklerini kullanabilirsiniz:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
Alt Düğümler ve Düğüm Değerleri
DOM işlemede yaygın bir hata, bir öğe düğümünün metin içermesini beklemektir.
Örnek:
<title
id="demo">DOM Tutorial</title>
Öğe düğümü
<title>(yukarıdaki örnekte) metin içermiyor .
"DOM Eğitimi" değerine sahip bir metin düğümü içerir.
Metin düğümünün değerine, düğümün özelliğinden erişilebilir
innerHTML:
myTitle = document.getElementById("demo").innerHTML;
nodeValue
innerHTML özelliğine erişim , ilk alt öğeye erişim ile aynıdır :
myTitle = document.getElementById("demo").firstChild.nodeValue;
İlk çocuğa erişim şu şekilde de yapılabilir:
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
Aşağıdaki tüm (3) örnekler, bir öğenin metnini alır <h1>ve onu bir öğeye kopyalar <p>:
Örnek
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").innerHTML;
</script>
</body>
</html>
Örnek
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
Örnek
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
InnerHTML
Bu öğreticide, bir HTML öğesinin içeriğini almak için innerHTML özelliğini kullanıyoruz.
Bununla birlikte, yukarıdaki diğer yöntemleri öğrenmek, ağaç yapısını ve DOM'nin gezinmesini anlamak için yararlıdır.
DOM Kök Düğümleri
Belgenin tamamına erişime izin veren iki özel özellik vardır:
document.body- Belgenin gövdesidocument.documentElement- Tam belge
Örnek
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p
id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= document.body.innerHTML;
</script>
</body>
</html>
Örnek
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
document.documentElement.innerHTML;
</script>
</body>
</html>
nodeName Özellik
Özellik nodeName, bir düğümün adını belirtir.
- nodeName salt okunurdur
- Bir öğe düğümünün nodeName, etiket adıyla aynı
- öznitelik düğümünün düğümAdı öznitelik adıdır
- Bir metin düğümünün düğüm adı her zaman #metindir
- Belge düğümünün düğüm adı her zaman #document olur
Örnek
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
Not: nodeName her zaman bir HTML öğesinin büyük harfli etiket adını içerir.
nodeValue Özellik
Özellik nodeValue, bir düğümün değerini belirtir.
- eleman düğümleri için nodeValue
null - metin düğümleri için nodeValue metnin kendisidir
- öznitelik düğümleri için nodeValue öznitelik değeridir
nodeType Özelliği
Özellik nodeTypesalt okunur. Bir düğümün türünü döndürür.
Örnek
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
En önemli nodeType özellikleri şunlardır:
| Node | Type | Example |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3Schools</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (deprecated) |
| TEXT_NODE | 3 | W3Schools |
| COMMENT_NODE | 8 | <!-- This is a comment --> |
| DOCUMENT_NODE | 9 | The HTML document itself (the parent of <html>) |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
Tip 2, HTML DOM'de kullanımdan kaldırılmıştır (ancak çalışır). XML DOM'de kullanımdan kaldırılmamıştır.