HTML DOM querySelector () metode

contoh

Elemen anak pertama modifikasi konten teks id = "demo" dari elemen <div>:

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

Definisi dan Penggunaan

querySelector () metode mengembalikan elemen yang cocok ditentukan CSS selector elemen anak pertama.

Catatan: Metode querySelector () hanya mengembalikan elemen pertama yang cocok dengan pemilih yang ditentukan. Jika Anda ingin mengembalikan semua elemen yang cocok, menggunakan metode querySelectorAll () sebagai gantinya.

Untuk CSS lebih, Anda dapat mengunjungi kami CSS tutorial dan kami CSS referensi pengguna .

Dukungan Browser

Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi metode.

cara
querySelector ()	4.0	8,0	3.5	3.1	10,0

tatabahasa

Unsur .querySelector (CSS)

Nilai parameter

parameter	jenis	deskripsi
CSS	tali	Harus. Tentukan satu atau lebih elemen yang cocok dalam CSS. Anda dapat menggunakan id mereka, kelas, jenis, atribut, nilai atribut, dll untuk memilih elemen. Untuk beberapa penyeleksi, dipisahkan dengan koma, untuk kembali elemen yang cocok. Tip: Untuk CSS lebih lanjut, silakan lihat kami CSS referensi pengguna .

rincian teknis

Versi DOM:	Tingkat penyeleksi 1 Elemen Object
Pengembalian:	Elemen pertama yang cocok ditentukan pemilih CSS. Jika tidak ditemukan, kembali null. Jika Anda menentukan pemilih SYNTAX_ERR pengecualian yang tidak valid dibuang.

contoh yang lebih

contoh

Memodifikasi <div> elemen dalam konten pertama <p> elemen:

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

Coba »

contoh

Memodifikasi <div> elemen di kelas pertama = "contoh" isi sub-elemen:

var x = document.getElementById ( "myDiv");
x.querySelector ( "misalnya.") innerHTML = "Hello World!" .;

Coba »

contoh

Memodifikasi <div> elemen dalam pertama class = "contoh" dari <p> elemen:

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

Coba »

contoh

Tambahkan perbatasan merah sebagai elemen <div> memiliki elemen target atribut pertama <a>:

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

Coba »

contoh

Contoh berikut menunjukkan penggunaan sejumlah pemilih.

Misalkan Anda memilih dua penyeleksi: <h2> dan <h3> elemen.

Pertama <h2> elemen untuk kode berikut <div> elemen untuk menambahkan warna latar belakang:

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

Coba »

Namun, jika elemen <div> <h3> elemen <h2> elemen sebelumnya, <h3> elemen akan ditetapkan untuk menentukan warna latar belakang.

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

Coba »