querySelector

Pelajaran 8 dari 13 dalam kursus Metode DOM JavaScript di Coddy.

Fungsi querySelector() memilih elemen pertama yang cocok dengan pemilih mirip CSS yang canggih, sehingga memberikan fleksibilitas lebih besar daripada method sebelumnya untuk memilih elemen yang kompleks. Contoh:

const button = document.querySelector("#btn");

Beginilah cara kita mengakses elemen button dengan id btn.

Tantangan

Mudah

Kamu diberi kode HTML yang berisi sebuah tombol.

Hanya menggunakan JavaScript,

Ambil elemen menggunakan fungsi querySelector.
Ubah backgroundColor menjadi red menggunakan property style.
Ubah color menjadi white menggunakan property style.

Coba sendiri

<!DOCTYPE html>
<html>
    <body>
        <button id="myButton">Click Me</button>
        <script src="script.js"></script>
    </body>
</html>

Semua pelajaran di Metode DOM JavaScript

1Pengantar

Pengantar Document Object Model

2Metode DOM I

getElementById Ubah Gaya Elemen getElementsByClassName Telusuri dan Manipulasi getElementsByTagNamequerySelector

3Method DOM II

querySelectorAll addEventListener innerHTML createElement and appendChild classList toggle

Latihan sendiri: Playground Web