Metode querySelector() DOM HTML Element

Definisi dan penggunaan

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

Perhatian:

querySelector() Metode hanya mengembalikan elemen yang cocok dengan selector yang ditentukan.Untuk mengembalikan semua cocokan, gunakan Metode querySelectorAll().

Lihat juga:

Panduan Referensi:

Atribut classList

Atribut className

Metode querySelectorAll()

Metode getElementsByTagName()

Metode getElementsByClassName()

Objek Style HTML DOM

Tutorial:

Sintaks CSS

Pemilih CSS

Referensi Pemilih CSS

Contoh

Contoh 1

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

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

Coba Sendiri

Halaman di bawah ini menyediakan contoh lainnya.

Sintaks

element.querySelector(CSSselectors)

Parameter

Parameter Deskripsi
CSSselectors

Wajib. String. Tentukan satu atau beberapa selector CSS untuk cocokkan elemen.

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

Untuk beberapa selector, pisahkan masing-masing selector dengan koma.

Elemen yang kembali didasarkan pada elemen yang pertama kali ditemukan di dokumen (lihat "Beberapa contoh lainnya" di bawah).

Petunjuk:Untuk daftar penuh selector CSS, lihat Referensi Pemilih CSS.

Detil teknis

Nilai kembalian:

cocokkan elemen pertama yang ditentukan dengan selector CSS.

Jika tidak ada yang cocok, akan kembalikan null.

Jika selector yang ditentukan tidak valid, akan terjadi eksepsi SYNTAX_ERR.
Versi DOM: Objek Element Level 1 Selector

Beberapa contoh lainnya

Contoh 2

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

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

Coba Sendiri

Contoh 3

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

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

Coba Sendiri

Contoh 4

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

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

Coba Sendiri

Contoh 5

Menambahkan garis bungkus merah untuk elemen <a> yang pertama dalam <div> dengan setting atribut target:

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

Coba Sendiri

Contoh 6

Contoh ini menunjukkan bagaimana beberapa selector bekerja.

Dassarkan Anda memiliki dua elemen: elemen <h2> dan elemen <h3>.

Berikut adalah kode yang akan menambahkan warna latar untuk elemen <h2> pertama di dalam <div>:

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

Coba Sendiri

Contoh 7

Namun, jika elemen <h3> di dalam <div> ditempatkan sebelum elemen <h2>, elemen <h3> akan mendapatkan latar belakang berwarna merah.

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

Coba Sendiri

Dukungan Browser

Angka di tabel menunjukkan versi browser yang mendukung metode ini penuh.

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

Halaman Terkait

Panduan CSS:Pemilih CSS

Panduan Referensi CSS:Referensi Pemilih CSS

Panduan JavaScript:Daftar Node List JavaScript HTML DOM

Panduan Referensi JavaScript:document.querySelector()

Panduan Referensi JavaScript:element.querySelectorAll()

Panduan Referensi HTML DOM:document.querySelectorAll()