Latest web development tutorials

HTML DOM querySelector () metode

Dokumen Referensi Object Document Object

contoh

Mendapatkan elemen pertama dari id dokumen = "demo" dari:

document.querySelector ( "# demo");

Coba »

Definisi dan Penggunaan

querySelector () metode mengembalikan sebuah elemen dalam dokumen yang cocok selector CSS yang ditentukan.

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

Lebih CSS penyeleksi, kunjungi 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

document.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 Document 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

Menjadi dokumen pertama dalam <p> elemen:

document.querySelector ( "p");

Coba »

contoh

Dapatkan kelas dokumen = "contoh" elemen pertama:

document.querySelector ( "misalnya.");

Coba »

contoh

Dapatkan kelas dokumen = "contoh" yang pertama <p> elemen:

document.querySelector ( "p.example");

Coba »

contoh

Dapatkan dokumen telah "target" atribut elemen <a> pertama:

document.querySelector ( "a [target]");

Coba »

contoh

Contoh berikut menunjukkan penggunaan sejumlah pemilih.

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

Pertama <h2> elemen dalam kode berikut akan menambahkan warna latar belakang dari dokumen:

<H2> Sebuah elemen h2 </ h2>
<H3> Sebuah elemen h3 </ h3>

document.querySelector ( "h2, h3") style.backgroundColor = "red" .;

Coba »

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

<H3> Sebuah elemen h3 </ h3>
<H2> Sebuah elemen h2 </ h2>

document.querySelector ( "h2, h3") style.backgroundColor = "red" .;

Coba »


Pages terkait

Referensi JavaScript: Elemen .querySelector ()


Dokumen Referensi Object Document Object