Latest web development tutorials

navigasi HTML DOM

Melalui DOM HTML, Anda dapat menggunakan node dalam hubungan pohon navigasi simpul.


daftar node HTML DOM

Buka menu () metode mengembalikan daftar node. daftar Node adalah array simpul.

kode berikut dokumen yang dipilih semua <p> simpul:

contoh

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

Hal ini dapat diakses oleh label berikutnya. Untuk mengakses kedua <p>, Anda dapat menulis:

y=x[1];

Coba »

Catatan:

Di bawah label dimulai pada 0.


HTML DOM Node Daftar Panjang

atribut panjang mendefinisikan jumlah node dalam daftar node.

Anda dapat menggunakan properti panjang loop daftar node:

contoh

x=document.getElementsByTagName("p");

for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}

Coba »

contoh analisis:

  • Dapatkan semua <p> elemen node
  • Nilai output dari masing-masing <p> unsur node teks

hubungan simpul Navigasi

Anda dapat menggunakan tiga atribut simpul: parentNode, firstChild dan lastChild, menavigasi melalui struktur dokumen.

Pertimbangkan fragmen HTML berikut:

<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>

</body>
</html>
  • Pertama <p> elemen adalah anak pertama dari <body> elemen (firstChild)
  • <Div> elemen adalah elemen anak terakhir <body> elemen (lastChild)
  • <Body> elemen pertama <p> elemen dan elemen <div> induk simpul (parentNode)

Properti firstChild dapat digunakan untuk mengakses elemen teks:

contoh

<html>
<body>

<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

Coba »


DOM akar simpul

Ada dua atribut khusus, Anda dapat mengakses semua dokumentasi:

  • document.documentElement - semua dokumen
  • document.body - tubuh dokumen

contoh

<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>

Coba »


childNodes dan nodeValue

Selain properti innerHTML, Anda juga dapat menggunakan childNodes dan properti nodeValue untuk mendapatkan isi dari elemen.

Kode berikut mendapat id = "intro" yang <p> nilai elemen:

contoh

<html>
<body>

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

</body>
</html>

Coba »

Dalam contoh di atas, getElementById adalah sebuah metode, sementara childNodes dan nodeValue adalah properti.

Dalam tutorial ini, kita akan menggunakan properti innerHTML. Namun, metode pembelajaran di atas membantu untuk menavigasi struktur pohon DOM dan pemahaman.