QuerySelector Dokumen DOM HTML ()
Contoh
Dapatkan elemen <p> pertama:
document.querySelector("p");
Dapatkan elemen pertama dengan class="example":
document.querySelector(".example");
Lebih banyak contoh di bawah ini.
Definisi dan Penggunaan
Metode querySelector()mengembalikan elemen pertama yang cocok dengan pemilih CSS.
Untuk mengembalikan semua kecocokan (bukan hanya yang pertama), gunakan sebagai querySelectorAll()gantinya.
Keduanya querySelector()dan querySelectorAll()mengembalikan NodeList .
Keduanya querySelector()dan querySelectorAll()melempar pengecualian SYNTAX_ERR jika pemilih tidak valid.
Tutorial:
Tutorial Daftar Node JavaScript
Metode QuerySelector:
Metode Elemen querySelectorAll()
Metode querySelector() Dokumen
Metode querySelectorAll() Dokumen
Metode GetElement:
Metode getElementById() Dokumen
Daftar Node/Koleksi HTML DOM HTML
Perbedaan Antara Koleksi HTML dan NodeList
NodeList dan HTMLCollection keduanya adalah kumpulan (daftar) node (elemen) seperti array yang diekstraksi dari dokumen. Node dapat diakses dengan nomor indeks. Indeks dimulai dari 0.
Kedua objek memiliki properti panjang yang mengembalikan jumlah elemen dalam daftar.
HTMLCollection adalah koleksi langsung : Jika Anda menambahkan elemen <li> ke daftar di DOM, daftar di HTMLCollection juga akan berubah.
NodeList adalah kumpulan statis : Jika Anda menambahkan elemen <li> ke daftar di DOM, daftar di NodeList tidak akan berubah.
Metode getElementsByClassName()and getElementsByTagName()
mengembalikan HTMLCollection.
Metode querySelector()and querySelectorAll()
mengembalikan NodeList.
Sintaksis
document.querySelector(CSS selectors)
Parameter
| Parameter | Description |
| CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Nilai Kembali
| Jenis | Keterangan |
| Obyek | NodeList dengan elemen pertama yang cocok dengan pemilih CSS . Jika tidak ada kecocokan yang ditemukan, nulldikembalikan. |
Lebih Banyak Contoh
Dapatkan elemen <p> pertama dengan class="example":
document.querySelector("p.example");
Ubah teks elemen dengan id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Pilih elemen <p> pertama dengan induknya adalah elemen <div>.
document.querySelector("div > p");
Pilih elemen <a> pertama yang memiliki atribut "target":
document.querySelector("a[target]");
Pilih <h3> pertama atau <h4> pertama:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Pilih <h3> pertama atau <h4> pertama:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Dukungan Peramban
document.querySelector() adalah fitur DOM Level 1 (1998).
Ini didukung penuh di semua browser:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |