Metode querySelector() Dokumen DOM HTML

Definisi dan penggunaan

querySelector() Metode mengembalikan elemen yang cocok dengan pemilih CSSPertamaelemen.

Untuk kembalikanSemuapenemuan yang cocok (tidak hanya penemuan pertama yang cocok), gunakan querySelectorAll().

Jika pemilih tidak sah, maka querySelector() dan querySelectorAll() akan melemparkan SYNTAX_ERR Eksesi

Contoh

Contoh 1

Dapatkan elemen <p> pertama:

document.querySelector("p");

Coba sendiri

Contoh 2

Dapatkan elemen pertama dengan kelas="example":

document.querySelector(".example");

Coba sendiri

Contoh 3

Dapatkan elemen <p> pertama dengan kelas="example":

document.querySelector("p.example");

Coba sendiri

Contoh 4

Ubah teks elemen dengan id="demo":

document.querySelector("#demo").innerHTML = "Hello World!";

Coba sendiri

Contoh 5

Pilih elemen <p> pertama yang memiliki induk elemen <div>:

document.querySelector("div > p");

Coba sendiri

Contoh 6

Pilih elemen <a> pertama yang memiliki atribut "target":

document.querySelector("a[target]");

Coba sendiri

Contoh 7

Pilih pertama <h3> atau pertama <h4>:

<h3>Sebuah elemen h3</h3>
<h4>Sebuah elemen h4</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

Coba sendiri

Contoh 8

Pilih pertama <h3> atau pertama <h4>:

<h4>Sebuah elemen h4</h4>
<h3>Sebuah elemen h3</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

Coba sendiri

Sintaks

document.querySelector(cssSelectors)

Parameter

Parameter Deskripsi
cssSelectors

Wajib. Satu atau beberapa pemilih CSS.

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

Untuk daftar lengkap, kunjungi Panduan Pemilihan Pemilih CSS.

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

Kembalian nilai

Tipe Deskripsi
Objek

NodeList yang mengandung elemen pertama yang cocok dengan pemilih CSS.

Jika tiada penemuan yang padan, akan kembalikan null.

Perbezaan antara HTMLCollection dan NodeList

NodeList dan HTMLcollection Sama seperti.

Kedua-duanya adalah seperti kumpulan yang diambil dari dokumen (elemen) yang serupa dengan array (daftar). Nod dapat diakses melalui indeks (tanda). Indeks bermula dari 0.

Kedua-duanya length Atribut, ia mengembalikan bilangan elemen dalam senarai (kumpulan).

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 selalu adalahNyatakumpulan.

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

NodeList biasanyaStatikkumpulan.

Contoh: Jika <li> elemen ditambah ke senarai DOM, senarai NodeList akan berubah.

getElementsByClassName() dan getElementsByTagName() Semua metode mengembalikan HTMLCollection yang nyata.

querySelectorAll() Metode mengembalikan NodeList statik.

childNodes Atribut mengembalikan NodeList yang nyata.

Pemungutan bantuan pelayar

document.querySelector() Adalah ciri DOM Level 1 (1998).

Semua pelayar mendukung ia：

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

Halaman- halaman yang berkaitan

Maklumat Buku Panduan：

Pemilihan Pemilih CSS

Panduan Pemilihan Pemilih CSS

Panduan Referensi NodeList DOM HTML

QuerySelector 方法：

querySelector() 方法

querySelectorAll() 方法

GetElement 方法：

Cara mengambil elemen dengan getElementById()

Cara mengambil elemen dengan getElementsByTagName()

Cara mengambil elemen dengan getElementsByClassName()