Metode querySelectorAll() Dokument DOM HTML

Definisi dan penggunaan

querySelectorAll() Metode ini mengembalikan semua elemen yang cocok dengan selector CSS.

querySelectorAll() Metode ini mengembalikan NodeList.

Jika pemilihan selector tidak valid, maka querySelectorAll() Metode ini akan melemparkan SYNTAX_ERR Kesalahan.

Contoh

Contoh 1

Pilih semua elemen yang memiliki class="example":

document.querySelectorAll(".example");

Coba sendiri

Contoh 2

Tambahkan warna latar belakang ke elemen <p> pertama:

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

Coba sendiri

Contoh 3

Tambahkan warna latar belakang ke elemen <p> pertama class="example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

Coba sendiri

Contoh 4

Jumlah elemen class="example":

let numb = document.querySelectorAll(".example").length;

Coba sendiri

Contoh 5

Setel warna latar belakang semua elemen class="example":

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Coba sendiri

Contoh 6

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

Coba sendiri

Contoh 7

Atur garis bingkai semua elemen <a> yang menggunakan atribut "target":

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

Coba sendiri

Contoh 8

Atur warna latar belakang semua elemen <p> yang adalah elemen anak dari <div>:

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Coba sendiri

Contoh 9

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

Coba sendiri

Sintaks

document.querySelectorAll(CSSselectors)

Parameter

Parameter Deskripsi
CSSselectors

Wajib. Satu atau beberapa pemilih CSS.

Pemilih CSS menentukan elemen HTML berdasarkan id, class, tipe, atribut, dan nilai atribut lainnya.

Untuk daftar lengkap, kunjungi Panduan Pemilihan Pustaka CSS.

Untuk pemilihan beberapa selector, gunakan tanda koma untuk memisahkan setiap selector (lihat contoh di atas).

Nilai yang diembalikan

Tipe Deskripsi
Objek

Objek NodeList yang berisi elemen yang cocok dengan pemilih CSS.

Jika tidak ditemukan yang cocok, maka akan mengembalikan objek NodeList kosong.

Perbedaan antara HTMLCollection dan NodeList

NodeList dan HTMLcollection sama seperti itu.

keduanya adalah kumpulan yang mirip dengan array yang diambil dari node (elemen) yang sama dari dokumen. Node dapat diakses melalui indeks (angka). Indeks dimulai dari 0.

keduanya length properti yang mengembalikan jumlah elemen dalam daftar (koleksi).

HTMLCollection adalahelemen dokumenkelompok.

NodeList adalahNode Dokumenkelompok (node element, node atribut, dan node teks).

Item HTMLCollection dapat diakses melalui nama, id, atau indeks mereka.

Item NodeList hanya dapat diakses melalui indeks mereka.

HTMLCollection selaluNyatakelompok.

Contoh: Jika menambahkan elemen <li> ke dalam daftar DOM, daftar di HTMLCollection juga berubah.

NodeList biasanyaStatikkelompok.

Contoh: Jika menambahkan elemen <li> ke dalam daftar DOM, daftar di NodeList tidak berubah.

getElementsByClassName() dan getElementsByTagName() Metode yang kembali mengembalikan HTMLCollection yang nyata.

querySelectorAll() Metode mengembalikan NodeList statis.

childNodes Properti mengembalikan NodeList yang nyata.

Dukungan Peramban

document.querySelectorAll() Adalah fitur DOM Level 3 (2004).

Semua peramban mendukungnya:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan

Halaman- halaman Terkait

Panduan:

Pemilihan Pustaka CSS

Panduan Pemilihan Pustaka CSS

Panduan NodeList JavaScript

Metode QuerySelector:

Metode querySelector() Element

Metode querySelectorAll() Element

Metode querySelector() Document

Metode querySelectorAll() Document

Metode GetElement:

Metode getElementById() Document

Metode getElementsByTagName() Document

Metode getElementsByClassName() Document