Metoden carian HTML DOM Element querySelectorAll()

Definisi dan penggunaan

querySelectorAll() Metode ini mengembalikan kumpulan elemen anak yang cocok dengan pemilih CSS, dalam bentuk objek NodeList statis.

NodeList

NodeList adalah kumpulan node seperti 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:

Sintaks CSS

Pemilihan Pemilihan CSS

Panduan Pemilihan Pemilihan CSS

Contoh

Contoh 1

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

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

Coba Sendiri

Petunjuk:Lebih banyak contoh disediakan di bawah halaman.

Sintaks

element.querySelectorAll(cssSelectors)

Param

Param Deskripsi
cssSelectors

Diperlukan. String. Menentukan satu atau lebih pemilih CSS untuk mencocokkan elemen.

Pemilih CSS digunakan untuk memilih elemen HTML berdasarkan id, class, tipe, atribut, nilai atribut, dll.

Untuk pemilih yang berbagai macam, pisahkan masing-masing pemilih dengan koma.

Petunjuk:Untuk daftar lengkap pemilih CSS, lihat Panduan Pemilihan Pemilihan CSS.

Detil teknis

Nilai kembalian:

Objek NodeList merepresentasikan semua elemen turunan saat ini yang cocok dengan pemilih CSS.

NodeList adalah kumpulan statis, yang berarti perubahan di DOM tidak mempengaruhi kumpulan ini.

Perhatian:Jika pemilih yang ditentukan tidak valid, luncurkan eksepsi SYNTAX_ERR
Versi DOM: Dokumen Objek Pemilih Level 1

Lebih banyak contoh

Contoh 2

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

// 获取 id="myDIV" 的元素（div），然后获取 div 内的所有 p 个元素
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// Atur warna latar belakang elemen <p> pertama (indeks 0) di dalam div
x[0].style.backgroundColor = "red";

Coba Sendiri

Contoh 3

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

// 获取 id="myDIV" 的元素（div），然后在 div 中获取所有具有 class="example" 的 p 元素
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// 设置 div 中 class="example" 的第一个 <p> 元素 (index 0) 的背景颜色
x[0].style.backgroundColor = "red";

Coba Sendiri

例子 4

找出 <div> 元素中有多少带有 class="example" 的元素（使用 NodeList 对象的 length 属性）：

/* 获取 id="myDIV" 的元素（div），然后获取 div 内所有 class="example" 的 p 元素，返回找到的元素个数 */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Coba Sendiri

例子 5

设置 <div> 元素中 class="example" 的所有元素的背景颜色：

// 获取 id="myDIV" 的元素（ div），然后在 div 中获取所有 class="example" 的元素
var x = document.getElementById("myDIV").querySelectorAll(".example");
// 创建 for 循环并设置 div 中所有 class="example" 元素的背景色
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Coba Sendiri

例子 6

设置 <div> 元素中所有 <p> 元素的背景颜色：

// 获取 id="myDIV" 的元素（div），然后获取 div 内的所有 p 个元素
var x = document.getElementById("myDIV").querySelectorAll("p");
// 创建 for 循环并设置 div 中所有 p 元素的背景颜色
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Coba Sendiri

例子 7

设置 <div> 元素中所有设置 target 属性的 <a> 元素的边框样式：

// 获取 id="myDIV" 的元素（ div），然后在 div 中获取所有具有 "target" 属性的 <a> 元素
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Membuat for loop dan menetapkan garisan tepi bagi semua elemen <a> dengan sifat target
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Coba Sendiri

Contoh 8

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

// Mengambil elemen dengan id="myDIV" (div), lalu mengambil semua elemen <h2>, <div> dan <span> di dalam <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Membuat for loop dan menetapkan warna latar belakang bagi 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 Pemetaan

Angka dalam tabel menunjukkan versi pereka paling awal yang menyokong kaedah 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 menyokong pemilih CSS2. IE9 dan versi yang lebih tinggi masih menyokong CSS3.

Halaman-Relasi

Panduan CSS:Pemilihan Pemilihan CSS

Panduan CSS:Panduan Pemilihan Pemilihan CSS

Panduan JavaScript:JavaScript HTML DOM Node List

Panduan JavaScript:element.querySelector()

Panduan HTML DOM:document.querySelectorAll()