Memahami HTML DOM (Document Object Model)

- Posted in HTML by - Permalink

HTML DOM (Document Object Model) adalah representasi struktural dari dokumen HTML yang memungkinkan kita untuk mengakses dan mengubah elemen-elemen HTML menggunakan bahasa pemrograman seperti JavaScript. DOM merepresentasikan dokumen HTML sebagai sebuah struktur pohon, di mana setiap elemen dalam dokumen direpresentasikan sebagai objek dalam pohon tersebut.

Struktur Dasar DOM

DOM terdiri dari beberapa bagian utama:

  1. Node: Setiap elemen, atribut, dan teks dalam dokumen direpresentasikan sebagai node dalam pohon DOM.
  2. Elemen: Merepresentasikan elemen-elemen HTML seperti <div>, <p>, <a>, dan sebagainya.
  3. Atribut: Merepresentasikan atribut dari elemen HTML.
  4. Teks: Merepresentasikan teks dalam elemen HTML.
  5. Komponen Lain: Seperti komentar, dokumen, dan lain-lain.

Cara Implementasi HTML DOM

Untuk mengimplementasikan HTML DOM, biasanya menggunakan JavaScript. Berikut adalah langkah-langkah dasar dalam menggunakan DOM:

Mengakses Elemen

Untuk mengakses elemen HTML menggunakan DOM, gunakan metode document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName(), atau document.querySelector() untuk memilih elemen berdasarkan ID, kelas, tag, atau selector CSS.

Contoh:

// Mengambil elemen berdasarkan ID
let elem = document.getElementById('elemenId');

// Mengambil elemen berdasarkan kelas
let elems = document.getElementsByClassName('namaKelas');

// Mengambil elemen berdasarkan tag
let elems = document.getElementsByTagName('tag');

// Mengambil elemen berdasarkan selector CSS
let elem = document.querySelector('selectorCSS');

Manipulasi Elemen

Setelah mengakses elemen, Anda dapat memanipulasi properti dan isi dari elemen tersebut.

Contoh:

// Mengubah teks dalam elemen
elem.innerText = 'Teks baru';

// Menambahkan kelas baru ke elemen
elem.classList.add('kelasBaru');

// Menyembunyikan elemen
elem.style.display = 'none';

Menanggapi Peristiwa

DOM juga memungkinkan Anda untuk menanggapi peristiwa seperti klik, mouse over, dan lain-lain menggunakan event listener.

Contoh:

// Menambahkan event listener untuk mengubah teks saat diklik
elem.addEventListener('click', function() {
    elem.innerText = 'Teks telah diubah';
});

Memanipulasi Struktur DOM

Anda dapat menambahkan, menghapus, atau mengubah elemen dalam dokumen menggunakan metode DOM.

Contoh:

// Menambahkan elemen baru
let newElem = document.createElement('div');
newElem.innerText = 'Elemen baru';
document.body.appendChild(newElem);

// Menghapus elemen
elem.parentNode.removeChild(elem);

Kesimpulan

HTML DOM adalah cara yang kuat untuk berinteraksi dengan elemen-elemen HTML dalam dokumen web menggunakan JavaScript. Dengan memahami struktur dan cara kerja DOM, Anda dapat mengontrol dan memanipulasi halaman web secara dinamis, membuatnya responsif terhadap interaksi pengguna dan perubahan data.

Tags: