Tutorial DOM JavaScript dengan Contoh

Daftar Isi:

Anonim

Apa itu DOM di JavaScript?

JavaScript dapat mengakses semua elemen di halaman web menggunakan Document Object Model (DOM). Faktanya, browser web membuat DOM dari halaman web saat halaman dimuat. Model DOM dibuat sebagai pohon objek seperti ini:

Cara menggunakan DOM dan Acara

Menggunakan DOM, JavaScript dapat melakukan banyak tugas. Itu dapat membuat elemen dan atribut baru, mengubah elemen dan atribut yang ada dan bahkan menghapus elemen dan atribut yang ada. JavaScript juga dapat bereaksi terhadap acara yang ada dan membuat acara baru di halaman.

getElementById, Contoh innerHTML

  1. getElementById: Untuk mengakses elemen dan atribut yang idnya disetel.
  2. innerHTML: Untuk mengakses konten sebuah elemen.

Coba Contoh ini sendiri:

 DOM !!! 

Selamat Datang


Ini adalah pesan selamat datang.



Teknologi


Ini adalah bagian teknologi.

Contoh penanganan kejadian

  1. createElement: Untuk membuat elemen baru
  2. removeChild: Hapus elemen
  3. Anda dapat menambahkan event handler ke elemen tertentu seperti ini:
 document.getElementById(id).onclick=function(){lines of code to be executed}

ATAU

document.getElementById(id).addEventListener("click", functionname)

Coba Contoh ini sendiri:

 DOM !!!