Metode querySelector() Document DOM HTML

Definisi dan penggunaan

querySelector() Method kembalikan elemen yang cocok dengan pemilih CSSPertamaelemen.

Untuk kembalikanSemuacocokan (tidak hanya cocokan pertama), gunakan querySelectorAll() untuk menggantinya.

Jika pemilih tidak valid, maka querySelector() dan querySelectorAll() akan melempar SYNTAX_ERR Eksepsi.

Contoh

Contoh 1

Ambil elemen <p> pertama:

document.querySelector("p");

Coba sendiri

Contoh 2

Ambil elemen pertama dengan class="example":

document.querySelector(".example");

Coba sendiri

Contoh 3

Ambil elemen <p> pertama dengan class="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 parent 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, class, tipe, atribut, nilai atribut, dan sebagainya.

Untuk daftar lengkap, kunjungi Panduan Pemilihan Pustaka CSS.

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

Nilai kembalian

Tipe Deskripsi
Objek

NodeList yang mengandung elemen pertama yang cocok dengan pemilih CSS.

Jika tidak ditemukan cocokan, maka kembalikan null.

Perbedaan antara HTMLCollection dan NodeList

NodeList dan HTMLcollection sama sekali

Kedua-duanya adalah koleksi seperti daftar (list) dari node (elemen) yang diambil dari dokumen. Node dapat diakses melalui indeks (index). Indeks dimulai dari 0.

Kedua-duanya panjang Atribut, yang mengembalikan jumlah elemen (koleksi) dalam daftar.

HTMLCollection adalahElemen Dokumenkoleksi.

NodeList adalahNode Dokumenkoleksi (node elemen, node atribut, dan node teks).

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

Item NodeList hanya dapat diakses melalui indeks mereka.

HTMLCollection selaluNyatakoleksi.

contoh: jika menambahkan elemen <li> ke dalam daftar di DOM, daftar di HTMLCollection juga akan berubah.

NodeList biasanyaStatikkoleksi.

contoh: jika menambahkan elemen <li> ke dalam daftar di DOM, daftar di NodeList tidak akan berubah.

getElementsByClassName() dan getElementsByTagName() Metode-metode semua mengembalikan HTMLCollection yang nyata.

querySelectorAll() Metode mengembalikan NodeList statis.

childNodes Atribut mengembalikan NodeList yang nyata.

Dukungan Peramban

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

Semua peramban mendukungnya:

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

Halaman-ralat

Panduan:

Pemilihan Pustaka CSS

Panduan Pemilihan Pustaka CSS

Panduan Pustaka NodeList DOM HTML

Metode QuerySelector:

Metode querySelector():

Metode querySelectorAll():

Metode GetElement:

Metode getElementById()

Metode getElementsByTagName()

Metode getElementsByClassName()