querySelectorAll

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

Fungsi querySelectorAll() mengembalikan kumpulan semua elemen yang cocok dengan selektor mirip CSS, serupa dengan querySelector, tetapi memungkinkan kamu mengambil semua elemen yang cocok sekaligus.

const elements = document.querySelectorAll(".other");

Contoh di atas mengambil semua elemen dengan nama class other.

Tantangan

Mudah

Kamu diberi kode HTML yang berisi dua span.

Hanya menggunakan JavaScript, ubah styling semua elemen menggunakan fungsi querySelectorAll:

backgroundColor menjadi "pink"
border menjadi "1px solid red"

Coba sendiri

<!DOCTYPE html>
<html>
    <body>
        <span class="error">Error 1</span>
        <span class="error">Error 2</span>
        <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 getElementsByTagName querySelector

3Method DOM II

querySelectorAlladdEventListener innerHTML createElement and appendChild classList toggle

Latihan sendiri: Playground Web