JavaScript HTML DOM

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

HTML DOM (Model Objek Dokumen)

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

HTML DOM Model diorganisir dalamPohon objek:

Pohon DOM objek

Pohon DOM HTML

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

  • JavaScript dapat merubah semua elemen HTML di halaman
  • JavaScript dapat merubah semua atribut HTML di halaman
  • JavaScript dapat merubah 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 merespon semua event HTML yang sudah ada di halaman
  • JavaScript dapat membuat event HTML baru di halaman

Apa yang Anda akan belajar

Dalam bagian berikutnya dari tutorial ini, Anda akan belajar tentang:

  • Bagaimana cara merubah konten elemen HTML
  • Bagaimana merubah gaya elemen HTML (CSS)
  • Bagaimana merespon event DOM HTML
  • Bagaimana menambah dan menghapus elemen HTML

Apa itu DOM?

DOM adalah standar W3C (World Wide Web Consortium).

DOM mendefinisikan standar untuk mengakses dokumen:

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

Standar W3C DOM 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 Pemrograman. Ini mendefinisikan:

  • sebagaiObjekdari elemen HTML
  • untuk semua elemen HTMLProperti
  • mengakses semua elemen HTMLMetode
  • untuk semua elemen HTMLEvent

Artinya: DOM HTML adalah standar tentang bagaimana untuk mendapatkan, mengubah, menambah, atau menghapus elemen HTML.