MEMILIH ELEMEN - DOM

Memilih elemen adalah operasi utama dalam pemrograman dengan Document Object Model (DOM) di JavaScript. Operasi ini mirip dengan cara kita menunjuk suatu objek di dunia nyata. Dengan JavaScript, kamu dapat “menunjuk” dan berinteraksi dengan elemen-elemen HTML di halaman web.

Memilih elemen menggunakan id

Cara termudah untuk memilih elemen adalah dengan id. Setiap elemen HTML dapat memiliki atribut id yang unik. JavaScript menyediakan metode getElementById yang dapat digunakan untuk memilih suatu elemen berdasarkan id.

let elem = document.getElementById("myId");

Memilih elemen menggunakan class

JavaScript juga memungkinkan kamu untuk memilih elemen berdasarkan class. Dalam hal ini, kita menggunakan metode getElementsByClassName. Metode ini akan mengembalikan seluruh elemen yang memiliki nama class yang sama dalam bentuk HTMLCollection.

let elems = document.getElementsByClassName("myClass");

Memilih elemen menggunakan nama tag

Kamu juga dapat memilih elemen berdasarkan tag. Misalnya, kamu bisa memilih semua elemen p yang mewakili paragraf teks di halaman web.

let elems = document.getElementsByTagName("p");

Memilih elemen menggunakan selektor CSS

Untuk kasus yang lebih kompleks, kamu bisa menggunakan metode querySelector dan querySelectorAll. Kedua metode ini memungkinkan kamu untuk memilih elemen berdasarkan selektor CSS.

let elem = document.querySelector(".myClass");
let elems = document.querySelectorAll(".myClass");

Method querySelector akan mengembalikan elemen pertama yang cocok dengan selektor CSS sementara querySelectorAll akan mengembalikan NodeList dari semua elemen yang cocok dengan selektor.

Belajar memilih elemen HTML dengan JavaScript adalah langkah penting untuk menjadi seorang web developer. Dengan memilih elemen, kamu dapat membaca dan merubah isi dari elemen tersebut, memanipulasi atribut, dan menjalankan sebuah aksi berdasarkan event yang terjadi pada elemen tersebut.