HTML DOM querySelectorAll() Method

Contoh

Mengatur warna latar belakang dari elemen pertama dengan class = "contoh" dalam sebuah <div> elemen:

// 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";

Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

The querySelectorAll() metode mengembalikan koleksi anak elemen elemen yang cocok dengan CSS ditentukan selector(s) , sebagai objek NodeList statis.

Objek NodeList merupakan kumpulan node. Node dapat diakses oleh angka indeks. indeks dimulai dari 0.

Tip: Anda dapat menggunakan panjang milik objek NodeList untuk menentukan jumlah node anak yang cocok dengan pemilih tertentu, maka Anda dapat loop melalui semua node dan ekstrak info yang Anda inginkan.

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

Dukungan Browser

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

metode
querySelectorAll()	4.0	9.0	3,5	3.2	10,0

Catatan: Internet Explorer 8 memiliki dukungan untuk penyeleksi CSS2. IE9 dan versi memiliki dukungan untuk CSS3 juga.

Sintaksis

element .querySelectorAll( CSS selectors )

Nilai parameter

Parameter	Mengetik	Deskripsi
CSS selectors	String	Wajib. Menentukan satu atau lebih CSS untuk mencocokkan elemen. Ini digunakan untuk memilih elemen HTML berdasarkan mereka id, kelas, jenis, atribut, nilai atribut, dll Untuk beberapa penyeleksi, memisahkan setiap pemilih dengan koma. Tip: Untuk daftar semua CSS Selectors, melihat kami CSS Selectors Referensi .

Rincian teknis

DOM Versi:	Tingkat penyeleksi 1 Document Object
Kembali Nilai:	Sebuah objek NodeList, mewakili semua unsur keturunan elemen saat yang cocok dengan CSS yang ditentukan selector(s) . NodeList adalah kumpulan statis, yang berarti bahwa perubahan dalam DOM memiliki NO efek dalam koleksi. Catatan: Melempar pengecualian SYNTAX_ERR jika ditentukan selector(s) tidak valid

Contoh lebih

Contoh

Dapatkan semua <p> elemen di dalam <div> elemen, dan mengatur warna latar belakang dari pertama <p> elemen (index 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";

Cobalah sendiri "

Contoh

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

// 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";

Cobalah sendiri "

Contoh

Cari tahu berapa banyak elemen dengan class = "contoh" ada dalam <div> elemen (menggunakan properti panjang 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;

Cobalah sendiri "

Contoh

Mengatur warna latar belakang dari semua elemen dengan class = "contoh" dalam <div> elemen:

// 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";
}

Cobalah sendiri "

Contoh

Mengatur warna latar belakang dari semua <p> elemen dalam <div> elemen:

// 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";
}

Cobalah sendiri "

Contoh

Mengatur gaya perbatasan semua <a> elemen dalam <div> elemen yang memiliki "target" atribut:

// 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";
}

Cobalah sendiri "

Contoh

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

// 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";
}

Cobalah sendiri "