JavaScript HTML DOM Navigasyon

HTML DOM ile, nod ağacını navigasyon etmek için nod ilişkilerini kullanabilirsiniz.

DOM Düğümü

W3C HTML DOM standartlarına göre, HTML belgesindeki tüm şeyler nodlardır:

  • Tüm belge belge nodudur
  • Her HTML elementi element nodudur
  • HTML elementindeki metin metin nodudur
  • Her HTML özelliği özellik nodudur
  • Tüm yorumlar yorum nodlarıdır
DOM HTML Ağacı

HTML DOM ile, nod ağacındaki tüm nodlar JavaScript ile erişilebilir.

Yeni nodlar oluşturabilir, aynı zamanda tüm nodları değiştirebilir ve silebilirsiniz.

Nod ilişkileri

Nod ağacındaki nodlar birbirleriyle belirli bir hiyerarşik ilişki içinde bulunurlar.

  • Terimler (ebeveyn, çocuk ve kardeş, parent, child ve sibling) bu ilişkileri tanımlamak için kullanılır.
  • Nod ağacında, en üst nod kök olarak adlandırılır (kök nodu bir ebeveyni yoktur).
  • Her nod bir ebeveyn noduna sahiptir, kök (kök nodu bir ebeveyni yoktur) dışında.
  • Nodlar belirli bir sayıda çocuğa sahip olabilir
  • Aynı ebeveyni paylaşan nodlar, kardeş (kardeş veya kız kardeş) olarak adlandırılır.
<html>
   <head>
       <title>DOM Eğitimi</title>
   </head>
  <body>
       <h1>DOM İlk Dersi</h1>
       <p>Merhaba dünya!</p>
   </body>
</html>
DOM HTML Ağacı

Yukarıdaki HTML'den aşağıdaki bilgileri okuyabilirsiniz:

  • html, kök düğüm olarak bilinir
  • html, bir ebeveyni yoktur
  • html, head ve body'nin ebeveynidir
  • head, html'nin ilk çocuğudur
  • <body> <html> inin son altıdır

Aynı zamanda:

  • <head> bir altı var: <title>
  • <title> bir altı (metin düğümü) var: "DOM Eğitimi"
  • <body> iki altı var: <h1> ve <p>
  • <h1> bir altı var: "DOM İlk Dersi"
  • <p> bir altı var: "Hello world!"
  • <h1> ve <p> kardeşlerdir

Düğümler arasında navigation

JavaScript kullanarak, düğümler arasında aşağıdaki düğüm özelliklerini kullanarak navigation yapabilirsiniz:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Alt düğüm ve düğüm değeri

DOM işlemlerinde yaygın bir hata, element düğümünde metin içerildiğini düşünmektir.

Örnek:

<title id="demo">DOM Eğitimi</title>

（yukarıdaki örnekteki）element düğümü <title> İçermeyenmetni içerir.

Değeri "DOM Eğitimi" olanMetin düğümüile erişilebilir.

Metin düğümünün değeri, düğümün innerHTML özelliklerine erişmekle eşittir:

var myTitle = document.getElementById("demo").innerHTML;

innerHTML özelliğini erişmek, ilk alt düğümün nodeValue：

var myTitle = document.getElementById("demo").firstChild.nodeValue;

Böylece de ilk alt düğümü erişebilirsiniz:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Aşağıdaki üç örnek, <h1> Öğenin metnini kopyalamak için <p> Öğede:

Örnek 1

<html>
<body>
<h1 id="id01">Benim ilk sayfam</h1>
<p id="id02">Merhaba!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Kişisel olarak deneyin

Örnek 2

<html>
<body>
<h1 id="id01">Benim ilk sayfam</h1>
<p id="id02">Merhaba!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Kişisel olarak deneyin

Örnek 3

<html>
<body>
<h1 id="id01">Benim ilk sayfam</h1>
<p id="id02">Merhaba!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Kişisel olarak deneyin

InnerHTML

Bu dersimizde, aşağıdakileri kullanıyoruz: innerHTML HTML elementinin içeriğini geri alır.

Ancak, yukarıdaki diğer yöntemleri öğrenmek DOM'un ağac yapısını ve navigasyonunu anlamak için yardımcı olur.

DOM kök düğümü

Tam belgeye erişmek için iki özel öznitelik vardır:

  • document.body - Belgenin body'si
  • document.documentElement - Tam belge

Örnek

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM çok faydalıdır!</p>
<p><b>document.body</b> öznitelikğini gösteren bu örnekteyiz.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Kişisel olarak deneyin

Örnek

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM çok faydalıdır!</p>
<p><b>document.documentElement</b> öznitelikğini gösteren bu örnekteyiz.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Kişisel olarak deneyin

nodeName öznitelik

nodeName öznitelik, düğümün adını tanımlar.

  • nodeName sadece okunabilir
  • Element düğümünün nodeName'si etiket adına eşittir
  • Öznitelik düğümünün nodeName'si öznitelik adıdır
  • Metin düğümünün nodeName her zaman #text'tür
  • Doküman düğümünün nodeName her zaman #document'tur

Örnek

<h1 id="id01">Benim ilk web sayfam</h1>
<p id="id02">Merhaba!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Kişisel olarak deneyin

Açıklama:nodeName, HTML elementinin büyük harfle yazılmış etiket adını her zaman içerir.

nodeValue öznitelik

nodeValue öznitelik, düğümün değerini tanımlar.

  • element düğümünün nodeValue'si undefined'dir
  • metin düğümünün nodeValue'si metin metnidir
  • öznitelik düğümünün nodeValue'si öznitelik değeridir

nodeType öznitelik

nodeType öznitelik, düğümün türünü döndürür.nodeType sadece okunabilir.

Örnek

<h1 id="id01">Benim ilk web sayfam</h1>
<p id="id02">Merhaba!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Kişisel olarak deneyin

En önemli nodeType özelliği:

Düğüm Tür Örnek
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (kullanılmamıştır)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- Bu bir yorum -->
DOCUMENT_NODE 9 HTML belgesi kendisi (<html>'in ebeveyni)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Type 2 HTML DOM'da kullanılmamıştır. XML DOM'da kullanılmıştır.