Metode HTML DOM querySelector()

Contoh

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

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

Lebih banyak contoh "Coba Sendiri" di bawah ini.

Definisi dan Penggunaan

Metode querySelector() mengembalikan elemen anak pertama yang cocok dengan pemilih CSS tertentu dari suatu elemen.

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

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

Dukungan Peramban

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

Method
querySelector()	4.0	8.0	3.5	3.2	10.0

Sintaksis

element.querySelector(CSS selectors)

Nilai Parameter

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Detail Teknis

Versi DOM:	Objek Elemen Selector Level 1
Nilai Kembali:	Elemen pertama yang cocok dengan pemilih CSS yang ditentukan. Jika tidak ada kecocokan yang ditemukan, null dikembalikan. Melempar pengecualian SYNTAX_ERR jika pemilih yang ditentukan tidak valid.

Lebih Banyak Contoh

Contoh

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

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

Contoh

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

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

Contoh

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

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

Contoh

Tambahkan batas merah ke elemen <a> pertama yang memiliki atribut target di dalam elemen <div>:

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

Contoh

Contoh ini menunjukkan cara kerja beberapa penyeleksi.

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

Kode berikut akan menambahkan warna latar belakang ke elemen <h2> pertama di <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";

Namun, jika elemen <h3> ditempatkan sebelum elemen <h2> di <div>. Elemen <h3> adalah elemen yang akan mendapatkan warna latar belakang 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";