Lecture ini adalah lanjutan langsung dari lecture sebelumnya tentang DOM. Kalau sebelumnya kita baru memahami apa itu DOM, sekarang kita mulai belajar:

1. bagaimana mencari element di dalam DOM,
2. bagaimana mendapatkan object dari element tersebut,
3. bagaimana membaca isi element,
4. bagaimana mengubah isi element secara dinamis.

Dua method utama yang dibahas:

document.getElementById()
document.querySelector()

Sedangkan querySelectorAll() akan dibahas di lecture berikutnya.

1. Gambaran besar lecture ini

Misalnya HTML kita punya:

<p id="intro">Hello World</p>

Browser membuat DOM:

document
   │
   └── p
       ├── id: "intro"
       └── text: "Hello World"

JavaScript kemudian bisa mencari <p> tersebut:

let p = document.getElementById("intro");

Sekarang:

p
↓
object yang merepresentasikan <p>

Kemudian kita bisa membaca:

p.textContent

atau mengubah:

p.textContent = "Hello JavaScript";

Jadi alur besarnya:

HTML
 ↓
DOM
 ↓
document
 ↓
cari element
 ↓
dapat object element
 ↓
baca / ubah property
 ↓
halaman berubah

Ini adalah inti dari DOM manipulation.

2. document adalah pintu masuk

Dari lecture sebelumnya kita sudah tahu:

document

adalah object yang merepresentasikan halaman HTML.

Karena itu berbagai method untuk mencari element tersedia melalui document.

Contohnya:

document.getElementById(...)

dan:

document.querySelector(...)

Jadi jangan bingung kenapa kita menulis:

document.getElementById()

bukan:

getElementById()

Karena method tersebut adalah method dari document.

Secara konsep:

document
├── getElementById()
├── querySelector()
├── querySelectorAll()
└── ...

3. Method pertama: getElementById()

getElementById() digunakan untuk mencari element berdasarkan ID.

Misalnya HTML:

<p id="intro">Hello World</p>

Kita bisa mengambilnya:

let p = document.getElementById("intro");

Perhatikan:

"intro"

adalah ID-nya.

Bukan:

"#intro"

Jadi:

document.getElementById("intro");

✅ benar.

Sedangkan:

document.getElementById("#intro");

❌ salah untuk method ini.

4. Kenapa tidak perlu #?

Karena getElementById() memang secara khusus meminta nama ID.

Kita sudah mengatakan kepada JavaScript:

“Saya sedang mencari berdasarkan ID.”

Jadi cukup:

"intro"

Berbeda dengan querySelector(), yang menggunakan CSS selector. Nanti kita lihat perbedaannya.

5. Apa yang dikembalikan getElementById()?

Misalnya:

<p id="intro">Hello World</p>

Kemudian:

let p = document.getElementById("intro");

Variable p tidak berisi string:

"Hello World"

Tetapi p berisi object DOM yang merepresentasikan <p>.

Secara sederhana:

p
↓
┌──────────────────────┐
│ <p> object           │
│                      │
│ id                   │
│ textContent          │
│ style                │
│ ...                  │
└──────────────────────┘

Jadi kita bisa mengakses property-nya.

6. Mengakses textContent

Misalnya:

<p id="intro">Hello World</p>

JavaScript:

let p = document.getElementById("intro");

console.log(p.textContent);

Output:

Hello World

Kenapa?

Karena:

p

adalah object <p>.

Dan object tersebut mempunyai property:

textContent

yang berisi teks di dalam element.

Jadi:

p
 ↓
textContent
 ↓
"Hello World"

7. textContent bisa dibaca dan diubah

Ini konsep yang sangat penting.

Kita bisa membaca:

console.log(p.textContent);

Tetapi kita juga bisa mengubah:

p.textContent = "Hello JavaScript";

Misalnya awalnya:

<p id="intro">Hello World</p>

Setelah JavaScript:

let p = document.getElementById("intro");

p.textContent = "Hello JavaScript";

Browser akan menampilkan:

Hello JavaScript

Jadi kita tidak perlu mengubah HTML source secara manual.

JavaScript mengubah DOM yang sedang berjalan.

8. Ini adalah DOM manipulation

Perhatikan:

p.textContent = "Hello JavaScript";

Kita melakukan:

cari element
    ↓
dapat object DOM
    ↓
ubah property
    ↓
DOM berubah
    ↓
tampilan halaman berubah

Itulah DOM manipulation.

9. Urutan kode sangat penting

Lecture juga menunjukkan sesuatu yang penting.

Misalnya:

let p = document.getElementById("intro");

console.log(p.textContent);

p.textContent = "New text";

Console akan mencetak:

Hello World

Kemudian halaman berubah menjadi:

New text

Kenapa berbeda?

Karena JavaScript dieksekusi dari atas ke bawah.

Urutannya:

1. Ambil <p>
        ↓
2. console.log(p.textContent)
        ↓
   "Hello World"
        ↓
3. p.textContent = "New text"
        ↓
4. DOM berubah

Jadi console.log() terjadi sebelum perubahan.

10. Kalau console.log() diletakkan setelah perubahan?

Misalnya:

let p = document.getElementById("intro");

p.textContent = "New text";

console.log(p.textContent);

Sekarang output:

New text

Karena kita sudah mengubah property-nya terlebih dahulu.

Ini sebenarnya mengingatkan kita pada materi sebelumnya tentang urutan eksekusi JavaScript.

11. Bagaimana kalau ID tidak ditemukan?

Ini sangat penting.

Misalnya HTML:

<p id="intro">Hello World</p>

Tetapi kita menulis:

let p = document.getElementById("intro1");

Padahal:

intro1

tidak ada.

Maka:

p

akan berisi:

null

Jadi:

console.log(p);

hasilnya:

null

12. Apa itu null di sini?

null berarti:

Tidak ada object yang ditemukan.

Jadi:

document.getElementById("intro1")

kurang lebih berarti:

“Browser, carikan element dengan ID intro1.”

Browser menjawab:

“Tidak ketemu.”

Maka:

null

13. Kenapa kemudian bisa muncul error?

Misalnya:

let p = document.getElementById("intro1");

console.log(p.textContent);

Karena p ternyata:

null

Kita sebenarnya sedang melakukan:

null.textContent

Ini tidak mungkin.

null bukan object element yang memiliki property textContent.

Akibatnya muncul error seperti:

TypeError: Cannot read properties of null

14. Ini error yang sangat umum saat belajar DOM

Nanti ketika kamu mulai menggunakan DOM, error seperti ini sangat sering muncul.

Kalau melihat:

Cannot read properties of null

jangan langsung panik.

Cek:

1. Apakah ID benar?

HTML:

<p id="intro">

JavaScript:

document.getElementById("intro");

Harus sama.

2. Apakah element tersebut memang ada?

Kalau HTML tidak memiliki:

id="intro"

maka hasilnya:

null

3. Apakah JavaScript dijalankan setelah element tersedia?

Ini juga penting dan akan sangat berkaitan dengan lecture awal tentang posisi <script>.

Misalnya HTML:

<head>
    <script src="script.js"></script>
</head>

<body>
    <p id="intro">Hello</p>
</body>

Jika JavaScript berjalan sebelum <p> diproses browser, pencarian element bisa gagal.

Karena itu sebelumnya kita belajar bahwa script sering diletakkan sebelum:

</body>

atau menggunakan mekanisme seperti defer.

15. Method kedua: querySelector()

Sekarang kita masuk ke method yang lebih fleksibel:

document.querySelector()

Perbedaan besarnya:

getElementById():

khusus mencari berdasarkan ID.

Sedangkan querySelector():

menggunakan CSS selector.

Ini membuat querySelector() bisa mencari berdasarkan:

• ID
• class
• tag
• dan selector CSS lainnya.

16. querySelector() dengan ID

Misalnya:

<p id="intro">Hello World</p>

Dengan getElementById():

let p = document.getElementById("intro");

Dengan querySelector():

let p = document.querySelector("#intro");

Perhatikan perbedaannya.

getElementById

document.getElementById("intro");

querySelector

document.querySelector("#intro");

Ada # pada querySelector().

Kenapa?

Karena querySelector() menggunakan CSS selector.

Dalam CSS:

#intro

berarti:

element yang memiliki ID intro.

17. Ingat aturan selector CSS

Ini wajib kamu hafalkan:

#id       → ID
.class    → class
tag       → tag

Contoh:

ID

HTML:

<p id="intro">Hello</p>

Selector:

document.querySelector("#intro");

Class

HTML:

<p class="about">Hello</p>

Selector:

document.querySelector(".about");

Tag

HTML:

<h2>Homepage</h2>

Selector:

document.querySelector("h2");

Tidak ada #.

Tidak ada ..

Cukup:

"h2"

18. Analogi querySelector()

Bayangkan kamu sedang mencari orang di gedung.

getElementById() seperti:

“Cari orang yang ID-nya persis intro.”

Sedangkan querySelector() seperti:

“Gunakan aturan pencarian CSS.”

Misalnya:

#intro

= cari berdasarkan ID.

.about

= cari berdasarkan class.

h2

= cari berdasarkan tag.

Bahkan nanti kamu bisa menggunakan selector yang lebih kompleks:

document.querySelector(".container h2");

atau:

document.querySelector("div p");

Ini salah satu alasan querySelector() sangat berguna.

19. querySelector() dengan class

Misalnya:

<p class="about">About Us</p>

Gunakan:

let p = document.querySelector(".about");

Perhatikan:

.about
   ↑
 titik = class

Bukan:

document.querySelector("about");

karena itu akan berarti mencari tag <about>.

20. Kalau ada banyak element dengan class yang sama?

Misalnya:

<p class="about">Paragraph 1</p>
<p class="about">Paragraph 2</p>
<p class="about">Paragraph 3</p>

Kemudian:

let p = document.querySelector(".about");

Yang didapat hanya:

<p class="about">Paragraph 1</p>

Yaitu element pertama yang cocok.

querySelector() hanya mengembalikan first matching element.

21. Ini sangat penting: querySelector() bukan untuk mengambil semuanya

Misalnya:

<p class="item">A</p>
<p class="item">B</p>
<p class="item">C</p>

Kalau:

let item = document.querySelector(".item");

hasilnya hanya:

A

B dan C tidak ikut dikembalikan.

Untuk mengambil semua matching element, nanti kita belajar:

document.querySelectorAll(".item");

Itulah kenapa lecture ini belum membahas querySelectorAll() secara detail.

22. querySelector() dengan tag

Misalnya:

<h2>Homepage</h2>

Tidak ada ID:

id="..."

Tidak ada class:

class="..."

Kita masih bisa mengambilnya:

let h2 = document.querySelector("h2");

Karena:

h2

adalah CSS selector untuk tag <h2>.

23. Lagi-lagi hanya element pertama

Misalnya:

<h2>First</h2>
<h2>Second</h2>
<h2>Third</h2>

Kemudian:

let h2 = document.querySelector("h2");

Yang dikembalikan:

<h2>First</h2>

Bukan semuanya.

Jadi aturan sederhananya:

querySelector() → ambil satu element pertama yang cocok.

24. Kalau tidak ditemukan?

Sama seperti getElementById().

Misalnya:

let h2 = document.querySelector(".does-not-exist");

Jika tidak ada element dengan class tersebut:

h2

bernilai:

null

Kemudian:

console.log(h2);

menghasilkan:

null

Dan kalau kita melakukan:

h2.textContent = "Hello";

akan error karena kita sebenarnya melakukan:

null.textContent

25. getElementById() vs querySelector()

Ini perbandingan paling penting dari lecture.

Contoh:

document.getElementById("intro");

vs:

document.querySelector("#intro");

Keduanya bisa mendapatkan element yang sama.

26. Perbedaan syntax yang harus diingat

getElementById

document.getElementById("intro");

Tidak pakai #.

querySelector dengan ID

document.querySelector("#intro");

Pakai #.

querySelector dengan class

document.querySelector(".about");

Pakai ..

querySelector dengan tag

document.querySelector("h2");

Tidak pakai apa-apa.

27. Cara mudah menghafalnya

Ingat CSS:

#    → ID
.    → class
tag  → tag

Maka:

document.querySelector("#intro");

artinya:

Cari element dengan ID intro.

document.querySelector(".about");

artinya:

Cari element dengan class about.

document.querySelector("h2");

artinya:

Cari element <h2>.

28. Setelah mendapatkan element, kita bisa memanipulasinya

Misalnya:

<h2>Homepage</h2>

Kita cari:

let h2 = document.querySelector("h2");

Kemudian ubah:

h2.textContent = "Welcome to our bank";

Browser sekarang menampilkan:

Welcome to our bank

Ini contoh sederhana:

querySelector()
       ↓
    <h2>
       ↓
   h2 object
       ↓
h2.textContent = ...
       ↓
     DOM berubah
       ↓
   halaman berubah

29. textContent vs innerHTML

Lecture kemudian memperkenalkan konsep lain yang sangat penting:

textContent

dan:

innerHTML

Keduanya sama-sama bisa digunakan untuk membaca/mengubah isi element, tetapi maknanya berbeda.

30. textContent

Misalnya:

<h1>Hello World</h1>

Kita bisa:

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

console.log(h1.textContent);

Hasil:

Hello World

Kalau kita set:

h1.textContent = "Hello JavaScript";

hasilnya:

<h1>Hello JavaScript</h1>

31. innerHTML

Sekarang misalnya:

<h1>
    Hello <b>World</b>
</h1>

Di dalam <h1> bukan hanya text biasa.

Ada HTML:

<b>World</b>

Kalau kita menggunakan:

h1.innerHTML

kita bisa mendapatkan HTML yang ada di dalam element tersebut.

Secara sederhana:

h1
└── Hello
    <b>World</b>

32. Perbedaan paling penting textContent dan innerHTML

Misalnya:

h1.textContent = "<b>Hello</b>";

Apa yang terjadi?

Browser akan memperlakukan <b>Hello</b> sebagai teks.

Tampilannya kira-kira:

<b>Hello</b>

Bukan tulisan bold.

Karena textContent berarti:

“Anggap ini sebagai teks.”

Sedangkan:

h1.innerHTML = "<b>Hello</b>";

Browser akan memproses:

<b>Hello</b>

sebagai HTML.

Hasilnya:

Hello

dengan Hello menjadi bold.

Jadi:

textContent
    ↓
anggap sebagai TEXT

innerHTML
    ↓
anggap sebagai HTML

33. Analogi textContent vs innerHTML

Bayangkan kamu memberikan tulisan kepada seseorang.

textContent

Kamu berkata:

“Tulis persis kata-kata ini.”

Kalau kamu memberikan:

<b>Hello</b>

dia menulis:

<b>Hello</b>

innerHTML

Kamu berkata:

“Ini adalah instruksi HTML. Tolong proses.”

Maka:

<b>Hello</b>

diproses sebagai HTML.

34. Contoh konkret

HTML:

<h1 id="title">Hello World</h1>

JavaScript:

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

h1.textContent = "<b>Hello JavaScript</b>";

Hasilnya:

<b>Hello JavaScript</b>

Sedangkan:

h1.innerHTML = "<b>Hello JavaScript</b>";

hasil visualnya:

Hello JavaScript

dengan teks bold.

35. Kenapa lecture menggunakan backticks?

Lecture menggunakan:

h1.innerHTML = `
    <b>Hello</b>
`;

Karena backtick:

`...`

adalah template literal yang sudah kita pelajari sebelumnya.

Keuntungannya, kita bisa menulis string dalam beberapa baris.

Misalnya:

h1.innerHTML = `
    <b>Hello</b>
    <br>
    JavaScript
`;

Lebih mudah dibaca daripada string dengan banyak escape character.

36. innerHTML berarti “HTML di dalam”

Nama ini sebenarnya sangat membantu.

innerHTML

bisa dibaca:

HTML yang berada di dalam element tersebut.

Misalnya:

<div>
    <h1>Hello</h1>
</div>

Kalau kita mengambil:

div.innerHTML

yang dimaksud adalah isi di dalam <div>:

<h1>Hello</h1>

Bukan tag <div> itu sendiri.

37. Sedangkan textContent berarti “teks di dalam”

Misalnya:

<div>
    <h1>Hello <b>World</b></h1>
</div>

textContent dari <div> secara sederhana menghasilkan teks:

Hello World

Sedangkan innerHTML mempertahankan struktur HTML di dalamnya:

<h1>Hello <b>World</b></h1>

Jadi:

textContent → teks
innerHTML   → HTML di dalam

38. Hati-hati dengan innerHTML

Ini catatan penting untuk masa depan.

innerHTML sangat berguna, tetapi jangan sembarangan memasukkan data dari user langsung ke innerHTML.

Misalnya data user:

let username = /* input user */;

kemudian:

element.innerHTML = username;

Jika data tersebut mengandung HTML berbahaya, bisa menimbulkan masalah keamanan seperti XSS (Cross-Site Scripting).

Untuk teks biasa dari user, biasanya lebih aman menggunakan:

element.textContent = username;

Jadi mental model yang bagus:

Kalau cuma mau memasukkan teks → textContent.

Kalau memang ingin memasukkan struktur HTML → innerHTML, dengan memperhatikan keamanan input.

39. Satu konsep yang sangat penting: object DOM

Jangan melihat:

let p = document.querySelector("#intro");

seolah-olah p adalah HTML string.

Bukan.

p adalah object DOM.

Secara konsep:

p
│
├── textContent
├── innerHTML
├── style
├── id
├── className
├── children
├── ...
└── methods

Jadi setelah mendapatkan object tersebut, kita bisa melakukan banyak hal.

Contohnya:

p.textContent = "Hello";

atau nanti:

p.style.color = "red";

atau:

p.remove();

dan masih banyak lagi.

40. Cara berpikir ketika menggunakan DOM

Mulai sekarang biasakan berpikir dengan pola 3 langkah:

Langkah 1 — Cari element

let p = document.querySelector("#intro");

Langkah 2 — Dapatkan object DOM

p
↓
<p> object

Langkah 3 — Manipulasi

p.textContent = "Hello JavaScript";

Jadi:

SEARCH
  ↓
GET OBJECT
  ↓
MANIPULATE

Ini pola yang akan terus kamu lihat dalam DOM.

41. Contoh lengkap

Misalnya HTML:

<h1 id="title">My Website</h1>

<p id="intro">This is my website.</p>

<p class="about">About Us</p>

<p class="about">Our Team</p>

JavaScript:

let title = document.getElementById("title");

title.textContent = "Welcome!";

Hasil:

My Website

berubah menjadi:

Welcome!

Kemudian:

let intro = document.querySelector("#intro");

console.log(intro.textContent);

Output:

This is my website.

Kemudian:

let about = document.querySelector(".about");

console.log(about.textContent);

Karena ada dua .about, yang dikembalikan hanya yang pertama:

About Us

42. Kenapa querySelector() terasa lebih powerful?

Karena dia menggunakan CSS selector.

Misalnya nanti kamu bisa menulis:

document.querySelector("#main");

document.querySelector(".button");

document.querySelector("h1");

document.querySelector("div p");

document.querySelector(".container h1");

document.querySelector("input[type='text']");

Jadi satu method bisa digunakan untuk berbagai jenis pencarian.

43. Tapi getElementById() juga tetap berguna

Jangan berpikir:

“querySelector() lebih powerful berarti getElementById() tidak berguna.”

Tidak.

Kalau kamu memang ingin mencari element berdasarkan ID, ini sangat jelas:

document.getElementById("intro");

Kode tersebut langsung menunjukkan:

“Saya sedang mencari element berdasarkan ID.”

Sedangkan:

document.querySelector("#intro");

lebih fleksibel karena menggunakan selector CSS.

Untuk sekarang, pahami keduanya. Nanti seiring pengalaman kamu akan terbiasa memilih mana yang paling nyaman.

44. Ringkasan getElementById()

Syntax:

document.getElementById("id");

Contoh:

let p = document.getElementById("intro");

Jika ditemukan:

→ object DOM

Jika tidak ditemukan:

→ null

Hanya mengembalikan satu element.

45. Ringkasan querySelector()

Syntax:

document.querySelector("CSS selector");

Contoh ID:

document.querySelector("#intro");

Contoh class:

document.querySelector(".about");

Contoh tag:

document.querySelector("h2");

Jika ditemukan:

→ element pertama yang cocok

Jika tidak:

→ null

46. Tabel selector yang wajib dihafalkan

Mental shortcut:

# → ID
. → CLASS
tag → TAG

47. Error yang wajib kamu kenali

Kalau kamu melihat:

Cannot read properties of null

langsung pikir:

Apakah element yang saya cari ditemukan?

Misalnya:

let p = document.querySelector("#intro");

p.textContent = "Hello";

Kalau #intro tidak ada:

querySelector()
      ↓
    null
      ↓
p.textContent
      ↓
❌ ERROR

Jadi error-nya bukan karena textContent rusak.

Masalah sebenarnya terjadi satu langkah sebelumnya:

Element-nya tidak ditemukan.

48. Hubungan dengan lecture sebelumnya

Lecture sebelumnya:

DOM adalah representasi HTML dalam bentuk object.

Lecture sekarang:

Bagaimana kita mendapatkan object tersebut?

Jawabannya:

document
   ↓
getElementById()
   atau
querySelector()
   ↓
DOM element object
   ↓
textContent / innerHTML / property lain
   ↓
ubah DOM
   ↓
UI berubah

Jadi lecture ini adalah jembatan antara:

"Memahami DOM"

dan:

"Benar-benar memanipulasi DOM"

🎯 Cheat sheet akhir

1. Cari berdasarkan ID

let element = document.getElementById("intro");

2. Cari berdasarkan ID dengan CSS selector

let element = document.querySelector("#intro");

3. Cari berdasarkan class

let element = document.querySelector(".about");

4. Cari berdasarkan tag

let element = document.querySelector("h2");

5. Baca teks

console.log(element.textContent);

6. Ubah teks

element.textContent = "Hello JavaScript";

7. Baca HTML di dalam element

console.log(element.innerHTML);

8. Ubah HTML di dalam element

element.innerHTML = "<b>Hello</b>";

9. Tidak ditemukan

element === null

10. querySelector() hanya mengambil yang pertama

document.querySelector(".item");

Kalau ada:

<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>

yang didapat hanya:

A

Untuk semua element nanti menggunakan:

document.querySelectorAll(".item");

🧠 Kalau cuma mau mengingat 5 hal

1. document = pintu masuk ke DOM

2. getElementById("id")
   → cari berdasarkan ID

3. querySelector("selector")
   → cari menggunakan CSS selector

4. textContent
   → baca/ubah teks

5. innerHTML
   → baca/ubah HTML di dalam element

Dan pola terpenting dari seluruh lecture:

              DOM MANIPULATION

                    document
                       ↓
                cari element
                       ↓
          ┌────────────┴────────────┐
          ↓                         ↓
 getElementById()            querySelector()
          │                         │
          └────────────┬────────────┘
                       ↓
                DOM object
                       ↓
             ┌─────────┴─────────┐
             ↓                   ↓
       textContent          innerHTML
             ↓                   ↓
        ubah teks           ubah HTML
             └─────────┬─────────┘
                       ↓
                  DOM berubah
                       ↓
                 halaman berubah

Inti paling sederhananya: document membantu kita mencari element, hasil pencarian berupa object DOM, lalu object tersebut bisa kita baca atau ubah melalui property seperti textContent dan innerHTML. Ini adalah fondasi dari hampir semua interaksi JavaScript dengan halaman web.