DOM Manipulation JavaScript

📌 Elements

💡 Fundamental DOM

DOM (Document Object Model) adalah representasi struktur halaman web yang memungkinkan JavaScript mengubah konten, struktur, dan style secara dinamis.

dom-manipulation.js

          
            // Mendapatkan elemen

            const header = document.getElementById('header');

            const buttons = document.querySelectorAll('.btn');

            // Mengubah konten

            header.textContent = 'Judul Baru';

            header.innerHTML = '<span>Judul</span> Baru';

            // Mengubah style

            header.style.color = '#9333ea';

            header.style.fontSize = '2.5rem';

📝 Penjelasan Detail:

• getElementById() - Memilih elemen berdasarkan ID
• querySelector() - Memilih elemen pertama yang cocok dengan selector CSS
• querySelectorAll() - Memilih semua elemen yang cocok
• textContent - Mengubah teks dalam elemen
• innerHTML - Mengubah HTML dalam elemen

🛠️ Features

dom-features.js

          
            // Membuat elemen baru

            const newDiv = document.createElement('div');

            newDiv.className = 'card';

            newDiv.textContent = 'Kartu Baru';

            // Menambahkan ke DOM

            document.body.appendChild(newDiv);

            // Event listeners

            buttons.forEach(btn => {

              btn.addEventListener('click', e => {

                console.log('Tombol diklik!');

              });

            });

            // Manipulasi class

            header.classList.add('active');

            header.classList.remove('hidden');

            header.classList.toggle('dark-mode');

ℹ️ Browser Support

Semua metode DOM dasar didukung oleh semua browser modern. Beberapa fitur baru seperti classList didukung sejak IE10+.

📊 Basic Tables

Method	Description	Example
`getElementById()`	Memilih elemen berdasarkan ID	`document.getElementById('header')`
`querySelector()`	Memilih elemen pertama yang cocok	`document.querySelector('.btn')`
`querySelectorAll()`	Memilih semua elemen yang cocok	`document.querySelectorAll('p')`
`createElement()`	Membuat elemen baru	`document.createElement('div')`
`appendChild()`	Menambahkan elemen anak	`parent.appendChild(child)`

📝 Penjelasan Detail:

• getElementById - Paling cepat untuk memilih elemen dengan ID
• querySelector - Fleksibel dengan sintaks CSS selector
• querySelectorAll - Mengembalikan NodeList (bukan Array)
• createElement - Membuat elemen tapi belum ditambahkan ke DOM
• appendChild - Menambahkan elemen ke akhir parent

🚀 Advanced Table

Property/Method	Description	Use Case
`classList`	Manipulasi class CSS	element.classList.add('active')
`dataset`	Akses data attributes	element.dataset.userId
`closest()`	Mencari parent terdekat	element.closest('.container')
`matches()`	Memeriksa kecocokan selector	element.matches('button.active')
`insertAdjacentHTML()`	Menambahkan HTML secara fleksibel	element.insertAdjacentHTML('beforeend', html)

ℹ️ Performance Notes

Untuk manipulasi DOM yang kompleks, gunakan DocumentFragment untuk meminimalkan reflow. Event delegation lebih efisien untuk banyak elemen.

💡 Pro Tips

🎯 Best Practices

Gunakan event delegation untuk elemen dinamis, minimalkan manipulasi DOM langsung, dan cache referensi elemen yang sering digunakan.

best-practices.js

          
            // ✅ Good - Event delegation

            document.addEventListener('click', e => {

              if (e.target.matches('.btn')) {

                // Handle button click

              }

            });

            // ✅ Good - Caching elements

            const header = document.getElementById('header');

            const buttons = document.querySelectorAll('.btn');

            // ❌ Avoid - Inline event handlers

            <button onclick="handleClick()">Click</button>

            // ❌ Avoid - Frequent DOM updates

            for (let i = 0; i < 1000; i++) {

              document.body.appendChild(document.createElement('div'));

            }

📝 Penjelasan Detail:

• Event delegation - Lebih efisien untuk elemen dinamis
• Cache references - Hindari query DOM berulang
• Batch updates - Gunakan DocumentFragment untuk banyak perubahan
• Debounce events - Untuk scroll/resize yang sering terjadi
• Virtual DOM - Pertimbangkan untuk aplikasi kompleks

🌐 Info

📚 Referensi Tambahan

Pelajari lebih lanjut tentang DOM Manipulation di MDN Web Docs atau buku-buku JavaScript modern seperti "Eloquent JavaScript".

⚙️ Modern Alternatives

Untuk aplikasi kompleks, pertimbangkan library seperti React, Vue, atau Angular yang menggunakan Virtual DOM untuk performa lebih baik.