HTML DOM querySelector() Method

Contoh

Mengubah teks dari elemen anak pertama dengan class = "contoh" dalam <div> elemen:

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

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

The querySelector() metode mengembalikan elemen anak pertama yang cocok dengan CSS yang ditentukan selector(s) dari suatu unsur.

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

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

element .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 Elemen Object
Kembali Nilai:	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

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

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

Cobalah sendiri "

Contoh

Mengubah teks pertama <p> elemen dengan class = "contoh" dalam <div> elemen:

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

Cobalah sendiri "

Contoh

Mengubah teks dari elemen dengan id = "demo" dalam <div> elemen:

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

Cobalah sendiri "

Contoh

Tambahkan perbatasan merah untuk pertama <a> elemen yang memiliki atribut target di dalam <div> elemen:

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

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 <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";

Cobalah sendiri "

Namun, jika <h3> elemen ditempatkan sebelum <h2> elemen dalam <div> . The <h3> elemen adalah salah satu 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";

Cobalah sendiri "