JavaScript HTML DOM

Melalui HTML DOM, JavaScript dapat mengakses dan mengubah semua elemen dokumen HTML.

HTML DOM (Model Objek Dokumen)

Ketika halaman di muat, peramban akan membuat model objek dokumen halaman (Document Object Model).

HTML DOM Model distrukturisasikanPohon objek:

Pohon DOM objek

Tumbuhan DOM HTML

Dengan model objek ini, JavaScript mendapatkan semua kekuatan untuk membuat HTML dinamis:

  • JavaScript dapat mengubah semua elemen HTML di halaman
  • JavaScript dapat mengubah semua atribut HTML di halaman
  • JavaScript dapat mengubah semua gaya CSS di halaman
  • JavaScript dapat menghapus elemen HTML dan atribut yang sudah ada
  • JavaScript dapat menambahkan elemen HTML dan atribut baru
  • JavaScript dapat berinteraksi dengan semua acara HTML yang sudah ada di halaman
  • JavaScript dapat membuat acara HTML baru di halaman

Apa yang anda akan belajar

Dalam bab-bab di bawah ini, anda akan belajar:

  • Bagaimana untuk mengubah kandungan HTML elemen
  • Bagaimana mengubah gaya elemen HTML (CSS)
  • Bagaimana berrespon terhadap acara DOM HTML
  • Bagaimana menambah dan menghapus elemen HTML

Apa itu DOM？

DOM adalah standar W3C (World Wide Web Consortium).

DOM mendefinisikan standar akses:

“W3C Document Object Model (DOM) adalah antarmuka yang independen dari platform dan bahasa, yang memungkinkan program dan skrip mengakses, memperbarui konten, struktur, dan gaya dokumen secara dinamis.”

Standard DOM W3C dibagi menjadi 3 bagian yang berbeda：

  • Core DOM - Model Standar untuk semua jenis dokumen
  • DOM XML - Model Standar Dokumen XML
  • DOM HTML - Model Standar Dokumen HTML

Apa itu DOM HTML？

DOM HTML adalah standar HTMLObjekModel danAntarmuka Peraturan Program。它定义了：

  • SebagaiObjekelemen HTML
  • Semua elemen HTMLProperti
  • Akses ke semua elemen HTMLMetode
  • Semua elemen HTMLAcara

Artinya: DOM HTML adalah standar tentang bagaimana mengambil, mengubah, menambah, atau menghapus elemen HTML。