Smart Sintesa

Working Smart Together

Manipulasi DOM dengan JavaScript

Tujuan Pembelajaran

  • Santri dapat memahami dan menggunakan metode untuk seleksi elemen DOM seperti getElementById, getElementsByClassName, dan querySelector.
  • Santri dapat menangani berbagai jenis event dengan metode addEventListener dan memahami cara kerja event seperti click, mouseover, dan submit.
  • Santri dapat mengubah konten dan gaya elemen DOM menggunakan properti innerText, innerHTML, dan style serta menambah atribut dan class pada elemen.

1. Seleksi Elemen DOM

  • Penggunaan metode seperti getElementById, getElementsByClassName, dan querySelector
  • Cara memilih elemen berdasarkan tag, class, dan id
  • Contoh penggunaan selektor untuk mengambil dan mengubah elemen DOM

2. Event Handling

  • Penggunaan metode addEventListener untuk menambahkan event listener pada elemen
  • Pengertian berbagai jenis event seperti click, mouseover, dan submit
  • Contoh penanganan event untuk merespons interaksi pengguna

3. Pengubahan Konten dan Gaya dengan JavaScript

  • Cara mengubah teks dan HTML dalam elemen dengan innerText dan innerHTML
  • Penggunaan style property untuk memodifikasi gaya elemen secara dinamis
  • Contoh pengubahan atribut dan penambahan class dengan JavaScript