Metod carian DOM Element querySelector()

Definisi dan penggunaan

querySelector() Metode mengembalikan anak pertama yang cocok dengan pemilihan CSS dari elemen.

Perhatian:

querySelector() Metode hanya mengembalikan elemen yang cocok dengan pemilihan yang diberikan. Untuk mengembalikan semua pilihan yang cocok, gunakan Metode querySelectorAll().

Lihat juga:

Panduan Referensi:

Atribut classList

Atribut className

Metode querySelectorAll()

Metode getElementsByTagName()

Metode getElementsByClassName()

Objek Style HTML DOM

Tutorial:

Syarat CSS

Pemilihan Pemilihan CSS

Panduan Rujukan Pemilihan Pemilihan CSS

Contoh

Contoh 1

Tukar teks elemen pertama anak dengan class="example" di dalam elemen <div>:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

Cuba Sendiri

Lebih banyak contoh disediakan di bawah halaman.

Sintaks

element.querySelector(CSSselectors)

Parameter

Parameter Deskripsi
CSSselectors

Wajib. String. Tentukan satu atau beberapa pemilihan CSS untuk mencocokkan elemen.

Pemilihan CSS digunakan untuk memilih elemen HTML berdasarkan id, class, tipe, atribut, nilai atribut, dll.

Untuk pemilihan yang berbagai, pisahkan masing-masing pemilihan dengan koma.

Elemen yang dikembalikan bergantung pada elemen yang pertama kali ditemui dalam dokumen (lihat di bawah "Lebih banyak contoh").

Petunjuk:Untuk daftar penuh pemilihan CSS, lihat Panduan Rujukan Pemilihan Pemilihan CSS.

Detil teknis

Nilai kembalian:

cocokkan elemen pertama yang disesuaikan dengan pemilihan CSS.

Jika tak menemui pilihan yang cocok, akan mengembalikan null.

Jika pemilihan pilihan yang diberikan tak sah, akan melempar eksepsi SYNTAX_ERR.
Versi DOM: Objek Element Level 1 Selector

Lebih banyak contoh

Contoh 2

Tukar teks elemen pertama <p> di dalam elemen <div>:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

Cuba Sendiri

Contoh 3

Tukar teks elemen pertama <p> dengan class="example" di dalam elemen <div>:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

Cuba Sendiri

Contoh 4

Tukar teks elemen <div> dengan id="demo":

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

Cuba Sendiri

Contoh 5

Tambahkan garisan merah 10px berayun kepada elemen <a> pertama yang menset atribut target di dalam elemen <div>.

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

Cuba Sendiri

Contoh 6

Contoh ini menunjukkan bagaimana beberapa pilihan pemilihan bekerja.

Dipercayai anda ada dua elemen: elemen <h2> dan elemen <h3>.

Kod berikut akan menambah warna latar belakang kepada elemen <h2> pertama di dalam <div>:

<div id="myDIV">
  <h2>Sebuah elemen h2</h2>
  <h3>Sebuah elemen h3</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Cuba Sendiri

Contoh 7

Namun, jika elemen <h3> di dalam <div> diletakkan sebelum elemen <h2>, elemen <h3> akan mendapat warna latar belakang merah.

<div id="myDIV">
  <h3>Sebuah elemen h3</h3>
  <h2>Sebuah elemen h2</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Cuba Sendiri

Pendukung Pemetaan

Nombor di dalam tabel menunjukkan versi paling awal penuh yang mendukung kaedah ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

Halaman-ralat

Panduan CSS:Pemilihan Pemilihan CSS

Panduan CSS:Panduan Rujukan Pemilihan Pemilihan CSS

Panduan JavaScript:JavaScript HTML DOM Node List

Panduan JavaScript:document.querySelector()

Panduan JavaScript:element.querySelectorAll()

Panduan HTML DOM:document.querySelectorAll()