Pahami tipe simpul dom di JavaScript (dengan contoh!) – Beragampengetahuan

Dalam JavaScript Model Objek Dokumen (DOM) Mewakili dokumen HTML dan XML sebagai pohon simpul terstruktur. Setiap node memiliki satu nodeType Mendefinisikan atribut jenisnya.

Berikut adalah tipe simpul Dom yang paling umum, deskripsi dan contoh aktualnya.

• nodeType: 1

• menggambarkan: Mewakili elemen HTML atau XML (misalnya, <div>,,,,, <p>,,,,, <a>).

• contoh:

  <div id="example">Hello, World!</div>
  <script>
    const element = document.getElementById("example");
    console.log(element.nodeType); // Output: 1
  </script>

  

• Lebih banyak contoh:

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <script>
    const listItem = document.querySelector("li");
    console.log(listItem.nodeType); // Output: 1
  </script>

• nodeType: 2

• menggambarkan: Atribut yang mewakili elemen (misalnya, id,,,,, class,,,,, href).

• contoh:

  <a href=" Example</a>
  <script>
    const link = document.querySelector("a");
    const attr = link.getAttributeNode("href");
    console.log(attr.nodeType); // Output: 2
  </script>

  

• nodeType: 3

• menggambarkan: Mewakili konten teks dalam elemen.

• contoh:

  <p>Hello, World!</p>
  <script>
    const paragraph = document.querySelector("p");
    const textNode = paragraph.childNodes[0];
    console.log(textNode.nodeType); // Output: 3
  </script>

  

• Lebih banyak contoh:

  <h1>JavaScript Nodes</h1>
  <script>
    const heading = document.querySelector("h1");
    console.log(heading.firstChild.nodeType); // Output: 3
  </script>

• nodeType: 8

• menggambarkan: Mewakili komentar HTML atau XML.

• contoh:

  <!-- This is a comment -->
  <script>
    const comment = document.body.childNodes[0]; // Assuming the comment is the first node
    console.log(comment.nodeType); // Output: 8
  </script>

• nodeType: 11

• menggambarkan: Mewakili cuplikan dokumen ringan untuk memanipulasi beberapa node secara efisien.

• contoh:

  const fragment = document.createDocumentFragment();
  const newElement = document.createElement("p");
  newElement.textContent = "This is inside a fragment!";
  fragment.appendChild(newElement);
  console.log(fragment.nodeType); // Output: 11

meskipun Element,,,,, TextDan Comment Node banyak digunakan, dan beberapa tipe simpul lebih jarang, terutama dalam alur kerja terkait XML. Berikut ini adalah rincian tipe simpul yang tidak umum ini:

mewakili Bagian CDATA Dalam XML, teks diizinkan untuk berisi karakter yang biasanya ditafsirkan sebagai markup.

contoh:

<![CDATA[<message>Hello, World!</message>]]>

(Catatan: CData spesifik XML dan tidak digunakan dalam HTML.)

Mewakili a Referensi entitas Di XML, mis. & atau <. Namun, browser modern biasanya secara otomatis menyelesaikan referensi entitas, membuat tipe simpul ini langka dalam praktiknya.

Tentukan a kesatuan Di xml. Ini terutama Struktur dokumen XML lama Dan biasanya tidak terlihat dalam pengembangan web.

mewakili Instruksi pemrosesan Di XML, berikan informasi tambahan ke prosesor XML.

contoh:

<?xml-stylesheet type="text/css" href="style.css"?>

Arahan pemrosesan digunakan dalam XML, tetapi tidak dalam dokumen HTML standar.

Jenis simpul ini Tidak sering digunakan dalam pengembangan jaringan moderntapi itu bisa berguna saat Anda memahaminya Sistem berbasis XML, SVG atau format lama.

Jenis simpul yang paling umum digunakan dalam pengembangan web adalah:
✅ Node elemen (1) – mewakili elemen HTML.
✅ Node teks (3) – Menunjukkan konten teks.
✅ Komentar Node (8) – Komentar ekspres.

Dengan menggunakan nodeTypeAnda dapat dengan mudah menentukan jenis node dan menerapkan logika yang sesuai dalam kode JavaScript.