Navigasi DOM HTML


DOM HTML membolehkan anda menavigasi dalam pepohon nod menggunakan perhubungan nod.

Senarai nod HTML DOM

kaedah getElementsByTagName() mengembalikan senarai nod. Senarai nod ialah tatasusunan nod.

Kod berikut memilih semua <p> nod dalam dokumen:

Instance

<html><!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>The DOM is very useful!</p>

<script>
x=document.getElementsByTagName("p");
document.write("The innerHTML of the second paragraph is: " + x[1].innerHTML);
</script>

</body>
</html>

Jalankan Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Nota:

Subskrip bermula dari 0.

Panjang senarai nod HTML DOM

Atribut panjang mentakrifkan bilangan nod dalam senarai nod.

Anda boleh menggunakan atribut length untuk menggelungkan senarai nod:

Instance

<html><!DOCTYPE html>
<html>
<body>

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

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

Instance yang sedang berjalan»

Klik butang "Jalankan Contoh" untuk melihat tika dalam talian

Analisis tika:

  • Dapatkan semua<p> >

  • Keluarkan nilai nod teks setiap <p> elemen

Perhubungan nod navigasi

Anda boleh gunakan tiga atribut nod: parentNode , firstChild dan lastChild untuk menavigasi dalam struktur dokumen.

Sila lihat coretan HTML berikut:

<html>
<body>

<p>Hello World!</p> ;
<div>
<p>DOM sangat berguna!</p>
<p>Contoh ini menunjukkan perhubungan nod.</p>
</div>

</body>
</html>
  • Elemen <p> pertama ialah elemen anak pertama (anak pertama) bagi elemen <badan> elemen body> Elemen anak terakhir (lastChild)

  • <body> elemen ialah nod induk (parentNode)

    <🎜 elemen <p> ;div> elemen >

    • atribut firstChild boleh digunakan untuk mengakses teks elemen:

  • Instance
<html><!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Jalankan instance »

Klik butang "Run Instance" untuk melihat contoh dalam talian

DOM root nod

Terdapat dua atribut khas di sini yang boleh akses semua dokumen:

document.documentElement - semua dokumen

    document.body - badan dokumen

  • instance

    <html><!DOCTYPE html>
<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>
Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

childNodes dan nodeValue

Selain sifat innerHTML, anda juga boleh menggunakan sifat childNodes dan nodeValue untuk mendapatkan kandungan elemen.

Kod berikut mendapat nilai elemen <p> dengan id="intro":

Instance

<html><!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Dalam contoh di atas, getElementById ialah kaedah, manakala childNodes dan nodeValue ialah sifat.

Dalam tutorial ini, kami akan menggunakan sifat innerHTML. Walau bagaimanapun, mempelajari kaedah di atas akan membantu anda memahami struktur dan navigasi pepohon DOM.

←
→