Permintaan Dokumen HTML DOMSelectorAll()
Contoh
Pilih semua elemen dengan class="example":
document.querySelectorAll(".example");
Lebih banyak contoh di bawah ini.
Definisi dan Penggunaan
Metode querySelectorAll()ini mengembalikan semua elemen yang cocok dengan pemilih CSS.
Metode querySelectorAll()mengembalikan NodeList .
Metode querySelectorAll()melempar pengecualian SYNTAX_ERR jika pemilih tidak valid
Tutorial:
Tutorial Daftar Node JavaScript
Metode QuerySelector:
Metode Elemen querySelectorAll()
Metode Dokumen querySelector()
Metode querySelectorAll() Dokumen
Metode GetElement:
Metode getElementById() Dokumen
Daftar Node/Koleksi HTML DOM HTML
Perbedaan Antara Koleksi HTML dan NodeList
NodeList dan HTMLCollection keduanya adalah kumpulan (daftar) node (elemen) seperti array yang diekstraksi dari dokumen. Node dapat diakses dengan nomor indeks. Indeks dimulai dari 0.
Kedua objek memiliki properti panjang yang mengembalikan jumlah elemen dalam daftar.
HTMLCollection adalah koleksi langsung : Jika Anda menambahkan elemen <li> ke daftar di DOM, daftar di HTMLCollection juga akan berubah.
NodeList adalah kumpulan statis : Jika Anda menambahkan elemen <li> ke daftar di DOM, daftar di NodeList tidak akan berubah.
Metode getElementsByClassName()and getElementsByTagName()
mengembalikan HTMLCollection.
Metode querySelector()and querySelectorAll()
mengembalikan NodeList.
Sintaksis
document.querySelectorAll(CSS selectors)
Parameter
| Parameter | Description |
| CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Nilai Kembali
| Jenis | Keterangan |
| Obyek | NodeList dengan elemen yang cocok dengan pemilih CSS. Jika tidak ada kecocokan yang ditemukan, nulldikembalikan. |
Lebih Banyak Contoh
Tambahkan warna latar belakang ke elemen <p> pertama:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
Tambahkan warna latar belakang ke elemen <p> pertama dengan class="example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
Jumlah elemen dengan class="contoh":
let numb = document.querySelectorAll(".example").length;
Atur warna latar belakang semua elemen dengan class="example":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Atur warna latar belakang semua elemen <p>:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Setel batas semua elemen <a> dengan atribut "target":
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
Setel warna latar belakang setiap elemen <p> di mana induknya adalah elemen <div>:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Atur warna latar belakang semua elemen <h3>, <div> dan <span>:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Dukungan Peramban
document.querySelectorAll()adalah fitur DOM Level 3 (2004).
Ini didukung penuh di semua browser:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |