Lecture ini adalah pintu masuk ke DOM (Document Object Model). Sebelumnya kita banyak belajar JavaScript sebagai bahasa pemrograman: variable, data type, if, loop, array, function, dan sebagainya. Sekarang kita mulai memakai kemampuan tersebut untuk berinteraksi dengan HTML di halaman web.

Kalau sebelumnya kita belajar:

let age = 20;

if (age >= 18) {
    console.log("Adult");
}

sekarang kita akan mulai belajar bagaimana JavaScript bisa melakukan hal seperti:

• mengambil <h1>
• mengubah tulisan <h1>
• mengubah warna/tampilan elemen
• mengambil nilai dari <input>
• menambahkan elemen baru
• menghapus elemen
• merespons klik tombol
• merespons keyboard
• dan lain-lain

Semua ini berkaitan erat dengan DOM.

1. Apa itu DOM?

DOM adalah singkatan dari:

Document Object Model

Mari kita pecah satu per satu.

Document

Document berarti dokumen HTML yang sedang dibuka oleh browser.

Misalnya kita punya:

<!DOCTYPE html>
<html>
<head>
    <title>JS Tutorial</title>
</head>

<body>
    <div class="main">
        <h1>Hello World</h1>
        <p>
            Welcome to
            <a href="https://example.com">YouTube</a>
        </p>
    </div>

    <button>Click Me</button>
</body>
</html>

HTML tersebut adalah document.

Object

Browser kemudian merepresentasikan bagian-bagian HTML tersebut sebagai object yang bisa kita akses menggunakan JavaScript.

Misalnya:

<h1>Hello World</h1>

akan direpresentasikan di DOM sebagai sebuah object yang mewakili elemen <h1>.

Kemudian JavaScript bisa berinteraksi dengan object tersebut.

Misalnya nanti:

document.querySelector("h1");

bisa digunakan untuk mengambil object <h1> tersebut.

Model

Model berarti representasi atau gambaran terstruktur dari sesuatu.

Jadi secara sederhana:

DOM adalah representasi terstruktur dari dokumen HTML dalam bentuk object yang dapat diprogram menggunakan JavaScript.

2. Analogi paling mudah: HTML vs DOM

Bayangkan kamu punya denah rumah.

HTML adalah denah yang kamu tulis:

Rumah
├── Kamar
├── Dapur
└── Ruang Tamu

Ketika browser membaca HTML tersebut, browser membuat representasi struktur rumah yang bisa dimanipulasi oleh program.

Itulah DOM.

HTML Source
     ↓
 Browser membaca HTML
     ↓
 Browser membuat DOM
     ↓
 JavaScript bisa mengakses DOM
     ↓
 JavaScript mengubah halaman

Jadi:

HTML adalah source/markup-nya, sedangkan DOM adalah representasi object yang dibuat browser dari dokumen tersebut.

3. Contoh sederhana

Misalnya HTML kita:

<h1>Hello World</h1>

Browser akan membuat object yang secara konseptual mewakili:

h1 object
│
└── text content: "Hello World"

Kemudian JavaScript bisa mengaksesnya.

Misalnya nanti kita bisa melakukan:

document.querySelector("h1").textContent = "Hello JavaScript";

Maka halaman berubah dari:

Hello World

menjadi:

Hello JavaScript

Tanpa kita harus mengubah file HTML secara manual.

Inilah salah satu fungsi utama DOM.

4. DOM berbentuk tree / pohon

Salah satu konsep paling penting dari lecture ini adalah:

DOM memiliki struktur seperti pohon (tree structure).

Kenapa disebut tree?

Karena ada hubungan:

• parent
• child
• sibling
• leaf

Misalnya HTML:

<html>
    <head>
        <title>JS Tutorial</title>
    </head>

    <body>
        <div class="main">
            <h1>Hello World</h1>

            <p>
                Welcome to
                <a href="https://example.com">YouTube</a>
            </p>
        </div>

        <button>Click Me</button>
    </body>
</html>

Secara sederhana DOM-nya dapat kita gambarkan:

html
├── head
│   └── title
│       └── "JS Tutorial"
│
└── body
    ├── div
    │   ├── h1
    │   │   └── "Hello World"
    │   │
    │   └── p
    │       ├── "Welcome to"
    │       └── a
    │           ├── "YouTube"
    │           └── href
    │
    └── button
        └── "Click Me"

Inilah yang dimaksud DOM tree.

5. Apa itu Parent dan Child?

Lihat bagian ini:

html
└── body
    └── div
        └── h1

Di sini:

html
 ↓
body

html adalah parent dari body.

Kemudian:

body
 ↓
div

body adalah parent dari div.

Kemudian:

div
 ↓
h1

div adalah parent dari h1.

Sedangkan kebalikannya:

h1

adalah child dari div.

Jadi:

Parent = elemen yang membungkus/memiliki elemen lain.

Child = elemen yang berada di dalam parent.

6. Contoh parent-child

HTML:

<div>
    <h1>Hello</h1>
    <p>Welcome</p>
</div>

Strukturnya:

div
├── h1
└── p

Berarti:

• div = parent
• h1 = child
• p = child

h1 dan p juga disebut siblings karena mereka memiliki parent yang sama.

      div
     /   \
   h1     p
    ↑     ↑
   sibling

Konsep ini nanti sangat berguna ketika kita belajar DOM traversal.

7. Root Node

Di DOM HTML, node paling atas adalah:

<html>

Karena berada di paling atas tree, html disebut:

Root node

Gambaran sederhananya:

             html
            /    \
         head    body

html berada di puncak.

8. Leaf Node

Kemudian ada istilah:

Leaf node

Leaf berarti daun.

Bayangkan pohon:

       tree
      /    \
   branch  branch
            \
            leaf

Leaf adalah bagian yang sudah tidak punya child lagi.

Dalam DOM, text content dan beberapa node lain dapat menjadi leaf node.

Misalnya:

<title>JS Tutorial</title>

secara sederhana:

title
  └── "JS Tutorial"

"JS Tutorial" adalah text node.

9. DOM tidak hanya menyimpan HTML element

Ini bagian yang cukup penting.

DOM bukan hanya:

<div>
<p>
<h1>
<button>

Browser juga membuat node untuk hal-hal lain dalam document, termasuk text dan comment.

Misalnya:

<!-- Ini komentar -->

<h1>Hello World</h1>

Comment tersebut juga direpresentasikan sebagai node dalam DOM.

Text:

<h1>Hello World</h1>

juga direpresentasikan sebagai text node.

Jadi secara sederhana:

DOM
├── Element nodes
├── Text nodes
├── Comment nodes
└── jenis node lainnya

10. Attribute juga penting

Misalnya:

<a href="https://example.com">
    YouTube
</a>

Ada:

a
├── text: "YouTube"
└── href: "https://example.com"

href adalah attribute dari <a>.

Attribute memberikan informasi tambahan kepada HTML element.

Contoh lainnya:

<div class="container">

memiliki:

class = "container"

Dan:

<img src="photo.jpg" alt="Profile">

memiliki:

src = "photo.jpg"
alt = "Profile"

11. HTML → DOM

Sekarang mari kita lihat proses besarnya.

Kita memiliki HTML:

<html>
    <head>
        <title>JS Tutorial</title>
    </head>

    <body>
        <h1>Hello World</h1>
        <button>Click</button>
    </body>
</html>

Ketika browser membacanya:

HTML
 ↓
Browser parsing
 ↓
DOM dibuat

DOM secara sederhana:

html
├── head
│   └── title
│       └── "JS Tutorial"
│
└── body
    ├── h1
    │   └── "Hello World"
    │
    └── button
        └── "Click"

Setelah DOM tersedia, JavaScript dapat bekerja dengannya.

12. Lalu di mana DOM berada?

Ini bagian yang sangat penting karena berhubungan dengan materi sebelumnya tentang global object.

Kita sudah belajar:

Ketika JavaScript dijalankan di browser, global object-nya adalah window.

Jadi secara sederhana:

window

adalah global object browser.

Di dalam window terdapat:

window
├── alert
├── prompt
├── setTimeout
├── ...
└── document

Nah:

document adalah object yang merepresentasikan halaman web/document tersebut.

Jadi hubungan sederhananya:

window
   │
   └── document
          │
          ├── html
          │    ├── head
          │    └── body
          │
          └── ...

13. window vs document

Ini sangat penting untuk dibedakan.

window

Mewakili lingkungan/browser window secara keseluruhan.

Contoh:

window.alert("Hello");

atau:

window.setTimeout(...);

document

Mewakili dokumen/halaman HTML yang sedang dimuat.

Contoh:

document

Kemudian:

document.body

berarti kita mengakses <body>.

Dan:

document.head

berarti mengakses <head>.

14. Analogi window dan document

Bayangkan browser seperti sebuah rumah.

WINDOW
└── DOCUMENT
    ├── HEAD
    │   └── TITLE
    │
    └── BODY
        ├── DIV
        ├── H1
        ├── P
        └── BUTTON

window = keseluruhan lingkungan browser.

document = isi halaman web.

Jadi:

window.document

mengakses document melalui window.

Karena window adalah global object, biasanya kita cukup menulis:

document

daripada:

window.document

Keduanya mengacu pada document yang sama di browser.

15. Coba di Console

Kalau kamu membuka Developer Tools → Console, coba:

window

Browser akan menampilkan object window.

Kemudian:

window.document

atau cukup:

document

Kamu akan mendapatkan document halaman tersebut.

Kemudian:

document.body

akan mengakses <body>.

Dan:

document.head

akan mengakses <head>.

Ini adalah awal dari perjalanan kita menggunakan DOM.

16. Kenapa document sangat penting?

Karena document menyediakan berbagai property dan method untuk bekerja dengan halaman.

Misalnya nanti kita akan belajar:

document.getElementById(...)

untuk mengambil element berdasarkan ID.

Atau:

document.querySelector(...)

untuk mengambil element menggunakan CSS selector.

Kemudian kita bisa mengubahnya.

Misalnya:

document.querySelector("h1").textContent = "Hello JavaScript";

Jadi alurnya:

document
   ↓
cari element
   ↓
dapatkan object element
   ↓
ubah property
   ↓
halaman berubah

17. DOM memungkinkan halaman menjadi dinamis

Tanpa JavaScript/DOM, HTML pada dasarnya memberikan struktur awal halaman.

Misalnya:

<h1>Hello</h1>

Tetapi dengan JavaScript + DOM, kita bisa melakukan:

document.querySelector("h1").textContent = "Welcome!";

Hasil di browser berubah menjadi:

Welcome!

Kita juga bisa:

HTML element
      ↓
ambil
      ↓
ubah
      ↓
tambahkan
      ↓
hapus
      ↓
respond terhadap event

Itulah kenapa DOM sangat penting dalam web development.

18. DOM vs HTML Source — apakah sama?

Ini salah satu bagian terpenting dari lecture.

Banyak pemula berpikir:

“DOM itu sama persis dengan HTML yang saya tulis.”

Tidak selalu.

DOM dibuat oleh browser berdasarkan HTML yang diproses.

Ada situasi di mana DOM bisa berbeda dari source HTML.

Lecture menjelaskan dua kasus utama.

19. Kasus pertama: HTML tidak valid

Misalnya kamu menulis HTML yang kurang lengkap:

<html>

    <p>Hello</p>

    <button>Click</button>

</html>

Tidak ada:

<head>

dan:

<body>

Browser memiliki aturan bagaimana HTML harus diproses.

Browser dapat memperbaiki struktur HTML tersebut saat membuat DOM.

Secara konseptual, DOM yang dibentuk bisa menjadi:

html
├── head
│
└── body
    ├── p
    └── button

Padahal source HTML kita tidak secara eksplisit menuliskan:

<head>

dan:

<body>

20. Browser melakukan HTML parsing

Ini perlu dipahami:

Browser tidak hanya membaca HTML seperti membaca file teks biasa.

Browser mem-parsing HTML dan membentuk struktur DOM berdasarkan aturan HTML.

Kalau markup tidak ideal, browser dapat melakukan error recovery.

Jadi:

HTML source
     ↓
HTML parser browser
     ↓
valid/normalized structure
     ↓
DOM

Akibatnya:

HTML source ≠ selalu 100% sama dengan DOM

21. Kasus kedua: JavaScript menambahkan element

Ini bahkan lebih penting untuk DOM manipulation.

Misalnya HTML awal:

<body>
    <h1>Hello</h1>
</body>

Kemudian JavaScript membuat element baru.

Misalnya secara konseptual:

let p = document.createElement("p");
p.textContent = "Hello JavaScript";

document.body.append(p);

Sekarang browser menampilkan:

Hello

Hello JavaScript

Tetapi HTML source awal kita masih:

<body>
    <h1>Hello</h1>
</body>

Kita tidak mengubah file .html secara langsung.

Kita mengubah DOM yang sedang hidup di browser.

22. Ini konsep yang sangat penting

Bedakan:

HTML source

File HTML yang kita tulis:

<h1>Hello</h1>

DOM

Representasi yang dibuat browser dan bisa berubah ketika JavaScript berjalan.

Misalnya awal:

DOM
└── h1
    └── "Hello"

Setelah JavaScript:

DOM
├── h1
│   └── "Hello"
│
└── p
    └── "Hello JavaScript"

DOM sudah berubah.

Tetapi file HTML source awal belum tentu ikut berubah.

23. Analogi HTML source vs DOM

Bayangkan kamu punya cetak biru rumah.

HTML:

Blueprint

Kemudian kamu membangun rumah dari blueprint tersebut.

DOM:

Rumah yang sedang berdiri

Kamu kemudian menambahkan meja ke rumah.

Rumah berubah:

Rumah
├── kamar
├── dapur
└── meja baru

Tetapi blueprint awal tidak otomatis berubah.

Kurang lebih seperti itu:

HTML source = blueprint awal
DOM         = struktur halaman yang sedang dijalankan

JavaScript bekerja terutama terhadap DOM.

24. Inilah yang disebut DOM Manipulation

Sekarang istilah lecture di awal akan lebih mudah dipahami.

DOM manipulation = menggunakan JavaScript untuk mengakses dan mengubah DOM.

Misalnya:

Mengubah text

element.textContent = "Hello";

Mengubah attribute

element.setAttribute("class", "active");

Menambahkan element

document.body.append(element);

Menghapus element

element.remove();

Mengubah style

element.style.color = "red";

Menangani click

button.addEventListener("click", function () {
    console.log("Button clicked");
});

Kita akan mempelajari teknik-teknik ini di lecture berikutnya.

25. DOM juga berkaitan dengan event

Lecture menyebut:

• click
• key press
• dan event lainnya.

Misalnya:

<button>Click Me</button>

Kita bisa memberi tahu JavaScript:

“Kalau tombol ini diklik, lakukan sesuatu.”

Konsepnya:

User
 ↓
click button
 ↓
Browser mendeteksi event
 ↓
JavaScript menjalankan function
 ↓
DOM bisa dimanipulasi
 ↓
halaman berubah

Contohnya nanti:

button.addEventListener("click", function () {
    document.querySelector("h1").textContent = "Button clicked!";
});

Ini adalah salah satu pola paling dasar dalam web interaktif.

26. Kenapa disebut “Object Model”?

Karena HTML element direpresentasikan sebagai object.

Misalnya kita punya:

<button>Click Me</button>

Browser menyediakan object yang merepresentasikan button tersebut.

Object tersebut memiliki berbagai property dan method.

Secara konsep:

button object
├── textContent
├── id
├── className
├── disabled
├── style
├── ...
├── click()
├── remove()
└── ...

Jadi JavaScript bisa melakukan sesuatu seperti:

button.textContent = "Submit";

atau:

button.disabled = true;

atau:

button.remove();

27. HTML attribute vs DOM property

Lecture menyebut attribute sebagai property dalam representasi DOM. Untuk tahap awal, ikuti konsep tersebut, tetapi ada sedikit nuansa teknis yang perlu kamu tahu.

HTML:

<input id="username" value="John">

id dan value adalah HTML attributes pada source markup.

Ketika browser membuat DOM, element tersebut menjadi object dengan berbagai properties.

Misalnya:

input.id
input.value

Jadi secara sederhana:

HTML attribute
      ↓
diproses browser
      ↓
DOM element object
      ↓
properties/methods

Nanti kita akan belajar bahwa attribute dan property tidak selalu identik, terutama untuk beberapa element seperti <input>.

Untuk sekarang, cukup pahami konsep besarnya.

28. Struktur DOM yang perlu kamu ingat

Untuk HTML sederhana:

<html>
    <head>
        <title>My Page</title>
    </head>

    <body>
        <div>
            <h1>Hello</h1>
            <p>Welcome</p>
        </div>
    </body>
</html>

Bayangkan:

                 document
                    │
                   html
                 /      \
              head      body
               │         │
             title      div
               │       /   \
        "My Page"     h1    p
                       │    │
                    "Hello" "Welcome"

Ini adalah mental model yang sangat bagus untuk DOM.

29. document bukan html

Ini juga sering membingungkan pemula.

Ada:

document

dan ada:

<html>

Keduanya bukan hal yang sama.

Secara konseptual:

window
  │
  └── document
        │
        └── html
             ├── head
             └── body

Jadi:

• window → lingkungan browser
• document → dokumen halaman
• html → root element dari dokumen HTML

30. Hubungan dengan materi sebelumnya

Ini sebenarnya lanjutan langsung dari materi yang sudah kamu pelajari.

Sebelumnya:

Variable

let name = "John";

Sekarang:

let title = document.querySelector("h1");

title sekarang menyimpan object DOM.

Function

Sebelumnya:

function greetings() {
    console.log("Hello");
}

Nanti:

function changeTitle() {
    document.querySelector("h1").textContent = "Hello";
}

Function digunakan untuk memanipulasi DOM.

if

Sebelumnya:

if (age >= 18) {
    console.log("Adult");
}

Nanti:

if (isLoggedIn) {
    document.querySelector(".login").textContent = "Logout";
}

Loop

Sebelumnya:

for (let i = 0; i < 10; i++) {
    console.log(i);
}

Nanti loop dapat digunakan untuk memproses banyak element.

Array

Sebelumnya:

let users = ["John", "Mark", "Mary"];

Nanti:

let users = document.querySelectorAll(".user");

dan kita bisa melakukan sesuatu terhadap setiap element.

Jadi semua fundamental JavaScript yang sudah dipelajari akan mulai digunakan untuk memanipulasi halaman web.

31. Gambaran besar DOM

Coba hafalkan diagram ini:

                 BROWSER
                    │
                    ▼
              HTML DOCUMENT
                    │
                    ▼
              HTML PARSER
                    │
                    ▼
                   DOM
                    │
             ┌──────┴──────┐
             │             │
           Object        Object
             │             │
          <body>        <head>
             │             │
       ┌─────┼─────┐     <title>
       │     │     │
      <div> <p> <button>
       │
      ┌┴┐
     <h1> <p>

Kemudian:

             JavaScript
                  │
                  ▼
              document
                  │
                  ▼
          cari/access element
                  │
                  ▼
          ubah DOM element
                  │
                  ▼
           halaman berubah

32. Tiga hal yang jangan sampai tertukar

① HTML

Kode yang kita tulis:

<h1>Hello</h1>

② DOM

Representasi object yang dibuat browser:

document
   ↓
html
   ↓
body
   ↓
h1
   ↓
"Hello"

③ JavaScript

Program yang dapat berinteraksi dengan DOM:

document.querySelector("h1").textContent = "Hi";

Hubungannya:

HTML
  ↓
Browser
  ↓
DOM
  ↑
  │
JavaScript

33. Dua alasan DOM bisa berbeda dari HTML source

Ini wajib kamu ingat dari lecture:

1. Browser memperbaiki HTML yang invalid

HTML tidak valid
      ↓
Browser melakukan parsing/error recovery
      ↓
DOM bisa berbeda dari source

2. JavaScript memodifikasi DOM

HTML awal
    ↓
DOM dibuat
    ↓
JavaScript berjalan
    ↓
DOM berubah

Tetapi perubahan DOM tersebut tidak otomatis berarti file HTML source asli ikut berubah.

34. Cheat sheet DOM untuk pemula

🎯 Inti lecture ini

Kalau harus diringkas menjadi beberapa kalimat:

DOM (Document Object Model) adalah representasi terstruktur dari dokumen HTML yang dibuat browser dalam bentuk object.

Browser membaca:

<h1>Hello World</h1>

lalu membuat representasi DOM yang dapat diakses JavaScript.

HTML
 ↓
Browser
 ↓
DOM
 ↓
JavaScript
 ↓
Manipulasi DOM
 ↓
Halaman berubah

Dan struktur DOM berbentuk tree:

html
├── head
│   └── title
│
└── body
    ├── div
    │   ├── h1
    │   └── p
    │
    └── button

Kemudian ada hubungan:

html      → root
body      → parent
div       → parent + child
h1        → child
p         → child

Yang paling penting untuk mulai lecture berikutnya:

window
  │
  └── document
        │
        └── DOM
             │
             ├── HTML elements
             ├── text
             ├── attributes
             └── comments

Dan document inilah pintu utama kita untuk mulai mengakses dan memanipulasi halaman menggunakan JavaScript.

Jadi kalau nanti kamu melihat kode seperti:

document.getElementById(...)

atau:

document.querySelector(...)

jangan merasa itu konsep yang benar-benar baru. Itu hanyalah langkah berikutnya dari konsep yang baru saja dipelajari:

document → cari object DOM → ubah object tersebut → tampilan halaman ikut berubah.