Metode querySelectorAll() Dokument DOM HTML

Definisi dan penggunaan

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

querySelectorAll() Method mengembalikan NodeList.

Jika pemilihan selector tidak sah, maka querySelectorAll() Method 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 bagi elemen <p> pertama:

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

Coba sendiri

Contoh 3

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

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

Coba sendiri

Contoh 4

Jumlah elemen dengan class="example":

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

Coba sendiri

Contoh 5

Tetapkan warna latar belakang bagi semua elemen dengan 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 bagi 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 bagi 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 bagi setiap elemen <p> yang menjadi elemen anak <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 bagi 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

diperlukan. Satu atau beberapa pemilih CSS.

Pemilih CSS menentukan elemen HTML berdasarkan id, kelas, tipe, atribut, nilai atribut, dll.

Untuk daftar lengkap, kunjungi Panduan Pemilihan Pilih 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 mengandung elemen yang cocok dengan pemilih CSS.

Jika tidak ditemukan cocok, maka mengembalikan objek NodeList kosong.

Perbedaan antara HTMLCollection dan NodeList

NodeList dan HTMLcollection sama seperti itu.

keduanya adalah koleksi yang serupa dengan array yang diambil dari node (elemen) yang sama dari dokumen. Nod dapat diakses melalui indeks (bawah).

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

HTMLCollection adalahElemen dokumenkumpulan.

NodeList adalahNod dokumenkumpulan (nod elemen, nod atribut dan nod teks).

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

Item NodeList hanya dapat diakses melalui indeks mereka.

HTMLCollection selaluNyatakumpulan.

Contoh: Jika elemen <li> ditambahkan ke dalam senarai DOM, senarai di HTMLCollection juga akan berubah.

NodeList biasanyaStatiskumpulan.

Contoh: Jika elemen <li> ditambahkan ke dalam senarai DOM, senarai di NodeList tidak akan berubah.

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

querySelectorAll() Metode mengembalikan NodeList statis.

childNodes Atribut mengembalikan NodeList yang nyata.

Pemungutan Bantuan Pelayar

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

Semua pelayar mendukungnya:

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

Halaman Berkenaan

Maklumat Amalan:

Pemilihan Pilih CSS

Panduan Pemilihan Pilih CSS

Maklumat Amalan NodeList JavaScript

Cara Kerja QuerySelector:

Cara Kerja querySelector() Element

Cara Kerja querySelectorAll() Element

Cara Kerja querySelector() Document

Cara Kerja querySelectorAll() Document

Cara Kerja GetElement:

Cara Kerja getElementById() Document

Cara Kerja getElementsByTagName() Document

Cara Kerja getElementsByClassName() Document