JavaScript HTML DOM 导航

Dengan HTML DOM, anda dapat menggunakan hubungan node untuk navigasi pohon node.

Nod DOM

Berdasarkan piawaian W3C HTML DOM, semua hal di dalam dokumen HTML adalah node:

  • Semua dokumen adalah node dokumen
  • Setiap elemen HTML adalah node elemen
  • Teks di dalam elemen HTML adalah node teks
  • Setiap properti HTML adalah node properti
  • Semua komen adalah node komen
Tunggak DOM HTML

Dengan HTML DOM, semua node dalam pohon node boleh diakses melalui JavaScript.

Boleh membuat node baru, serta mengubah dan menghapus semua node.

Hubungan node

Node dalam pohon node mempunyai hubungan tingkat yang pasti.

  • Terminologi (bapa, anak dan keluarga, parent, child serta sibling) digunakan untuk mendeskripsikan hubungan ini.
  • Di dalam pohon node, node puncak disebut root (node root adalah node dasar)
  • Setiap node mempunyai node bapa, kecuali root (node root tiada node bapa)
  • Node boleh mempunyai jumlah anak yang pasti
  • Keluarga (adik-beradik atau saudara) merujuk kepada node yang mempunyai bapa yang sama.
<html>
   <head>
       <title>Panduan DOM</title>
   </head>
  <body>
       <h1>Lesen DOM Pertama</h1>
       <p>Hello world!</p>
   </body>
</html>
Tunggak DOM HTML

Dari HTML di atas, anda dapat baca maklumat berikut:

  • <html> adalah node dasar
  • <html> tiada bapa
  • <html> adalah bapa <head> dan <body>
  • <head> ialah anak pertama <html>
  • <body> adalah anak terakhir <html>

Sama seperti:

  • <head> mempunyai satu anak: <title>
  • <title> mempunyai satu anak (node teks): "DOM Tutorial"
  • <body> mempunyai dua anak: <h1> dan <p>
  • <h1> mempunyai satu anak: "DOM pertama pelajaran"
  • <p> mempunyai satu anak: "Hello world!"
  • <h1> dan <p> adalah saudara

Navigasi antara node

Dengan JavaScript, anda dapat menggunakan properti node berikut untuk navigasi antara node:

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

Anak node dan nilai node

Salah umum dalam penggunaan DOM adalah percaya bahwa node element mengandungi teks.

Contoh:

<title id="demo">DOM Tutorial</title>

（dalam contoh di atas）node element <title> Tidak termasukteks.

Ia mengandungi teks yang bernilai "DOM Tutorial"Node teks.

Nilai text node dapat melalui node innerHTML Melalui properti

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

Mengakses properti innerHTML setara dengan mengakses pertama anak nodenya nodeValue:

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

Juga boleh demikian mengakses pertama anak nodenya:

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

Berikut tiga contoh untuk mengambil <h1> Tekst elemen dan salin ke <p> Elemen dalam:

Contoh 1

<html>
<body>
<h1 id="id01">Saya Laman Pertama</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Cuba Sendiri

Contoh 2

<html>
<body>
<h1 id="id01">Saya Laman Pertama</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Cuba Sendiri

Contoh 3

<html>
<body>
<h1 id="id01">Saya Laman Pertama</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Cuba Sendiri

InnerHTML

在本教程中，我们使用 innerHTML 取回 HTML 元素的内容。

不过，学习以上其他的方法有助于理解 DOM 的树结构和导航。

DOM 根节点

有两个特殊属性允许访问完整文档：

  • document.body - 文档的 body
  • document.documentElement - 完整文档

实例

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.body</b> 属性。</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Cuba Sendiri

实例

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.documentElement</b> 属性。</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Cuba Sendiri

nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 等同于标签名
  • 属性节点的 nodeName 是属性名称
  • 文本节点的 nodeName 总是 #text
  • 文档节点的 nodeName 总是 #document

实例

<h1 id="id01">我的第一张网页</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeName;
</script>

Cuba Sendiri

注释：nodeName 总是包含 HTML 元素的大写标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined
  • 文本节点的 nodeValue 是文本文本
  • 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

实例

<h1 id="id01">我的第一张网页</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Cuba Sendiri

Properti nodeType yang paling penting adalah:

Nod Jenis Contoh
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (diabaikan)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- Ini adalah komen -->
DOCUMENT_NODE 9 Dokumen HTML sendiri (<html> ibu)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Type 2 telah diabaikan dalam HTML DOM. XML DOM belum diabaikan.