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
Hal ini dapat diakses oleh label berikutnya. Untuk mengakses kedua <p>, Anda dapat menulis:
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
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:
<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
<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
<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
<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.