Metode querySelectorAll() DOM HTML Element

Definisi dan penggunaan

querySelectorAll() Metode mengembalikan kumpulan turunan elemen yang cocok dengan pemilihan CSS, dalam bentuk NodeList objek statis

NodeList

NodeList adalah kumpulan node yang mirip dengan array (daftar)

Node dalam daftar dapat diakses melalui indeks (index). Indeks dimulai dari 0

Atribut length dapat mengembalikan jumlah node dalam daftar

Lihat pula:

Panduan referensi:

Atribut classList

Atribut className

Metode querySelector()

Metode getElementsByTagName()

Metode getElementsByClassName()

Objek Style HTML DOM

Panduan:

Syarat CSS

Pemilih CSS

Referensi Pemilih CSS

Contoh

Contoh 1

Atur warna latar belakang elemen pertama class="example" dalam elemen <div>:

// Ambil elemen id="myDIV" (div), lalu ambil semua elemen dalam div class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// Atur warna latar belakang elemen pertama class="example" (indeks 0) dalam div
x[0].style.backgroundColor = "red";

Coba Sendiri

Panduan:Beberapa contoh lainnya disediakan di bawah halaman

Sintaks

element.querySelectorAll(cssSelectors)

Parameter

Parameter Deskripsi
cssSelectors

Diperlukan. String. Tentukan satu atau beberapa pemilihan CSS untuk mencocokkan elemen

Pemilihan pemilihan CSS digunakan untuk memilih elemen HTML berdasarkan id, class, tipe, atribut, nilai atribut, dll

Untuk pemilihan pemilihan yang berbagai, pisahkan masing-masing pemilihan dengan koma

Panduan:Daftar semua pemilihan CSS, lihat di Referensi Pemilih CSS.

Detil teknis

Nilai kembalian:

Objek NodeList mewakili semua turunan elemen yang cocok dengan pemilihan CSS yang ditentukan

NodeList adalah kumpulan statis, yang berarti perubahan dalam DOM tidak mempengaruhi kumpulan

Perhatian:Jika pemilihan pemilihan yang ditentukan tak berlaku, maka terjadi eksepsi SYNTAX_ERR
Versi DOM: Dokumen Selectors Level 1 Document Object

Beberapa contoh lainnya

Contoh 2

Mengambil semua elemen <p> dalam elemen <div>, dan atur warna latar belakang elemen <p> pertama (indeks 0):

// Mendapatkan elemen (div) dengan id="myDIV" dan lakukan get all elemen p di dalam div
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// Atur warna latar belakang elemen <p> pertama (indeks 0) dalam div
x[0].style.backgroundColor = "red";

Coba Sendiri

Contoh 3

Mengambil semua elemen <p> yang berclass="example" dalam <div>, dan atur latar belakang elemen <p> pertama:

// Mendapatkan elemen (div) dengan id="myDIV" dan lakukan get all elemen p class="example" di dalam div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Setel warna latar belakang untuk elemen <p> pertama class="example" di dalam div (indeks 0)
x[0].style.backgroundColor = "red";

Coba Sendiri

Contoh 4

Cari berapa banyak elemen yang memiliki class="example" di dalam elemen <div> (menggunakan properti length dari NodeList objek):

/* Mendapatkan elemen (div) dengan id="myDIV" dan lakukan get all elemen p class="example" di dalam div, kembalikan jumlah elemen yang ditemukan */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Coba Sendiri

Contoh 5

Setel warna latar belakang untuk semua elemen class="example" di dalam elemen <div>:

// Mendapatkan elemen (div) dengan id="myDIV" dan lakukan get all elemen class="example" di dalam div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Buat perulangan for dan atur warna latar belakang untuk semua elemen class="example" di dalam div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Coba Sendiri

Contoh 6

Setel warna latar belakang untuk semua elemen <p> di dalam elemen <div>:

// Mendapatkan elemen (div) dengan id="myDIV" dan lakukan get all elemen p di dalam div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Buat perulangan for dan atur warna latar belakang untuk semua elemen p di dalam div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Coba Sendiri

Contoh 7

Setel gaya border untuk semua <a> elemen yang memiliki atribut target di dalam elemen <div>:

// Mendapatkan elemen (div) dengan id="myDIV" dan lakukan get all <a> elemen yang memiliki atribut "target" di dalam div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Buat perulangan for dan atur border semua elemen <a> dengan atribut target di dalam div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Coba Sendiri

Contoh 8

Atur warna latar belakang semua elemen <h2>, <div>, dan <span> di dalam <div>:

// Ambil elemen dengan id="myDIV" (div) dan ambil semua elemen <h2>, <div>, dan <span> di dalam <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Buat perulangan for dan atur warna latar belakang semua elemen <h2>, <div>, dan <span> di dalam <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Coba Sendiri

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung metode ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

Perhatian:Internet Explorer 8 mendukung pemilih CSS2. IE9 dan versi yang lebih tinggi mendukung CSS3.

Halaman yang Berhubungan

Panduan CSS:Pemilih CSS

Panduan Referensi CSS:Referensi Pemilih CSS

Panduan JavaScript:Daftar Node List HTML DOM JavaScript

Panduan Referensi JavaScript:element.querySelector()

Panduan Referensi HTML DOM:document.querySelectorAll()