Metode - metode JavaScript Untuk Manipulasi DOM

Metode - metode JavaScript Untuk Manipulasi DOM Part 1

Sebagai seorang pengembang web, kalian mungkin sering melakukan manipulasi DOM, dimana model objek yang digunakan oleh browser menentukan struktur logika halaman web. Kita tahu bahwa HTML menentukan struktur DOM default. Namun ada banyak kasus kalian mungkin ingin memanipulasi dengan JavaScript, biasanya untuk menambah fungsionalitas terhadap situs web.

Pada artike ini, saya akan menjelaskan Metode - metode JavaScript Untuk Manipulasi DOM. Nah kalian mungkin akan sering menggunakan metode ini dalam pengembangan sebuah web. Berikut Metode - metode JavaScript Untuk Manipulasi DOM yang bisa kalian gunakan:

1. querySelector()
Metode querySelector() merupakan metode yang akan mengembalikan elemen pertama yang cocok dengan satu atau lebih selector pada CSS. Jika tidak ditemukan selector yang cocok maka akan mengembalikan nol.

Sebelum querySelector() diperkenalkan, pengembang banyak menggunakan metode getElementById() yang mengambil elemen dengan nilai id yang telah ditentukan.

Meskipun getElementById() masih merupakan metode yang bermanfaat, akan tetapi dengan adanya metode querySelector() dan querySelectorAll() yang lebih baru, maka kita bisa bebas untuk menargetkan elemen berdasarkan selector CSS apa pun, sehingga lebih flexibel dalam penggunaan nya.

Contoh Kode
Dalam contoh ini, <div> pertama dipilih dengan metode querySelector() dan warnanya berubah menjadi hijau.

2. querySelectorAll()
Selanjutnya adalah querySelectorAll(), tidak seperti querySelector() yang hanya mengembalikan instance pertama dari semua elemen yang cocok, querySelectorAll() akan mengembalikan semua elemen yang cocok dengan selector CSS yang telah ditentukan. Elemen yang cocok akan dikembalikan sebagai objek NodeList yang akan menjadi objek kosong jika tidak ada elemen yang cocok ditemukan.

Contoh Kode
Semua paragraf dipilih dengan querySelectorAll(), dan berwarna kuning.

3. addEventListener ()
Event ini merujuk pada apa yang akan terjadi pada elemen HTML, misalnya mengklik, memfokuskan, atau meload. dengan event ini kita dapat menetapkan fungsi JS untuk melakukan sesuatu ketika Event tersebut terjadi.

Metode addEventListener() mempunyai beberapa kelebihan, salah satunya adalah standar terbaru - memungkinkan penugasan lebih dari satu fungsi dan dilengkapi dengan serangkaian opsi yang bermanfaat.

Contoh Kode

Nah, itulah beberapa diatas Metode - metode JavaScript Untuk Manipulasi DOM, namun jangan metode diatas belum semua metode saya jelaskan masih banyak metode yang akan nanti saya jelaskan, jadi tetap ikuti terus artike dumetschool. Baik saya cukup untuk pembahasan kali ini, semoga bermanfaat :)