Lecture ini adalah kelanjutan langsung dari lecture sebelumnya tentang DOM, querySelector(), dan getElementById().

Kalau lecture sebelumnya menjawab:

“Bagaimana cara mengambil elemen HTML dari DOM?”

Lecture ini menjawab:

“Setelah elemen HTML berhasil kita ambil, bagaimana cara mengubah atribut, CSS, dan class-nya menggunakan JavaScript?”

1. Gambaran besar lecture ini

Ada 4 hal utama yang perlu kamu pahami:

1. Mengubah attribute/value HTML dengan JavaScript
2. Mengubah CSS style secara langsung dengan JavaScript
3. Menambah CSS class dengan classList.add()
4. Menghapus CSS class dengan classList.remove()

Alurnya selalu kurang lebih seperti ini:

HTML
 ↓
Browser membuat DOM
 ↓
JavaScript mencari elemen
 ↓
Elemen ditemukan sebagai object
 ↓
JavaScript mengubah property
 ↓
DOM berubah
 ↓
Tampilan web berubah

Ini adalah dasar dari DOM manipulation.

2. Ingat kembali konsep DOM

Misalnya HTML kita:

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

Ketika browser membaca HTML tersebut, browser membuat representasi DOM.

Secara sederhana kita bisa membayangkannya seperti:

DOM
└── input object
    ├── id = "fName"
    └── value = "John"

Kemudian JavaScript bisa mencari object tersebut:

let input = document.querySelector("#fName");

Sekarang:

input
 ↓
object yang merepresentasikan <input>

Jadi kita bisa melakukan:

input.value

untuk membaca nilainya.

Atau:

input.value = "Mark";

untuk mengubah nilainya.

3. Mengubah attribute/value HTML

Lecture menggunakan contoh <input>.

Misalnya HTML:

<input
    type="text"
    id="fName"
    value="John"
>

Di halaman awal, input akan berisi:

John

Sekarang kita ingin mengubahnya menjadi:

Mark

menggunakan JavaScript.

3.1 Mengambil element-nya

Kita bisa menggunakan:

let input = document.querySelector("#fName");

Kenapa #fName?

Karena fName adalah ID.

Dalam querySelector(), kita menggunakan aturan CSS selector:

#     → ID
.     → class
tag   → tag name

Jadi:

document.querySelector("#fName");

artinya:

“Cari element yang mempunyai ID fName.”

4. Mengubah value

Setelah element disimpan di variable input:

let input = document.querySelector("#fName");

kita bisa mengubah value:

input.value = "Mark";

Selesai.

Hasilnya:

Sebelum:
John

Setelah JavaScript berjalan:
Mark

5. Kenapa kita bisa menggunakan .value?

Ini penting untuk menghubungkan dengan lecture DOM sebelumnya.

Kita punya HTML:

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

Browser membuat object DOM yang mewakili input tersebut.

Object itu mempunyai berbagai property.

Misalnya secara sederhana:

input object
├── id
├── value
├── type
├── style
├── classList
├── ...

Jadi ketika kita menulis:

input.value

kita sedang mengakses property value dari object tersebut.

Dan ketika:

input.value = "Mark";

kita mengubah property tersebut.

6. Pola penting DOM manipulation

Mulai dari sini, kamu akan sering melihat pola:

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

element.sesuatu = nilaiBaru;

Contoh:

let input = document.querySelector("#fName");

input.value = "Mark";

Atau:

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

heading.textContent = "Hello";

Atau:

let banner = document.querySelector(".homepage-banner");

banner.style.color = "red";

Jadi jangan menghafal setiap kode sebagai kode terpisah.

Pahami polanya:

CARI ELEMENT
     ↓
SIMPAN DI VARIABLE
     ↓
UBAH PROPERTY

7. Bedakan value, textContent, dan innerHTML

Ini sangat penting karena sebelumnya kamu sudah belajar textContent dan innerHTML.

Untuk input:

<input value="John">

gunakan:

input.value

Untuk text biasa:

<p>Hello</p>

gunakan:

p.textContent

Untuk HTML di dalam element:

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

gunakan:

h1.innerHTML

Gambaran sederhananya:

8. DOM bukan cuma bisa dibaca, tetapi juga diubah

Ini inti besar dari lecture ini.

Misalnya:

let input = document.querySelector("#fName");

console.log(input.value);

Ini berarti:

Baca data dari DOM.

Sedangkan:

input.value = "Mark";

berarti:

Ubah DOM.

Hal yang sama berlaku untuk:

element.textContent = "...";

element.innerHTML = "...";

element.style.color = "...";

element.classList.add("...");

dll.

9. Mengubah CSS secara langsung

Sekarang masuk ke bagian kedua.

Misalnya kita punya:

<div class="homepage-banner">
    Welcome to our website
</div>

Dan CSS:

.homepage-banner {
    background-color: lightorange;
}

Misalnya kita ingin mengubah background menggunakan JavaScript.

Pertama kita cari element:

let bannerDiv = document.querySelector(".homepage-banner");

Karena homepage-banner adalah class, kita menggunakan:

.

sehingga:

".homepage-banner"

10. Property style

Element DOM mempunyai property:

style

Jadi kita bisa melakukan:

bannerDiv.style

style sendiri merupakan object yang berisi berbagai property CSS.

Secara sederhana:

bannerDiv
   ↓
style object
   ├── backgroundColor
   ├── color
   ├── fontSize
   ├── margin
   ├── padding
   ├── width
   └── ...

11. Mengubah background-color

Di CSS kita menulis:

background-color

Tetapi di JavaScript kita tidak menggunakan tanda -.

Kita menggunakan camelCase:

backgroundColor

Jadi:

bannerDiv.style.backgroundColor = "lightorange";

Misalnya:

let bannerDiv = document.querySelector(".homepage-banner");

bannerDiv.style.backgroundColor = "orange";

Maka background element tersebut berubah menjadi orange.

12. Kenapa background-color berubah menjadi backgroundColor?

Karena JavaScript menggunakan nama property dalam bentuk camelCase untuk banyak property CSS yang memiliki tanda -.

Contoh:

Sedangkan property yang memang satu kata tetap sama:

color
width
height
display
margin
padding

Contoh:

bannerDiv.style.color = "black";

bannerDiv.style.fontSize = "20px";

bannerDiv.style.backgroundColor = "orange";

13. Nilai CSS harus sesuai dengan CSS

Misalnya:

bannerDiv.style.color = "red";

atau:

bannerDiv.style.backgroundColor = "orange";

Untuk ukuran:

bannerDiv.style.fontSize = "20px";

Untuk width:

bannerDiv.style.width = "500px";

Jadi JavaScript memberikan nilai CSS ke property style.

14. Contoh lengkap

Misalnya:

<div class="banner">
    Hello World
</div>

JavaScript:

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

banner.style.backgroundColor = "orange";
banner.style.color = "black";
banner.style.fontSize = "30px";

Hasilnya kira-kira:

┌──────────────────────────────┐
│                              │
│        Hello World           │
│                              │
└──────────────────────────────┘

dengan background orange, text hitam, dan font 30px.

15. Apa yang sebenarnya terjadi?

Ketika kita menulis:

banner.style.backgroundColor = "orange";

JavaScript mengubah style pada object DOM.

DOM menjadi berubah.

Browser kemudian merender ulang tampilan sesuai perubahan tersebut.

Jadi:

JavaScript
     ↓
DOM berubah
     ↓
Browser melihat perubahan
     ↓
Tampilan berubah

16. Menambah dan menghapus CSS class

Nah, bagian berikutnya menurut saya lebih penting untuk praktik nyata.

Daripada JavaScript mengatur CSS satu per satu:

banner.style.backgroundColor = "orange";
banner.style.color = "black";
banner.style.fontSize = "20px";

sering kali lebih baik kita mempunyai CSS class.

Contohnya:

.active {
    background-color: orange;
    color: black;
    font-size: 20px;
}

Kemudian JavaScript cukup mengatakan:

Tambahkan class active.

17. Property classList

Element DOM mempunyai property:

classList

Misalnya:

<div class="homepage-banner">
    Hello
</div>

Kita ambil:

let banner = document.querySelector(".homepage-banner");

Kemudian:

banner.classList

classList adalah object yang berisi kumpulan class yang dimiliki element tersebut.

Misalnya:

banner
 ↓
classList
 ↓
["homepage-banner", "active"]

18. classList.add()

Untuk menambahkan class:

element.classList.add("nama-class");

Contoh:

banner.classList.add("active");

Sebelum:

<div class="homepage-banner">

Setelah:

<div class="homepage-banner active">

JavaScript secara dinamis menambahkan class tersebut.

19. Menghapus class dengan remove()

Kalau ingin menghapus:

banner.classList.remove("active");

Misalnya awalnya:

<div class="homepage-banner active">

Setelah:

banner.classList.remove("active");

menjadi:

<div class="homepage-banner">

CSS yang berasal dari .active otomatis tidak berlaku lagi.

20. Contoh sederhana add dan remove

CSS:

.active {
    background-color: orange;
    color: black;
}

HTML:

<div class="banner">
    Welcome
</div>

JavaScript:

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

banner.classList.add("active");

Hasilnya:

<div class="banner active">
    Welcome
</div>

Kalau:

banner.classList.remove("active");

kembali:

<div class="banner">
    Welcome
</div>

21. Kenapa classList sangat berguna?

Bayangkan kita mempunyai CSS yang cukup kompleks:

.dark-mode {
    background-color: black;
    color: white;
    border: 1px solid white;
    padding: 20px;
    box-shadow: ...;
}

Kalau menggunakan style, kita harus melakukan:

element.style.backgroundColor = "black";
element.style.color = "white";
element.style.border = "...";
element.style.padding = "20px";
element.style.boxShadow = "...";

Ribet.

Dengan class:

element.classList.add("dark-mode");

Selesai.

JavaScript hanya mengontrol:

“Element ini sedang dalam kondisi dark-mode.”

CSS yang mengurus tampilannya.

22. Analogi yang mudah

Bayangkan HTML element adalah orang.

CSS class adalah seragam.

Misalnya:

homepage-banner

adalah orang biasa.

Kemudian:

banner.classList.add("important");

artinya:

“Pakai seragam important.”

CSS:

.important {
    color: red;
    font-weight: bold;
}

Kemudian:

banner.classList.remove("important");

artinya:

“Lepas seragam important.”

Jadi JavaScript tidak perlu mengatur setiap detail penampilan. JavaScript cukup menentukan class apa yang sedang dipakai.

23. style vs classList

Ini salah satu bagian paling penting.

Menggunakan style

banner.style.backgroundColor = "orange";
banner.style.color = "black";

JavaScript langsung mengatur CSS.

Menggunakan classList

banner.classList.add("active");

JavaScript hanya menambahkan class, kemudian CSS menentukan tampilannya.

Perbandingannya:

Dalam aplikasi nyata, classList sering lebih nyaman untuk perubahan tampilan yang sudah kita definisikan sebelumnya di CSS.

24. Hubungan dengan DOM yang kita pelajari sebelumnya

Sekarang kita bisa menghubungkan semua lecture sebelumnya.

Misalnya HTML:

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

Browser membuat DOM:

document
   ↓
body
   ↓
h1 object

JavaScript mencari:

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

Sekarang kita punya object:

title
 ↓
<h1> object

Kita bisa mengubah text:

title.textContent = "Welcome";

Kita bisa mengubah style:

title.style.color = "red";

Kita bisa menambah class:

title.classList.add("active");

Jadi satu element DOM bisa kita manipulasi dari banyak sisi.

25. Hal penting: perubahan JavaScript terjadi saat runtime

Misalnya HTML awal:

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

Browser pertama kali membaca:

value = John

Kemudian JavaScript berjalan:

let input = document.querySelector("#fName");

input.value = "Mark";

Sekarang DOM sudah berubah:

value = Mark

Yang dilihat user adalah:

Mark

Jadi JavaScript dapat mengubah halaman setelah halaman sudah dimuat.

Inilah yang dimaksud dengan:

dynamic web page

26. HTML source vs DOM

Ini juga menghubungkan dengan lecture sebelumnya.

Misalnya file HTML awal:

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

JavaScript:

input.value = "Mark";

Yang berubah adalah DOM yang sedang digunakan browser.

Bukan berarti file index.html di komputer kamu tiba-tiba ditulis ulang menjadi:

<input id="fName" value="Mark">

File HTML aslinya tetap:

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

Tetapi DOM yang sedang berjalan di browser sudah berubah.

Secara sederhana:

index.html
   ↓
browser membaca
   ↓
DOM dibuat
   ↓
JavaScript memodifikasi DOM
   ↓
halaman berubah

27. Kenapa perubahan terlihat di tab Elements?

Di lecture, instruktur membuka DevTools → Elements.

Kemudian ketika:

banner.classList.add("homepage-banner");

dijalankan, class pada element terlihat berubah.

Ini karena DevTools Elements menampilkan DOM yang sedang aktif.

Misalnya awal:

<div class="banner">

Setelah:

banner.classList.add("active");

menjadi:

<div class="banner active">

Begitu juga dengan style.

JavaScript:

banner.style.color = "red";

bisa terlihat sebagai perubahan style pada DOM.

28. Hati-hati: querySelector() bisa menghasilkan null

Ini nyambung dengan lecture sebelumnya.

Misalnya:

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

Tetapi ternyata HTML tidak memiliki:

<div class="banner">

Maka:

banner

berisi:

null

Kalau kemudian:

banner.style.color = "red";

akan error.

Karena kita sebenarnya melakukan:

null.style.color

yang tidak mungkin.

Jadi kalau muncul error seperti:

Cannot read properties of null

ingat lecture sebelumnya:

Kemungkinan besar JavaScript gagal menemukan element yang kamu cari.

29. Kenapa nama CSS berubah ketika masuk JavaScript?

Ini wajib kamu hafalkan beberapa yang umum.

CSS                    JavaScript

background-color   →   backgroundColor
font-size           →   fontSize
font-weight         →   fontWeight
margin-top          →   marginTop
margin-left         →   marginLeft
padding-top         →   paddingTop
border-radius       →   borderRadius
box-shadow          →   boxShadow

Prinsipnya:

CSS:
background-color

JS:
backgroundColor

Kata kedua naik menjadi huruf kapital.

Ini disebut camelCase.

30. Tiga cara manipulasi yang sekarang sudah kamu ketahui

Setelah lecture ini, kamu sudah punya beberapa senjata DOM manipulation.

Mengubah text

element.textContent = "Hello";

Mengubah HTML

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

Mengubah attribute/property tertentu

input.value = "Mark";

Mengubah CSS langsung

element.style.color = "red";

Menambahkan class

element.classList.add("active");

Menghapus class

element.classList.remove("active");

31. Contoh mini project

Misalnya kita punya:

HTML

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

<button id="btn">Change</button>

CSS

.active {
    color: red;
    font-size: 40px;
}

JavaScript

let title = document.querySelector("#title");
let button = document.querySelector("#btn");

button.addEventListener("click", function () {
    title.textContent = "Welcome!";
    title.classList.add("active");
});

Sekarang ketika button diklik:

Hello World

berubah menjadi:

Welcome!

dan class:

<h1 id="title" class="active">

ditambahkan.

Ini adalah contoh nyata bagaimana konsep-konsep yang kamu pelajari mulai digabungkan:

DOM
 ↓
querySelector()
 ↓
object element
 ↓
textContent
 ↓
classList
 ↓
CSS
 ↓
tampilan berubah

addEventListener() memang belum dibahas dalam lecture ini, jadi cukup pahami konsep akhirnya dulu. Nanti ketika masuk event, semuanya akan terasa nyambung.

32. Bedakan style dan classList dengan gampang

Bayangkan kamu punya sebuah mobil.

style

Kamu berkata:

“Warnai mobil ini merah, ubah ukuran bannya, kasih kaca hitam…”

Artinya kamu mengatur detail satu per satu.

car.style.color = "red";
car.style...

classList

Kamu berkata:

“Mobil ini masuk mode sport.”

car.classList.add("sport");

Kemudian CSS sudah menentukan:

.sport {
    ...
}

Jadi:

style
= ubah detail langsung

classList
= ubah status/class

33. Kesalahan umum pemula

❌ Salah 1: lupa #

document.querySelector("fName");

Kalau fName adalah ID, harus:

document.querySelector("#fName");

❌ Salah 2: lupa . untuk class

document.querySelector("homepage-banner");

Kalau itu class:

document.querySelector(".homepage-banner");

❌ Salah 3: menggunakan nama CSS langsung

Salah:

element.style.background-color = "red";

Benar:

element.style.backgroundColor = "red";

❌ Salah 4: mengira classList adalah function

Salah:

element.classList();

Benar:

element.classList.add("active");

atau:

element.classList.remove("active");

Karena classList adalah property/object yang memiliki method.

❌ Salah 5: menggunakan textContent untuk input

Misalnya:

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

Jangan berpikir:

input.textContent

Untuk input, yang biasanya kita perlukan adalah:

input.value

34. Cheat sheet lecture ini

Mengambil element

ID

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

Class

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

Tag

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

Mengubah content

element.textContent = "Hello";

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

Mengubah value

input.value = "Mark";

Mengubah CSS

element.style.color = "red";

element.style.backgroundColor = "orange";

element.style.fontSize = "20px";

Menambah class

element.classList.add("active");

Menghapus class

element.classList.remove("active");

35. Inti lecture dalam satu diagram

             HTML
               ↓
        Browser membuat DOM
               ↓
       document.querySelector()
               ↓
          dapat element
               ↓
        ┌──────┼─────────┐
        ↓      ↓         ↓
   textContent  value   style
        ↓      ↓         ↓
      ubah    ubah     ubah CSS
                          ↓
                     classList
                      ↙     ↘
                    add    remove
                     ↓       ↓
                  CSS class berubah
                       ↓
                  DOM berubah
                       ↓
                 Tampilan berubah

36. Hal terpenting yang perlu kamu pahami

Jangan melihat lecture ini sebagai kumpulan syntax yang harus dihafalkan.

Pahami cara berpikirnya:

HTML element → menjadi object di DOM → JavaScript mengambil object tersebut → kita mengubah property/object tersebut → browser memperlihatkan perubahan.

Misalnya:

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

Artinya:

“Ambil element banner dari DOM.”

Kemudian:

banner.style.backgroundColor = "orange";

Artinya:

“Ubah CSS background element tersebut.”

Kemudian:

banner.classList.add("active");

Artinya:

“Tambahkan class active ke element tersebut.”

Dan:

banner.classList.remove("active");

artinya:

“Hapus class active dari element tersebut.”

Jadi sekarang kamu sudah mulai masuk ke bagian JavaScript yang sangat penting dalam pembuatan website:

JavaScript
    ↓
DOM
    ↓
HTML element
    ↓
ubah content
ubah attribute
ubah style
ubah class
    ↓
Website berubah secara dinamis

Kunci untuk lecture ini: querySelector() digunakan untuk mencari element, sedangkan textContent, innerHTML, value, style, dan classList digunakan untuk memanipulasi element yang sudah ditemukan.