Pengenalan JavaScript DOM

DOM (Document Object Model) adalah representasi struktural dari dokumen HTML yang memungkinkan skrip JavaScript berinteraksi dengan konten HTML dan mengubahnya secara dinamis. DOM mengorganisir konten HTML menjadi sebuah pohon struktur data yang dapat diakses dan dimanipulasi oleh JavaScript.

DOM Tree (Pohon DOM) adalah struktur hierarkis yang merepresentasikan elemen-elemen HTML dalam sebuah dokumen. Setiap elemen HTML, atribut, dan teks dalam dokumen direpresentasikan sebagai objek dalam pohon DOM.

Contoh HTML sederhana seperti di bawah ini:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh DOM Tree</title>
</head>
<body>
    <div id="container">
        <h1>Judul</h1>
        <p>Ini adalah sebuah paragraf.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>
</html>

Pohon DOM untuk dokumen ini akan terlihat seperti ini:

- HTML (Document)
  |
  |-- HEAD
  |    |
  |    |-- TITLE: "Contoh DOM Tree"
  |
  |-- BODY
       |
       |-- DIV (id="container")
       |    |
       |    |-- H1: "Judul"
       |    |
       |    |-- P: "Ini adalah sebuah paragraf."
       |    |
       |    |-- UL
       |         |
       |         |-- LI: "Item 1"
       |         |
       |         |-- LI: "Item 2"
       |         |
       |         |-- LI: "Item 3"

Setiap elemen HTML dalam dokumen mewakili sebuah node dalam pohon DOM. Node-node ini dapat diakses dan dimanipulasi menggunakan JavaScript. Dengan DOM, Anda dapat menambahkan, menghapus, atau mengubah elemen-elemen HTML, atribut, dan konten teks secara dinamis berdasarkan interaksi pengguna atau kejadian tertentu.

PreviousJavaScript DOM (Document Object Model)NextMenarget Element HTML

Last updated 1 year ago

Pengenalan JavaScript DOM

Contoh HTML sederhana seperti di bawah ini:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh DOM Tree</title>
</head>
<body>
    <div id="container">
        <h1>Judul</h1>
        <p>Ini adalah sebuah paragraf.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>
</html>

Pohon DOM untuk dokumen ini akan terlihat seperti ini:

- HTML (Document)
  |
  |-- HEAD
  |    |
  |    |-- TITLE: "Contoh DOM Tree"
  |
  |-- BODY
       |
       |-- DIV (id="container")
       |    |
       |    |-- H1: "Judul"
       |    |
       |    |-- P: "Ini adalah sebuah paragraf."
       |    |
       |    |-- UL
       |         |
       |         |-- LI: "Item 1"
       |         |
       |         |-- LI: "Item 2"
       |         |
       |         |-- LI: "Item 3"

PreviousJavaScript DOM (Document Object Model)NextMenarget Element HTML

Last updated 1 year ago