Memahami DOM: JavaScript Bertemu Halaman

18 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

Terangkan bagaimana pelayar menukar HTML menjadi pokok object (DOM)
Pilih elemen dengan querySelector / querySelectorAll dan ubahnya dengan textContent dan classList
Cipta elemen dengan createElement dan append, dan faham kenapa innerHTML dengan input pengguna berisiko

Idea utama

Apabila pelayar membaca HTML anda, ia membina pokok object JavaScript yang dipanggil DOM. Ubah object itu, dan halaman di skrin turut berubah.

Setakat ini kod anda hanya bercakap dengan Konsol. Sekarang ia boleh menyentuh halaman sebenar. Jambatannya ialah DOM (Document Object Model): setiap tag dalam HTML anda menjadi object yang boleh dicari, dibaca dan diubah oleh skrip anda.

HTML menjadi pokok DOM

<body>  <header>    <h1>Warung Aina</h1>  </header>  <main>    <p>Menu:</p>    <ul>      <li>Teh tarik</li>      <li>Roti canai</li>    </ul>    <button>Order</button>  </main></body>

DOM tree

<li> · induk: <ul> · anak: nod teks "Teh tarik"

Gunakan Tab untuk masuk ke pokok, kemudian ↑ ↓ untuk bergerak. Atau halakan tetikus pada mana-mana bahagian.

Dipermudahkan: DOM sebenar juga ada <html> dan <head>, dan ruang kosong antara tag menjadi nod teks tambahan. Ia disembunyikan supaya pokok mudah dibaca.

Tag bersarang menjadi pokok: setiap elemen ialah node yang ada induk (parent) dan anak (children).

Mencari elemen

JavaScript

// One element: the FIRST match for a CSS selector (or null)
const title = document.querySelector("#title");
const firstItem = document.querySelector(".item");

// Every match, as a list you can loop over
const items = document.querySelectorAll(".item");
console.log(items.length); // 3

for (const item of items) {
  console.log(item.textContent);
}

Error "Cannot read properties of null"

Error terkenal ini bermaksud querySelector tidak menjumpai apa-apa, jadi anda sedang menggunakan null seolah-olah ia elemen. Semak ejaan selector (# untuk id, . untuk class), dan pastikan tag <script> berada selepas HTML yang digunakannya — sebab itu ia diletakkan di hujung <body>.

Mengubah teks dan class

JavaScript

const statusText = document.querySelector("#status");
statusText.textContent = "Open today!";   // replace the text

statusText.classList.add("highlight");    // add a class
statusText.classList.remove("highlight"); // remove it
statusText.classList.toggle("highlight"); // add if missing, remove if present
statusText.classList.contains("highlight"); // true / false

Lebih baik togol class daripada menetapkan gaya satu per satu: rupa kekal dalam CSS, logik kekal dalam JavaScript.

textContent lawan innerHTML

innerHTML — membaca string sebagai HTML

JavaScript

note.innerHTML = "<b>Hi</b>";
// shows: Hi (in bold — a real <b> element)

note.innerHTML = userInput; // ⚠ dangerous

textContent — sentiasa teks biasa

JavaScript

note.textContent = "<b>Hi</b>";
// shows: <b>Hi</b> (exactly those characters)

note.textContent = userInput; // ✓ safe

Jika anda masukkan teks yang ditaip pengguna ke dalam innerHTML, mereka boleh menaip HTML — termasuk tag yang menjalankan JavaScript. Serangan ini dipanggil cross-site scripting (XSS), dan ia antara bug keselamatan paling biasa di web. Peraturan mudah: teks pengguna masuk ke textContent. Guna innerHTML hanya untuk HTML yang anda tulis sendiri.

Mencipta elemen baharu

JavaScript

const li = document.createElement("li"); // 1. create (not on the page yet)
li.textContent = "Kuih lapis";            // 2. fill it
li.classList.add("item");                 // 3. style it

document.querySelector("#menu").append(li); // 4. attach it → now it's visible

Di bawah Step 1 dalam script.js:

1. Pilih semua elemen .item dan tambah class highlight pada setiap satu (CSS untuknya sudah tersedia).

2. Gantikan teks Loading menu… dalam #status dengan mesej yang menyatakan bilangan item, contohnya 3 items on the menu. Kira dengan JavaScript — jangan taip nombor itu sendiri.

Semakan

#status menunjukkan bilangan item
Setiap .item ada class highlight

Uji kefahaman

document.querySelector("#menu") memulangkan null. Apakah punca yang paling mungkin?

Halaman belum ada elemen dengan id="menu"Menu itu kosongquerySelector hanya berfungsi dengan class

Pengguna menaip <img src=x onerror="…"> dalam kotak komen. Baris mana yang memaparkannya dengan selamat?

comment.innerHTML = input.valuecomment.textContent = input.valueKedua-duanya sama selamat

Anda jalankan const li = document.createElement("li"); li.textContent = "Hi"; tetapi tiada apa yang muncul. Kenapa?

createElement rosak dalam pelayar iniElemen itu tidak pernah dilekatkan pada halaman dengan appendAnda perlukan innerHTML supaya ia muncul

Apa yang anda pelajari

DOM ialah pokok object yang dibina pelayar daripada HTML anda — ubah DOM, halaman pun berubah.
querySelector mendapatkan padanan pertama (atau null); querySelectorAll mendapatkan semua padanan untuk di-loop.
classList menghidupkan dan mematikan gaya; createElement + append menambah benda baharu.
Teks pengguna masuk ke textContent, bukan innerHTML.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.