HTML DOM querySelector() Method

Contoh

Dapatkan elemen pertama dalam dokumen dengan class = "contoh":

document.querySelector(".example");

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

The querySelector() metode mengembalikan elemen pertama yang cocok dengan CSS yang ditentukan selector(s) dalam dokumen.

Catatan: querySelector() metode hanya mengembalikan elemen pertama yang cocok dengan pemilih tertentu. Untuk mengembalikan semua pertandingan, gunakan querySelectorAll() metode sebagai gantinya.

Jika pemilih cocok dengan ID dalam dokumen yang digunakan beberapa kali (Perhatikan bahwa "id" harus unik dalam suatu halaman dan tidak harus digunakan lebih dari sekali), ia mengembalikan elemen pertama yang cocok.

Untuk informasi lebih lanjut tentang CSS Selectors, kunjungi CSS Selectors Tutorial dan kami CSS Selectors Referensi .

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

metode
querySelector()	4.0	8,0	3,5	3.2	10,0

Sintaksis

document.querySelector( CSS selectors )

Nilai parameter

Parameter	Mengetik	Deskripsi
CSS selectors	String	Wajib. Menentukan satu atau lebih CSS untuk mencocokkan elemen. Ini digunakan untuk memilih elemen HTML berdasarkan mereka id, kelas, jenis, atribut, nilai atribut, dll Untuk beberapa penyeleksi, memisahkan setiap pemilih dengan koma. Unsur kembali tergantung pada elemen yang pertama kali ditemukan dalam dokumen (See "More Examples") . Tip: Untuk daftar semua CSS Selectors, melihat kami CSS Selectors Referensi .

Rincian teknis

DOM Versi:	Tingkat penyeleksi 1 Document Object
Kembali Nilai:	Sebuah objek NodeList, mewakili elemen pertama yang cocok dengan CSS yang ditentukan selector(s) . Jika tidak ada pertandingan yang ditemukan, null dikembalikan. Melempar pengecualian SYNTAX_ERR jika ditentukan selector(s) tidak valid.

Contoh lebih

Contoh

Dapatkan pertama <p> elemen dalam dokumen:

document.querySelector("p");

Cobalah sendiri "

Contoh

Dapatkan pertama <p> elemen dalam dokumen dengan class = "contoh":

document.querySelector("p.example");

Cobalah sendiri "

Contoh

Mengubah teks dari elemen dengan id = "demo":

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

Cobalah sendiri "

Contoh

Dapatkan pertama <p> elemen dalam dokumen mana orang tua adalah <div> elemen.

document.querySelector("div > p");

Cobalah sendiri "

Contoh

Dapatkan pertama <a> elemen dalam dokumen yang memiliki "target" atribut:

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

Cobalah sendiri "

Contoh

Contoh ini menunjukkan bagaimana beberapa penyeleksi bekerja.

Asumsikan bahwa Anda memiliki dua elemen: a <h2> dan <h3> elemen.

Kode berikut akan menambahkan warna latar belakang untuk pertama <h2> elemen dalam dokumen:

<h2>A h2 element</h2>
<h3>A h3 element</h3>

document.querySelector("h2, h3").style.backgroundColor = "red";

Cobalah sendiri "

Namun, jika <h3> elemen ditempatkan sebelum <h2> elemen dalam dokumen. The <h3> elemen adalah salah satu yang akan mendapatkan warna latar belakang merah.

<h3>A h3 element</h3>
<h2>A h2 element</h2>

document.querySelector("h2, h3").style.backgroundColor = "red";

Cobalah sendiri "