Apa itu DOM HTML?
DOM HTML adalah Model Objek untuk HTML . Ini mendefinisikan:
- Elemen HTML sebagai objek
- Properti untuk semua elemen HTML
- Metode untuk semua elemen HTML
- Acara untuk semua elemen HTML
DOM HTML adalah API ( Antarmuka Pemrograman) untuk JavaScript :
- JavaScript dapat menambah/mengubah/menghapus elemen HTML
- JavaScript dapat menambah/mengubah/menghapus atribut HTML
- JavaScript dapat menambah/mengubah/menghapus gaya CSS
- JavaScript dapat bereaksi terhadap peristiwa HTML
- JavaScript dapat menambah/mengubah/menghapus acara HTML
HTML DOM (Model Objek Dokumen)
Saat halaman web dimuat, browser membuat Model Objek Dokumen dari halaman tersebut .
Model DOM HTML dibangun sebagai pohon Objects :
Pohon Objek HTML DOM
Menemukan Elemen HTML
Saat Anda ingin mengakses elemen HTML dengan JavaScript, Anda harus menemukan elemennya terlebih dahulu.
Ada banyak cara melakukan ini:
- Menemukan elemen HTML dengan id
- Menemukan elemen HTML dengan nama tag
- Menemukan elemen HTML dengan nama kelas
- Menemukan elemen HTML dengan pemilih CSS
- Menemukan elemen HTML dengan koleksi objek HTML
Menemukan Elemen HTML dengan Id
Cara termudah untuk menemukan elemen HTML di DOM, adalah dengan menggunakan id elemen.
Contoh ini menemukan elemen dengan id="intro":
Contoh
var myElement = document.getElementById("intro");
Jika elemen ditemukan, metode akan mengembalikan elemen sebagai objek (di myElement).
Jika elemen tidak ditemukan, myElement akan berisi null.
Menemukan Elemen HTML dengan Nama Tag
Contoh ini menemukan semua elemen <p>:
Contoh
var x = document.getElementsByTagName("p");
Contoh ini menemukan elemen dengan id="main", dan kemudian menemukan semua <p> elemen di dalam "main":
Contoh
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Menemukan Elemen HTML berdasarkan Nama Kelas
Jika Anda ingin menemukan semua elemen HTML dengan nama kelas yang sama, gunakan getElementsByClassName().
Contoh ini mengembalikan daftar semua elemen dengan class="intro".
Contoh
var x = document.getElementsByClassName("intro");
Menemukan elemen menurut nama kelas tidak berfungsi di Internet Explorer 8 dan versi sebelumnya.
Menemukan Elemen HTML dengan Pemilih CSS
Jika Anda ingin menemukan semua elemen HTML yang cocok dengan pemilih CSS tertentu (id, nama kelas, tipe, atribut, nilai atribut, dll), gunakan metode querySelectorAll().
Contoh ini mengembalikan daftar semua elemen <p> dengan class="intro".
Contoh
var x = document.querySelectorAll("p.intro");
Metode querySelectorAll() tidak berfungsi di Internet Explorer 8 dan versi sebelumnya.
Menemukan Elemen HTML dengan Koleksi Objek HTML
Koleksi objek HTML juga dapat diakses:
Tutorial HTML DOM
Tutorial HTMLDOM Lengkap
Ini adalah pengenalan singkat tentang HTMLDOM.
Untuk tutorial HTMLDOM lengkap, buka Tutorial HTMLDOM W3Schools .