Programming Fundamental 14

VIDEO: Membuat Halaman Profil Sederhana

Tujuan Praktikum : Peserta mampu membuat aplikasi penghitung umur yang interaktif dengan JavaScript, termasuk memanfaatkan input user, melakukan validasi, menghitung umur secara detail (tahun, bulan, hari, dan total hari), serta menampilkan hasil secara dinamis di halaman web.

Deskripsi Singkat Aktivitas : Pada praktikum ini, peserta akan membuat aplikasi web sederhana yang menghitung umur seseorang berdasarkan tanggal lahir yang dimasukkan. Peserta akan mempelajari manipulasi DOM, event handling, validasi input, perhitungan tanggal, serta menampilkan hasil secara interaktif.

Langkah-Langkah Praktikum

  1. Setup HTML Struktur
    • Buat file index.html dan buat struktur HTML dasar termasuk form input untuk tanggal lahir dan nama.
    • Tambahkan elemen untuk menampilkan hasil (div id="result").
  2. Tambahkan CSS (Opsional)
    • Buat file styles.css untuk styling tampilan form dan hasil.
  3. Implementasi JavaScript
    • Buat file script.js dan hubungkan ke HTML.
    • Ambil elemen DOM seperti form, input tanggal lahir, input nama, dan div hasil.
    • Tambahkan event listener submit pada form.
    • Validasi input: pastikan tanggal lahir tidak kosong dan tidak di masa depan.
    • Buat fungsi calculateAge untuk menghitung umur dalam tahun, bulan, hari, dan total hari.
    • Buat fungsi displayResult untuk menampilkan hasil ke halaman.
  4. Test Aplikasi
    • Masukkan tanggal lahir dan nama, klik “Hitung Umur” dan pastikan hasil tampil dengan benar.

Tools & Resource yang Dibutuhkan

  • Browser modern (Chrome, Firefox, Edge, Safari)
  • Code editor (VS Code, Sublime Text, atau sejenisnya)
  • GitHub

Contoh Output atau Hasil Akhir

Hasil akhir yang diharapkan:
  • Form input yang user-friendly
  • Kalkulasi umur yang akurat dalam tahun, bulan, hari
  • Validasi input yang robust
  • Display hasil yang menarik dan informatif
  • Error handling yang baik
  • Responsive design
  • Code yang clean dan well-organized

Kriteria Keberhasilan / Penilaian Mandiri

  • Form menerima input tanggal lahir dan nama.
  • Validasi input berjalan: menolak tanggal kosong atau tanggal di masa depan.
  • Umur dihitung dengan benar, termasuk penyesuaian hari dan bulan negatif.
  • Hasil ditampilkan secara interaktif di halaman web.
  • Tidak ada error JavaScript di console.

Petunjuk Troubleshooting

  • Periksa apakah file script.js sudah terhubung ke index.html.
  • Pastikan format tanggal sesuai input type date.
  • Cek console browser untuk melihat error JavaScript.
  • Referensi tambahan: Modul 4 – JavaScript Fundamentals, bagian Event Handling, DOM Manipulation, dan Date Object.

Durasi Praktik Disarankan: 

30–45 menit.


MODUL 5 DOM MANIPULATION & INTERACTIVITY

Bayangkan Anda sedang membuat halaman web pribadi. Semua elemen telah tersusun rapi, mulai dari foto profil di bagian atas, teks perkenalan di tengah, dan tombol “Hubungi Saya” di bagian bawah. Namun, ketika tombol tersebut diklik ternyata tidak terjadi apa-apa. Halaman tersebut tampak menarik, tetapi tidak memberikan respons apa pun. Inilah saat di mana peran JavaScript dan DOM Manipulation menjadi sangat penting.

Namun, semakin kompleks interaksi yang Anda buat, kode yang Anda tulis juga akan berkembang dan mengalami banyak perubahan. Di sinilah nantinya Anda akan mulai mengenal Git, sebuah sistem version control yang membantu mencatat setiap perubahan kode, sehingga Anda bisa melacak, memperbaiki, dan mengembangkan proyek dengan lebih aman.

Dengan kata lain, DOM mengajarkan cara membuat halaman web bereaksi terhadap pengguna, sedangkan Git akan membantu Anda menjaga dan mengelola setiap versi dari kode yang membangun halaman tersebut. Keduanya adalah fondasi penting bagi seorang web developer yang ingin bekerja secara efisien dan profesional.

Melalui modul ini, Anda akan mempelajari bagaimana membuat halaman web yang benar-benar hidup, tidak hanya menampilkan informasi, tetapi juga mampu berinteraksi dengan pengguna.

Dalam modul ini, Anda akan mempelajari:
  • Cara mengakses dan memodifikasi elemen DOM secara efisien.
  • Mengelola interaksi pengguna melalui event seperti klik, input, dan submit.
  • Membuat validasi form sederhana agar data yang dikirim lebih akurat.
  • Menggunakan console dan inspect untuk melakukan debugging.
  • Menyimpan data pengguna menggunakan Local Storage.
  • Mengenal dasar version control dengan Git dan proses deploy ke GitHub.
Sebelum memulai pembelajaran, mari kita pahami terlebih dahulu capaian yang ingin diraih dalam topik ini. Berikut adalah tujuan pembelajaran yang menjadi panduan dalam proses belajar:
  1. Memahami konsep DOM (Document Object Model) dan bagaimana cara mengakses elemen-elemen HTML pada halaman web.
  2. Menguasai teknik manipulasi DOM, termasuk cara mengubah konten serta penerapan styling secara dinamis.
  3. Mengimplementasikan event listeners untuk membuat halaman web merespons interaksi pengguna, seperti klik, input, atau submit.
  4. Membuat validasi form sederhana agar data yang diterima lebih akurat dan sesuai aturan.
  5. Menggunakan browser developer tools seperti console dan inspect untuk proses debugging dan pemecahan masalah secara efektif.
  6. Membangun aplikasi To-Do List interaktif, sebagai implementasi nyata dari semua konsep yang dipelajari dalam modul ini.
Melalui kombinasi konsep, praktik langsung, serta tantangan kecil di setiap bagian, Anda akan memahami bagaimana mengubah halaman web statis menjadi sistem yang interaktif dan responsif.

Selamat datang di tahap penting dalam perjalanan Anda menjadi seorang Full Stack Web Developer yang andal!

5.1 Mengakses dan Memodifikasi Elemen DOM

5.1.1 Apa itu DOM?

Setiap halaman web yang Anda lihat di browser terdiri dari elemen-elemen HTML seperti teks, gambar, tombol, dan form. Agar halaman tersebut tidak hanya statis tetapi juga interaktif, JavaScript perlu berkomunikasi dengan elemen-elemen ini.

Di sinilah DOM (Document Object Model) berperan. DOM adalah representasi struktur HTML dalam bentuk objek JavaScript yang memungkinkan JavaScript untuk berinteraksi dengan elemen HTML. Dengan DOM, setiap elemen HTML menjadi node dalam sebuah pohon hierarkis, yang dapat diakses, diubah, atau dimanipulasi sesuai kebutuhan.

Melalui pemahaman DOM, Anda akan mampu mengubah konten halaman secara dinamis, menangani interaksi pengguna, melakukan validasi data, hingga membangun aplikasi web interaktif seperti To-Do List. Penguasaan konsep ini menjadi pondasi penting agar setiap halaman web yang Anda buat tidak hanya tampil menarik tetapi juga fungsional dan responsif terhadap pengguna.

5.1.2 Mengapa DOM penting ?

Untuk memahami pentingnya DOM (Document Object Model), bayangkan JavaScript sebagai alat yang kuat, tetapi tidak memiliki cara langsung untuk “melihat” atau “menyentuh” elemen-elemen di halaman web. DOM berperan sebagai jembatan yang menghubungkan JavaScript dengan struktur HTML, sehingga memungkinkan interaksi yang dinamis dan responsif.

Tanpa DOM, JavaScript tidak akan mampu melakukan hal-hal berikut:
  • Mengakses elemen HTML untuk membaca atau memeriksa kontennya.
  • Mengubah konten halaman, sehingga tampilan tetap statis dan tidak responsif terhadap pengguna.
  • Menambahkan atau menghapus elemen secara dinamis sesuai kebutuhan aplikasi.
  • Menangani interaksi pengguna, seperti klik, input, atau submit pada form.
Dengan memahami DOM, Anda memperoleh kemampuan untuk membuat halaman web yang tidak hanya menampilkan informasi, tetapi juga mampu merespons tindakan pengguna secara langsung. Pemahaman ini menjadi fondasi penting sebelum mempelajari manipulasi elemen, event handling, validasi form, dan pengembangan aplikasi web interaktif.

5.1.3 Stuktur DOM Tree

Gambar Visualisasi Struktur DOM Tree

Agar JavaScript dapat berinteraksi dengan halaman web, penting untuk memahami struktur DOM Tree. DOM atau Document Object Model tersusun dalam bentuk struktur pohon (tree structure). Setiap elemen dalam dokumen HTML diwakili sebagai node yang saling terhubung secara hierarkis.

Struktur ini dimulai dari elemen <html> sebagai akar (root node), yang kemudian bercabang menjadi elemen anak (child nodes) seperti <head> dan <body>. Masing-masing dari elemen tersebut juga memiliki elemen anak di dalamnya.


Memahami struktur ini sangat penting karena menjadi dasar bagi JavaScript untuk menelusuri (traverse) dan memanipulasi elemen-elemen di halaman web.

Elemen-Elemen dalam DOM Tree

1. Root Node (Akar Pohon)

Pada bagian paling atas dari pohon DOM terdapat elemen <html> yang berperan sebagai akar utama. Elemen ini menaungi seluruh isi halaman web, termasuk bagian <head> dan <body>.

2. Hubungan Induk dan Anak (Parent–Child Relationship)

Dalam pohon DOM, setiap node terhubung melalui hubungan induk dan anak. Sebagai contoh:
  • <body> merupakan anak (child) dari <html>.
  • Di dalam <body>, elemen seperti <div>, <h1>, dan <img> merupakan anak-anak dari <body>.

3. Jenis-Jenis Node dalam DOM

Selain node elemen, terdapat beberapa jenis node lain yang membentuk halaman web:
  • Text Node → mewakili isi teks di dalam tag HTML.
  • Attribute Node → mewakili atribut HTML seperti class atau id.
  • Comment Node → mewakili komentar dalam kode HTML.
Masing-masing jenis node ini berperan dalam membentuk isi dan struktur halaman secara keseluruhan.

4. Element Sibling (Saudara Sejajar)

Elemen-elemen yang berada di dalam satu induk yang sama disebut sibling atau saudara sejajar. Misalnya, <img> dan <h1> yang sama-sama berada di dalam <div> adalah dua elemen sibling.

Mengapa Memahami Pohon DOM Itu Penting?

  • Dengan memahami struktur DOM, kita dapat dengan mudah:
  • Menentukan elemen yang ingin ditargetkan oleh JavaScript,
  • Menelusuri hubungan antara induk, anak, dan saudara sejajar, serta
  • Mengubah elemen berdasarkan posisi atau relasinya di dalam DOM.
Sebagai contoh, dengan memahami struktur DOM, Anda dapat:
  • Menyeleksi semua elemen <li> di dalam <ul> tertentu, atau
  • Menemukan elemen sibling dari suatu elemen untuk kemudian diberi gaya (style) khusus.

Sebagai contoh, struktur DOM dari halaman web sederhana dapat digambarkan sebagai berikut:
document
            ├── html
            │ ├── head
            │ │ ├── title
            │ │ └── meta
            │ └── body
            │ ├── header
            │ ├── main
            │ │ ├── section
            │ │ └── article
            │ └── footer

5.1.4 Mengakses Elemen DOM?

Dalam pengembangan web interaktif, kemampuan untuk mengakses elemen HTML melalui JavaScript merupakan langkah fundamental. Dengan mengakses elemen, Anda dapat membaca, mengubah, atau menambahkan konten dan atribut secara dinamis, sehingga halaman web tidak hanya statis tetapi mampu merespons interaksi pengguna.

JavaScript menyediakan berbagai metode untuk mengakses elemen HTML, yang masing-masing memiliki kelebihan dan karakteristik tersendiri. Metode-metode ini umumnya dibagi menjadi traditional methods dan modern methods.

1. Traditional Methods (Metode Tradisional)

// Mengakses elemen berdasarkan ID
            const elementById = document.getElementById("myId");
            // Mengakses elemen berdasarkan class
            const elementsByClass = document.getElementsByClassName("myClass");
            // Mengakses elemen berdasarkan tag
            const elementsByTag = document.getElementsByTagName("div");
        
Penjelasan:
  • getElementById() : Mengembalikan satu elemen berdasarkan ID.
  • getElementsByClassName() : Mengembalikan HTMLCollection dari semua elemen dengan class tertentu.
  • getElementsByTagName() : Mengembalikan HTMLCollection dari semua elemen dengan tag tertentu.
2. Modern Methods (Direkomendasikan):

// Mengakses elemen menggunakan querySelector (CSS selector)
            const element = document.querySelector("#myId");
            const elements = document.querySelectorAll(".myClass");
            const firstParagraph = document.querySelector("p");
            const allParagraphs = document.querySelectorAll("p");
        
Penjelasan:
  • querySelector() : Mengembalikan elemen pertama yang cocok dengan CSS selector.
  • querySelectorAll() : Mengembalikan NodeList berisi semua elemen yang cocok dengan CSS selector.
Keunggulan modern methods antara lain:
  • Menggunakan sintaks CSS selector yang fleksibel.
  • Lebih powerful dan mudah dikombinasikan dengan metode manipulasi DOM lainnya.
Selain itu, penting memahami perbedaan antara HTMLCollection dan NodeList:

// HTMLCollection (live collection)
            const liveCollection = document.getElementsByClassName("item");
            console.log(liveCollection.length); // Akan berubah jika elemen ditambah/dihapus

            // NodeList (static collection)
            const staticCollection = document.querySelectorAll(".item");
            console.log(staticCollection.length); // Tidak berubah setelah dibuat
        
Penjelasan:
  • HTMLCollection bersifat live, sehingga jumlah elemennya berubah jika elemen ditambah atau dihapus.
  • NodeList bersifat static, sehingga tidak berubah setelah dibuat.

Web tanpa DOM dan responsive


Web Tanpa DOM dan Responsive

Web dengan HTML + CSS + DOM dan responsive


Web dengan HTML + CSS + DOM dan Responsive

Dokumentasi lengkap mengenai perbedaan kedua proyek ini dapat diakses di:


Melalui submodul ini, Anda akan memahami bagaimana mengakses elemen DOM secara efektif dan mengaplikasikannya dalam membangun halaman web yang dinamis dan interaktif, sekaligus menyiapkan dasar untuk manipulasi DOM, event handling, dan validasi form.

5.1.5 Memodifikasi Konten Elemen?

Setelah berhasil mengakses elemen-elemen DOM, langkah berikutnya adalah memodifikasi kontennya agar halaman web menjadi dinamis dan interaktif. Kemampuan ini memungkinkan Anda menyesuaikan teks, atribut, gaya, dan kelas elemen sesuai kebutuhan aplikasi, sehingga pengalaman pengguna lebih responsif dan menarik.

1. Mengubah Konten Teks

// Mengubah teks konten (aman dari XSS)
                element.textContent = "Teks baru";
                // Mengubah HTML konten (hati-hati XSS)
                element.innerHTML = "<strong>HTML baru</strong>";
                // Mengubah nilai input
                inputElement.value = "Nilai baru";
         

Anda dapat mengubah teks atau HTML dari elemen:
  • textContent digunakan untuk mengubah teks secara aman dari potensi serangan XSS. Apa itu XSS (Cross-Site Scripting)?
    XSS adalah salah satu jenis serangan keamanan di web di mana penyerang menyisipkan skrip berbahaya ke dalam halaman web. Misalnya, jika kita menggunakan innerHTML tanpa memeriksa input pengguna, seseorang bisa memasukkan kode JavaScript berbahaya yang akan dijalankan di browser pengguna lain.
    Karena itu, saat hanya ingin menampilkan teks, gunakan textContent agar data ditampilkan apa adanya, tanpa dieksekusi sebagai kode.
  • innerHTML memungkinkan perubahan konten HTML, tetapi harus digunakan dengan hati-hati karena dapat menimbulkan risiko keamanan.
  • Nilai input dapat diubah menggunakan properti value, memungkinkan pembaruan konten form secara langsung.
2. Mengubah Atribut

// Mengubah atribut dengan setAttribute
                element.setAttribute("class", "new-class");
                element.setAttribute("data-custom", "value");
                element.setAttribute("href", "https://example.com");

                // Mengubah atribut langsung
                element.id = "new-id";
                element.className = "new-class";
                element.href = "https://example.com";
           

Atribut elemen juga dapat dimodifikasi:
  • Dengan setAttribute, Anda dapat menambahkan atau mengganti atribut seperti class, id, data-*, atau href.
  • Atribut tertentu juga bisa diubah langsung melalui properti elemen, misalnya element.id atau element.className.
3. Mengubah Style

// Mengubah style individual
                element.style.color = "red";
                element.style.backgroundColor = "blue";
                element.style.fontSize = "16px";
                element.style.display = "none";

                // Mengubah multiple styles
                element.style.cssText = "color: red; background: blue; font-size: 16px;";
            

Gaya elemen dapat diatur secara individual melalui properti seperti color, backgroundColor, fontSize, atau display.

Untuk mengubah banyak properti sekaligus, dapat digunakan cssText. Perlu diperhatikan bahwa penulisan properti CSS menggunakan **camelCase**, misalnya `backgroundColor` bukan `background-color`.

4. Mengubah Classes

// Menambah class
                element.classList.add("active");
                element.classList.add("highlight", "important");

                // Menghapus class
                element.classList.remove("inactive");
                element.classList.remove("highlight", "important");

                // Toggle class
                element.classList.toggle("active");

                // Cek apakah class ada
                if (element.classList.contains("active")) {
                console.log("Element has active class");
                }
            

Mengelola kelas elemen memungkinkan Anda menambahkan, menghapus, atau memeriksa keberadaan kelas:
  • classList.add() untuk menambah kelas.
  • classList.remove() untuk menghapus kelas.
  • classList.toggle() untuk menambahkan atau menghapus kelas secara otomatis.
  • classList.contains() untuk mengecek apakah suatu kelas ada pada elemen.
Dengan menguasai teknik-teknik ini, Anda dapat membuat halaman web yang tidak hanya menampilkan informasi, tetapi juga mampu bereaksi terhadap interaksi pengguna, menyesuaikan tampilan secara dinamis, dan meningkatkan pengalaman pengguna secara keseluruhan.

5.1.6 Menambah dan Menghapus Elemen

Selain memodifikasi konten dan atribut elemen, pengembangan web interaktif juga menuntut kemampuan untuk menambah dan menghapus elemen secara dinamis. Dengan kemampuan ini, halaman web dapat menyesuaikan tampilannya sesuai aksi pengguna atau kondisi tertentu, sehingga pengalaman pengguna menjadi lebih responsif dan fleksibel.

1. Membuat Elemen Baru

// Membuat elemen baru
                const newElement = document.createElement("div");
                newElement.textContent = "Elemen baru";
                newElement.className = "new-div";
                newElement.id = "unique-id";

                // Membuat elemen dengan atribut
                const link = document.createElement("a");
                link.href = "https://example.com";
                link.textContent = "Visit Example";
                link.target = "_blank";
            

JavaScript memungkinkan pembuatan elemen baru yang dapat diberi konten, atribut, dan kelas sesuai kebutuhan. Misalnya, Anda dapat membuat <div> baru dengan teks dan ID unik, atau membuat tautan <a> dengan URL tujuan dan target tertentu.

2. Menambah Elemen ke DOM

// Menambah di akhir parent
                parentElement.appendChild(newElement);
                // Menambah di awal parent
                parentElement.prepend(newElement);
                // Menambah di posisi tertentu
                parentElement.insertBefore(newElement, referenceElement);
                // Menambah setelah elemen tertentu
                referenceElement.insertAdjacentElement("afterend", newElement);
            

Setelah elemen dibuat, Anda dapat menambahkannya ke DOM menggunakan beberapa metode:
  • appendChild() : Menambahkan elemen di akhir parent.
  • prepend() : Menambahkan elemen di awal parent.
  • insertBefore() : Menambahkan elemen sebelum elemen tertentu.
  • insertAdjacentElement() : Menambahkan elemen di posisi relatif terhadap elemen lain, seperti setelah atau sebelum elemen tertentu.
3. Menghapus Elemen

// Menghapus elemen dari DOM
                element.remove();
                // Menghapus child dari parent
                parentElement.removeChild(childElement);
                // Menghapus semua children
                while (parentElement.firstChild) {
                parentElement.removeChild(parentElement.firstChild);
                }
            

JavaScript juga menyediakan metode untuk menghapus elemen dari DOM:
  • remove() : Menghapus elemen secara langsung.
  • removeChild() : Menghapus child tertentu dari parent.
    Menghapus seluruh children dari parent dapat dilakukan dengan perulangan hingga tidak ada child tersisa.
Dengan penguasaan teknik menambah dan menghapus elemen, Anda dapat membangun halaman web yang dinamis, di mana konten muncul, hilang, atau diperbarui sesuai interaksi pengguna. Kemampuan ini menjadi fondasi penting dalam membangun aplikasi web interaktif, mulai dari daftar tugas hingga sistem navigasi yang adaptif.

5.1.7 Kinerja DOM dan Uji Kecepatan Web (Performance & Speed Test)

Ukuran dan kompleksitas DOM (Document Object Model) tidak hanya memengaruhi struktur halaman, tetapi juga kinerja (performance) dan kecepatan interaksi pengguna di browser. Semakin besar DOM, semakin berat pekerjaan yang harus dilakukan browser untuk merender halaman dan menanggapi interaksi pengguna. Mari kita renungkan ketiga pertanyaan berikut ini:
  1. Bagaimana DOM yang besar memengaruhi performa?
  2. Bagaimana cara mengukur kecepatan dan ukuran DOM?
  3. Apa strategi teknis untuk meningkatkan performa situs?
Mari kita bahas jawaban dari pertanyaan tersebut satu per satu.

1. Dampak Ukuran DOM terhadap Kecepatan dan Interaktivitas

Browser harus “membaca” seluruh struktur DOM untuk menampilkan halaman ke layar. Setiap elemen tambahan (terutama elemen bertingkat dalam) akan menambah beban kerja browser. Akibatnya:
  • Waktu muat halaman meningkat.
    Browser membutuhkan waktu lebih lama untuk menyusun struktur, memproses CSS, dan menggambar elemen ke layar.
  • Interaksi menjadi lambat.
    Saat pengguna mengklik, menggulir, atau mengetik, browser perlu menghitung ulang tata letak (layout) dan gaya (style recalculation). Semakin besar DOM, semakin berat proses ini.
  • Peningkatan Interaction to Next Paint (INP).
    INP adalah metrik yang mengukur waktu dari interaksi pengguna hingga tampilan berikutnya muncul di layar. DOM yang besar dapat membuat INP lebih buruk karena browser sibuk memperbarui terlalu banyak elemen sekaligus.
Catatan:
  • Menurut audit Google Lighthouse, DOM dianggap besar jika melebihi 1.400 node, dan akan menampilkan peringatan jika sudah melewati 800 node.

2. Mengukur Ukuran dan Performa DOM

Ada beberapa cara untuk mengukur DOM dan performa rendering halaman:

A. Menggunakan Lighthouse (Chrome DevTools)
  1. Buka situs di Google Chrome.
  2. Tekan F12 → buka tab Lighthouse → jalankan audit “Performance”.


  3. Lihat hasil di bagian Diagnostik lalu cari “Avoid excessive DOM size”.


  4. Di sini kamu akan menemukan:
    Jumlah total elemen DOM,
    Elemen dengan jumlah anak terbanyak, dan
    Elemen terdalam di struktur DOM.
B. Menggunakan Konsol JavaScript

Anda juga bisa menghitung jumlah elemen DOM secara manual dengan perintah berikut:

document.querySelectorAll('*').length;

Perintah ini akan menampilkan jumlah seluruh elemen HTML di halaman yang sedang dibuka.

C. Memantau Kinerja secara Real-Time

Gunakan Performance Monitor di Chrome DevTools:
  1. Tekan Ctrl + Shift + P, lalu cari “Show Performance Monitor”.
  2. Aktifkan opsi seperti: DOM Nodes, Layout per second, Recalculate Style per second.
  3. Dengan memantau grafik ini, kamu dapat melihat hubungan antara ukuran DOM dan biaya rendering secara langsung.
Best Practice untuk Meningkatkan Performa DOM

Berikut beberapa strategi teknis yang terbukti efektif untuk menjaga DOM tetap ringan dan responsif:

a. Kurangi Kedalaman DOM

Hindari struktur yang terlalu dalam seperti ini:

<div>
  <div>
    <div>
      <div>Konten</div>
    </div>
  </div>
</div>

Struktur seperti ini sulit dirender dan mahal untuk dihitung ulang. Gunakan layout modern seperti Flexbox atau CSS Grid untuk mengurangi elemen pembungkus (wrapper) yang tidak perlu.

Latihan:

1. Coba buat dua versi halaman kecil di CodePen atau VS Code:
  • Versi pertama dengan struktur bertumpuk (seperti contoh di atas).
  • Versi kedua menggunakan Flexbox sederhana seperti berikut:
<div class="container">
  <div>Konten 1</div>
  <div>Konten 2</div>
</div>

Gunakan CSS:

.container {
  display: flex;
  gap: 10px;
}

2. Buka Developer Tools → Performance Tab, lalu perhatikan perbedaan waktu render keduanya.

Kesimpulan:
  • Yang dimanipulasi: struktur HTML (<div> yang berlebihan).
  • Yang berubah: performa render menjadi lebih cepat saat DOM lebih dangkal.
b. Gunakan Teknik Lazy Loading

Jika halaman memiliki banyak konten, tunda pemuatan elemen yang belum terlihat di layar. Misalnya, untuk gambar:

<img src="foto.jpg" loading="lazy" alt="Contoh Lazy Loading" />
            
Browser hanya akan memuat gambar ketika mendekati area tampilan pengguna, sehingga menghemat waktu render awal.

Latihan:

  • Coba tampilkan 10 gambar dalam satu halaman.
  • Aktifkan atribut `loading="lazy"` hanya pada setengah dari gambar tersebut.
  • Amati di Network Tab — gambar dengan lazy loading baru akan dimuat ketika di-scroll mendekati tampilan.
Kesimpulan:
  • Yang dimanipulasi: atribut HTML (loading).
  • Yang berubah: performa render menjadi lebih cepat saat DOM lebih dangkal.
c. Batasi Kompleksitas Selector CSS

Pemilih CSS yang terlalu spesifik seperti contoh di bawah akan memaksa browser menelusuri hierarki DOM lebih dalam.

/* Selektor sangat spesifik — browser harus menelusuri seluruh hierarki */
body div.container ul li a span {
  color: red;
  font-weight: bold;
}

Gunakan pemilih yang lebih sederhana dan gunakan class untuk menargetkan elemen secara efisien.

Latihan:

1. Buat dua file CSS:
  • Satu dengan selektor berantai panjang seperti di atas.
  • Satu lagi dengan versi sederhana, misalnya:
/* Selektor sederhana dan efisien */
.menu-item {
  color: blue;
  font-weight: bold;
}


2. Bandingkan kecepatan respon hover di browser.

Kesimpulan:
  • Yang dimanipulasi: selektor CSS yang mempengaruhi cara browser menelusuri DOM.
  • Yang berubah: efisiensi render tree dan kecepatan gaya diterapkan.
d. Gunakan Properti content-visibility

.section {
                content-visibility: auto;
                }
            
Properti CSS ini membuat elemen di luar layar tidak dirender hingga terlihat. Ini membantu mempercepat render awal dan mengurangi pekerjaan saat DOM diperbarui.

Latihan:
  • Buat halaman panjang dengan beberapa bagian .section.
  • Terapkan `content-visibility: auto`; pada bagian yang tidak langsung terlihat.
  • Amati bahwa browser hanya merender bagian yang muncul di layar.
Kesimpulan:
  • Yang dimanipulasi: properti CSS.
  • Yang berubah: jumlah elemen DOM yang dirender di awal, mempercepat initial load.
e. Gunakan Fragment dalam Framework Komponen

Jika menggunakan framework seperti React, Vue, atau Svelte, gunakan Fragment (`<>...`) agar tidak menambah elemen pembungkus ekstra yang memperdalam struktur DOM.

Biasanya, kita mungkin menulis seperti ini:

function App() {
  return (
    <div>
      <h1>Judul</h1>
      <p>Paragraf</p>
    </div>
  );
}

Perhatikan bahwa versi ini menambahkan satu elemen <div> ekstra ke dalam DOM.

Latihan:

Salin kode berikut ke file App.js:

function App() {
  return (
    <>
      <h1>Judul</h1>
      <p>Paragraf</p>
    </>
  );
}
export default App;

Kode di atas menggunakan Fragment (`<>...`), yaitu fitur React yang memungkinkan kita mengelompokkan beberapa elemen tanpa menambah tag pembungkus tambahan di struktur DOM.

Kesimpulan:
  • Yang dimanipulasi: Struktur Virtual DOM milik React. Fragment membantu mengatur komponen tanpa membuat elemen tambahan di Real DOM browser.
  • Yang berubah: Jumlah elemen aktual di DOM menjadi lebih sedikit, dengan begitu render halaman menjadi lebih ringan dan cepat.
f. Gunakan Pendekatan Aditif

Tambahkan elemen ke DOM hanya saat diperlukan. Misalnya, tampilkan daftar tambahan atau popup hanya ketika pengguna berinteraksi, bukan saat halaman dimuat pertama kali.

Latihan:

1. Buat tombol:

<button id="showList">Tampilkan Daftar</button>
<div id="listContainer"></div>

2. Tambahkan JavaScript:

document.getElementById("showList").addEventListener("click", () => {
  const listContainer = document.getElementById("listContainer");
  listContainer.innerHTML = "<ul><li>Item 1</li><li>Item 2</li></ul>";
});

3. Perhatikan bahwa elemen <ul> baru ditambahkan ke DOM hanya saat tombol diklik.

Kesimpulan:
  • Yang dimanipulasi: elemen HTML (innerHTML, createElement, appendChild).
  • Yang berubah: jumlah node di DOM, membuat halaman lebih efisien dan ringan.
4. Mengukur Respons Interaksi (INP dan Task Panjang)

Gunakan Performance Profiler di Chrome DevTools:
  • Buka tab Performance → klik tombol Record.
  • Lakukan interaksi seperti klik tombol atau input teks.
  • Hentikan perekaman untuk melihat timeline rendering.
Perhatikan:
  • Aktivitas Recalculate Style dan Layout → menunjukkan elemen yang terpengaruh.
  • Jika banyak elemen yang terlibat (ribuan), berarti DOM terlalu besar dan perlu dioptimalkan.
5. Uji Kecepatan Web

Untuk memastikan hasil optimasi berhasil, uji kecepatan situs menggunakan alat berikut:


Pertanyaan Reflektif

  • Mengapa DOM dianggap sebagai “jembatan” antara JavaScript dan HTML? Bagaimana peran DOM dalam membuat halaman web menjadi interaktif dibandingkan hanya menggunakan HTML dan CSS statis?
  • Jika Anda hanya menggunakan innerHTML untuk memodifikasi seluruh konten sebuah container, apa potensi risiko dan efek sampingnya terhadap interaktivitas dan keamanan halaman web? Bagaimana cara mengatasinya?
  • Dalam sebuah aplikasi To-Do List, bagaimana Anda dapat menambahkan fitur untuk menandai tugas sebagai selesai, menghapus tugas, dan menambah tugas baru, sambil tetap menjaga agar event listener berjalan dengan baik pada setiap elemen baru yang dibuat?
  • Perhatikan perbedaan antara HTMLCollection dan NodeList. Dalam situasi apa Anda lebih memilih menggunakan NodeList dibandingkan HTMLCollection, dan mengapa?
  • Bayangkan Anda membuat halaman web interaktif untuk toko online. Bagaimana Anda bisa memanfaatkan DOM manipulation untuk meningkatkan pengalaman pengguna, misalnya dalam menampilkan produk terbaru, filter pencarian, atau animasi interaktif?
  • Ketika memodifikasi DOM secara dinamis, bagaimana Anda memastikan perubahan yang dilakukan aman dari potensi XSS dan menjaga integritas data pengguna?
  • Setelah mempelajari cara mengakses, memodifikasi, menambah, dan menghapus elemen DOM, fitur interaktif apa yang paling ingin Anda implementasikan dalam proyek web Anda sendiri? Mengapa fitur tersebut penting?

Komentar

Posting Komentar