Lewati ke konten utama
menjadi.dev
Chapter 2.2 Fundamental Web Pemula

DOM: Peta Interaktif Halaman Web

Document Object Model dan cara JavaScript memanipulasinya

Tujuan Pembelajaran

  • Memahami konsep DOM sebagai representasi tree dari HTML
  • Bisa memanipulasi elemen HTML dengan JavaScript

Analogi

Diagram 

      DOM = Peta Genalogi Keluarga:

        Document (Kakek)
            |
        <html> (Ayah)
           /    \
    <head>      <body> (Ibu)
      |          /    |    \
   <title>   <h1>  <p>   <button>

DOM tree seperti pohon keluarga — setiap elemen punya parent dan children

Penjelasan Konsep

Setelah memahami struktur dasar HTML, sekarang kita akan kenalan dengan tag-tag HTML yang paling sering dipakai dalam sehari-hari.

Seperti tukang bangunan yang harus tahu fungsi setiap alat — palu untuk memaku, gergaji untuk memotong,

Penggaris untuk mengukur — web developer juga harus tahu kapan menggunakan tag yang tepat.

Tag yang tepat memberikan makna yang tepat, dan makna yang tepat membuat website-mu lebih baik di mata Google dan lebih mudah diakses oleh semua orang.

Heading <h1> sampai <h6>: Hierarki Judul

Heading adalah judul atau subjudul.

<h1> adalah judul utama (paling besar, paling penting), <h2> adalah subjudul, hingga <h6> yang paling kecil.

Bayangkan ini seperti struktur bab dalam buku — ada judul buku, judul bab, subbab, dan sub-subbab. Setiap halaman seharusnya punya SATU <h1> saja (untuk SEO), lalu <h2> untuk bagian-bagian utama, dan <h3> untuk sub-bagian. Heading tidak boleh dipilih berdasarkan ukuran font — gunakan CSS untuk mengubah ukuran — tapi berdasarkan hierarki konten.

Paragraf <p>: Wadah Teks

Tag <p> digunakan untuk menampung blok teks. Setiap paragraf harus dibungkus dalam tag <p> sendiri.

Browser secara otomatis memberi jarak antar paragraf (margin).

Di dalam paragraf, kamu bisa menggunakan tag inline seperti <strong> (tebal, penting), <em> (miring, penekanan), <mark> (highlight),

Dan <a> (link).

Tag <a> (anchor) membuat hyperlink — klik dan kamu pindah ke halaman lain.

Attribute href menentukan tujuan link.

Ada beberapa jenis nilai href:

  • URL absolut: href="https://google.com" — ke website lain
  • URL relatif: href="/about.html" — ke halaman di website yang sama
  • Anchor: href="#section2" — ke bagian tertentu di halaman yang sama
  • Email: href="mailto:budi@email.com" — membuka email client
  • Telepon: href="tel:+628123456789" — langsung telepon di HP Attribute target="_blank" akan membuka link di tab baru.

Gambar <img>: Menampilkan Visual

Tag <img> menampilkan gambar.

Berbeda dari kebanyakan tag, <img> tidak punya tag penutup — ini disebut self-closing tag.

Attribute penting:

  • src: Lokasi file gambar (URL atau path lokal)
  • alt: Teks alternatif yang muncul kalau gambar gagal load,

Juga dibaca screen reader

  • width dan height: Dimensi gambar (lebih baik atur di CSS) Selalu isi attribute alt!

Ini penting untuk aksesibilitas dan SEO.

List <ul>, <ol>, <li>: Membuat Daftar

Ada dua jenis list:

  • <ul> (Unordered List): Daftar tanpa urutan — pakai bullet point.

Cocok untuk menu, daftar fitur.

  • <ol> (Ordered List): Daftar berurutan — pakai angka.

Cocok untuk langkah-langkah, peringkat. Setiap item dalam list dibungkus <li> (List Item).

List juga bisa bersarang — <li> berisi <ul> lagi untuk sub-menu.

Tabel <table>, <tr>, <td>, <th>: Menyajikan Data

Tabel digunakan untuk data yang punya struktur baris-kolom (bukan untuk layout halaman — itu jadul!).

Strukturnya:

  • <table>: Wadah tabel
  • <thead>: Bagian kepala tabel (kolom judul)
  • <tbody>: Bagian isi tabel
  • <tr>: Table Row (satu baris)
  • <th>: Table Header (sel judul,

Otomatis tebal dan center)

  • <td>: Table Data (sel biasa)

Block vs Inline Elements

  • Block: Selalu mulai di baris baru, mengambil lebar penuh.

Contoh: <div>, <p>, <h1>, <section>

  • Inline: Tidak mulai baris baru, hanya mengambil lebar seperlunya.

Contoh: <span>, <a>, <strong>, <img> Pemahaman ini penting karena mempengaruhi layout dan styling dengan CSS.

Contoh Kode

javascript 
// SELEKSI ELEMEN
const judul = document.getElementById('judul');
const tombol = document.querySelector('.btn-primary');
const semuaLink = document.querySelectorAll('a');

// MANIPULASI KONTEN
judul.textContent = 'Judul Baru!';
judul.innerHTML = '<em>Teks Miring</em>';

// MANIPULASI STYLE
judul.style.color = 'blue';
judul.style.fontSize = '32px';

// MEMBUAT ELEMEN BARU
const divBaru = document.createElement('div');
divBaru.className = 'alert alert-success';
divBaru.textContent = 'Data berhasil disimpan!';
document.body.appendChild(divBaru);

// EVENT LISTENER
tombol.addEventListener('click', () => {
  alert('Tombol diklik!');
});

Penjelasan Kode

Baris 2-4: Empat cara seleksi elemen DOM. Baris 7-8: Manipulasi teks dan HTML. Baris 11-12: Ubah style CSS langsung. Baris 15-18: Buat elemen baru. Baris 21-23: Pasang event listener.

Prompt AI

Jelaskan bedanya textContent, innerText, dan innerHTML. Kapan sebaiknya menggunakan masing-masing?

Pertanyaan Reflektif

Buka DevTools → Console. Ketik `document.body` dan `document.querySelectorAll('*').length` untuk melihat total elemen di halaman.