Browser: HTML, CSS, DOM, dan Aksesibilitas · 6/8

DOM: halamanmu sebagai object

Pohon yang dibangun browser dari HTML-mu, dan bagaimana JavaScript menjangkaunya.

Baca 28 menit

Setelah pelajaran ini kamu bisa

Menjelaskan apa itu DOM dan bedanya dengan kode sumber HTML-mu
Menemukan dan mengubah elemen dengan API modern
Membuat dan memasukkan elemen dengan aman
Menjelaskan kenapa `innerHTML` dengan data pengguna itu berbahaya

DOM — Document Object Model — adalah pohon object yang dibangun browser dari HTML-mu. File HTML-mu itu cetak biru; DOM-nya bangunannya, dan ia bisa diubah setelah dibangun.

Satu hal yang perlu dipahami sejak awal: DOM itu bukan file sumbermu. View Source menampilkan apa yang dikirim server. DevTools menampilkan DOM yang hidup, termasuk semua yang sudah diubah JavaScript sejak itu. Kalau keduanya berbeda, selisih itu biasanya jawaban atas bug-mu.

Menemukan elemen

// The two you need. Both take any CSS selector.
document.querySelector(".venue-card");        // the FIRST match, or null
document.querySelectorAll(".venue-card");     // ALL matches, as a NodeList

// Scope a search to part of the tree - faster and safer than searching globally.
const card = document.querySelector("#card-42");
const title = card.querySelector("h3");       // only inside that card

// A NodeList is not an array. It has forEach, but not map or filter.
const cards = document.querySelectorAll(".venue-card");
const titles = [...cards].map((c) => c.textContent);   // spread it first

// Older API you will still meet:
document.getElementById("card-42");           // marginally faster, id only
document.getElementsByClassName("card");      // LIVE - updates as the DOM changes

Coba sendiri

querySelector yang berfungsi di atas pohon object biasa. Membangun penelusurannya menunjukkan tidak ada sihir di dalamnya.

// A tiny DOM. This is genuinely the shape of the real thing.
const tree = {
  tag: "main", id: "main", classes: [], children: [
    { tag: "h1", classes: ["title"], text: "Villa Sunset", children: [] },
    { tag: "ul", classes: ["venues"], children: [
      { tag: "li", classes: ["card"], text: "Villa A", children: [
        { tag: "h3", classes: ["title"], text: "Villa A", children: [] },
      ] },
      { tag: "li", classes: ["card", "featured"], text: "Villa B", children: [
        { tag: "h3", classes: ["title"], text: "Villa B", children: [] },
      ] },
    ] },
  ],
};

// Depth-first, in document order - the same order the browser uses.
function walk(node, visit) {
  visit(node);
  for (const child of node.children ?? []) walk(child, visit);
}

function matches(node, selector) {
  if (selector.startsWith("#")) return node.id === selector.slice(1);
  if (selector.startsWith(".")) return (node.classes ?? []).includes(selector.slice(1));
  return node.tag === selector;
}

function querySelectorAll(root, selector) {
  const found = [];
  walk(root, (node) => { if (matches(node, selector)) found.push(node); });
  return found;
}

function querySelector(root, selector) {
  return querySelectorAll(root, selector)[0] ?? null;   // null, like the real one
}

console.log("first .title  ->", querySelector(tree, ".title").text);
console.log("all .title    ->", querySelectorAll(tree, ".title").map((n) => n.text));
console.log("all li        ->", querySelectorAll(tree, "li").length);
console.log(".featured     ->", querySelector(tree, ".featured").text);
console.log("missing       ->", querySelector(tree, ".nope"));

console.log("");
console.log("document order:");
walk(tree, (n) => console.log("  " + n.tag + (n.classes?.length ? "." + n.classes.join(".") : "")));

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Mengubah elemen

const card = document.querySelector(".card");

// Text. Always prefer textContent.
card.textContent = "New title";

// Classes - a proper API, so no string juggling.
card.classList.add("featured");
card.classList.remove("hidden");
card.classList.toggle("open");                    // add if absent, remove if present
card.classList.toggle("dark", isDarkMode);        // force a state with a boolean
card.classList.contains("featured");

// Attributes vs properties. `data-*` attributes are for your own metadata.
card.setAttribute("aria-expanded", "true");
card.dataset.venueId = "42";                      // becomes data-venue-id="42"

// Creating and inserting.
const item = document.createElement("li");
item.textContent = "Villa C";
item.className = "card";
document.querySelector(".venues").append(item);

item.remove();

classList.toggle("dark", boolean) adalah cara pengalih tema di proyek ini mengatur class-nya — satu baris, tanpa percabangan.

textContent versus innerHTML

textContent mengatur teks. innerHTML mem-parse sebuah string sebagai HTML lalu membangun elemen darinya. Perbedaan itu adalah sebuah batas keamanan.

Coba sendiri

Kenapa pilihannya penting. Ini menunjukkan payload yang dipakai serangan XSS nyata, dan apa yang dilakukan masing-masing API terhadapnya.

// A "display name" submitted by a user, straight from a form.
const userInput = '<img src=x onerror="stealCookies()">';

// What textContent does: treats it as characters. Renders as visible text.
function asTextContent(value) {
  return { kind: "text node", content: value, executes: false };
}

// What innerHTML does: parses it. That onerror attribute becomes real.
function asInnerHtml(value) {
  const looksLikeMarkup = /<[a-z][\s\S]*>/i.test(value);
  const hasHandler = /\son\w+\s*=/i.test(value);
  return {
    kind: looksLikeMarkup ? "parsed elements" : "text node",
    content: value,
    executes: looksLikeMarkup && hasHandler,
  };
}

console.log("textContent:", asTextContent(userInput));
console.log("innerHTML:  ", asInnerHtml(userInput));
console.log("");
console.log("innerHTML executes attacker code:", asInnerHtml(userInput).executes);
console.log("textContent executes it:         ", asTextContent(userInput).executes);
console.log("");
console.log("Note the payload has no <script> tag. Stripping <script> is NOT a fix -");
console.log("onerror, onload and onfocus all run without one.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Di console browser pada halaman ini, jalankan document.querySelectorAll("h2").length, lalu [...document.querySelectorAll("h2")].map(h => h.textContent). Sekarang jalankan document.body.classList.toggle("dark") dan lihat temanya berbalik — kamu baru saja melakukan apa yang dilakukan pengalih tema. Muat ulang untuk membatalkan.

Hasil yang diharapkan

Sebuah hitungan, array berisi teks heading, dan perubahan tema yang terlihat.