Navigasi HTML DOM JavaScript

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

Node DOM

Menurut standar W3C HTML DOM, semua hal di dalam dokumen HTML adalah node:

  • Seluruh dokumen adalah node dokumen
  • Setiap elemen HTML adalah node elemen
  • Teks dalam elemen HTML adalah node teks
  • Setiap atribut HTML adalah node atribut
  • Semua komentar adalah node komentar
Pohon DOM HTML

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

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

Hubungan Node

Node dalam pohon node memiliki hubungan hierarki tertentu.

  • Terminologi (induk, anak, dan saudara, parent, child serta sibling) digunakan untuk mendeskripsikan hubungan ini.
  • Pada pohon node, node puncak disebut akar (node akar)
  • Setiap node memiliki node induk, kecuali akar (node akar tidak memiliki node induk)
  • Node dapat memiliki jumlah anak tertentu
  • Keluarga (saudara atau saudari) adalah node yang memiliki induk yang sama.
<html>
   <head>
       <title>Panduan DOM</title>
   </head>
  <body>
       <h1>Les DOM Pertama</h1>
       <p>Hello world!</p>
   </body>
</html>
Pohon DOM HTML

Dari HTML di atas, Anda dapat membaca informasi berikut:

  • <html> adalah node akar
  • <html> tidak memiliki induk
  • <html> adalah induk <head> dan <body>
  • <head> adalah anak pertama <html>
  • <body> adalah anak terakhir <html>

Pada saat yang sama:

  • <head> memiliki satu anak: <title>
  • <title> memiliki satu anak (node teks): "Panduan DOM"
  • <body> memiliki dua anak: <h1> dan <p>
  • <h1> memiliki satu anak: "Kelas Pertama DOM"
  • <p> memiliki satu anak: "Hello world!"
  • <h1> dan <p> adalah saudara

Bergerak antara node

Dengan JavaScript, Anda dapat menggunakan properti node berikut untuk bergerak antara node:

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

Node anak dan nilai node

Salah biasa yang sering terjadi dalam pengelolaan DOM adalah menganggap bahwa node elemen mengandung teks.

Contoh:

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

(element di contoh di atas) node elemen <title> Tidak termasukteks.

yang mengandung teks "Panduan DOM"Node teks.

Nilai node teks dapat diambil melalui properti innerHTML Properti untuk diakses:

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

Mengakses properti innerHTML setara dengan mengakses pertama node anak: nodeValue:

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

Juga dapat diakses seperti ini untuk pertama-tama node:

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

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

Contoh 1

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

Coba Sendiri

Contoh 2

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

Coba Sendiri

Contoh 3

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

Coba Sendiri

InnerHTML

Dalam tutorial ini, kami menggunakan innerHTML Mengambil konten elemen HTML.

Namun, menguasai metode lain di atas membantu memahami struktur pohon dan navigasi DOM.

Node akar DOM

Ada dua properti khusus yang memungkinkan akses dokumen penuh:

  • document.body - Body dokumen
  • document.documentElement - Dokumen penuh

Contoh

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM sangat berguna!</p>
<p>Menggambarkan <b>document.body</b> properti ini.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Coba Sendiri

Contoh

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM sangat berguna!</p>
<p>Menggambarkan <b>document.documentElement</b> properti ini.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Coba Sendiri

Properti nodeName

nodeName Properti aturan nama node.

  • nodeName adalah hanya baca
  • nodeName node elemen sama dengan nama tag
  • nodeName properti node adalah nama properti
  • nodeName node teks selalu #text
  • nodeName node dokumen selalu #document

Contoh

<h1 id="id01">Halaman Web Pertama Saya</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Coba Sendiri

Keterangan:nodeName selalu mengandung nama tag besar HTML elemen.

Properti nodeValue

nodeValue Properti aturan nilai node.

  • nodeValue properti node elemen adalah undefined
  • nodeValue properti node teks adalah teks teks
  • nodeValue properti node adalah nilai properti

Properti nodeType

nodeType properti kembalikan tipe node.nodeType adalah hanya baca.

Contoh

<h1 id="id01">Halaman Web Pertama Saya</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Coba Sendiri

Atribut nodeType paling penting adalah:

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

Type 2 telah diabaikan di HTML DOM. Belum diabaikan di XML DOM.