Metode querySelectorAll() HTML DOM

Contoh

Setel warna latar belakang elemen pertama dengan class="example" di dalam elemen <div>:

// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Lebih banyak contoh "Coba Sendiri" di bawah ini.

Definisi dan Penggunaan

Metode querySelectorAll() mengembalikan kumpulan elemen anak elemen yang cocok dengan pemilih CSS tertentu, sebagai objek NodeList statis.

Objek NodeList mewakili kumpulan node. Node dapat diakses dengan nomor indeks. Indeks dimulai dari 0.

Tip: Anda bisa menggunakan properti length dari objek NodeList untuk menentukan jumlah node anak yang cocok dengan pemilih yang ditentukan, lalu Anda bisa mengulang semua node dan mengekstrak info yang Anda inginkan.

Untuk informasi lebih lanjut tentang Pemilih CSS, kunjungi Tutorial Pemilih CSS dan Referensi Pemilih CSS kami .

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

Catatan: Internet Explorer 8 memiliki dukungan untuk pemilih CSS2. IE9 dan versi yang lebih baru memiliki dukungan untuk CSS3 juga.

Sintaksis

element.querySelectorAll(CSS selectors)

Nilai Parameter

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Detail Teknis

Versi DOM:	Objek Dokumen Selector Level 1
Nilai Kembali:	Objek NodeList, mewakili semua elemen turunan dari elemen saat ini yang cocok dengan pemilih CSS tertentu. NodeList adalah koleksi statis, artinya perubahan di DOM TIDAK berpengaruh pada koleksi. Catatan: Melempar pengecualian SYNTAX_ERR jika pemilih yang ditentukan tidak valid

Lebih Banyak Contoh

Contoh

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

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red";

Contoh

Dapatkan semua elemen <p> dalam <div> dengan class="example", dan atur latar belakang elemen <p> pertama:

// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Contoh

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

/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Contoh

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

// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Create a for loop and set the background color of all elements with class="example" in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Contoh

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

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Contoh

Setel gaya batas semua elemen <a> dalam elemen <div> yang memiliki atribut "target":

// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");

// Create a for loop and set the border of all <a> elements with a target attribute in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}

Contoh

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

// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");

// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}