querySelector DOM HTML dan Fungsinya
Method querySelector() DOM pada HTML digunakan untuk mengembalikan elemen pertama yang bersesuaian dengan CSS spesifik selector(s) pada dokumen.
Catatan: method querySelector() DOM hanya mengembalikan elemen pertama yang bersesuaian dengan selektor spesifik. Untuk mengembalikan nilai yang semuanya bersesuaian, maka dapat digunakan method querySelectorAll().
Sintak:
element.querySelector(selectors);
Penggunaan selektor membutuhkan field yang digunakan untuk menentukan satu atau lebih dari CSS selektor yang bersesuaian dengan elemen. Selektor yang digunakan untuk menyeleksi elemen HTML berdasarkan nilai id, class, tipe, dan lain sebagainya. Sedangkan pada kondisi yang terdapat lebih dari satu selektor atau multiple selektor, maka tanda koma dapat digunakan untuk memisahkan selektor-selektor tersebut. Elemen pertama yang muncul pada dokumen adalah elemen pengembalian yang muncul pertama kali dalam dokumen, atau merupakan elemen yang dikembalikan. Jika selektor tersebut bersesuaian dengan nilai id yang sifatnya adalah unik, yang digunakan beberapa kali pada dokumen, maka selektor tersebut akan mengembalikan elemen pertama yang bersesuaian.
Return Values: method ini digunakan untuk mengembalikan elemen pertama yang bersesuai dengan CSS selector(s) spesifik pada dokumen.
Contoh: ilustrasi berikut mendeskripsikan kegunaan dari method querySelector() DOM untuk menyeleksi elemen pertama yang cocok untuk selektor spesifik.
 |
| Ilustrasi querySelector() DOM HTML |
Sebelum memahami lebih dalam materi tentang querySelector DOM HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Membuka Output Stream HTML Menggunakan Open DOM [klik], Menghapus Teks Kosong HTML Menggunakan normalizeDocument DOM [klik], dan Menggabungakn Teks HTML Menggunakan Normalize DOM [klik].
Sintak:
element.querySelector(selectors);
Return Values: method ini digunakan untuk mengembalikan elemen pertama yang bersesuai dengan CSS selector(s) spesifik pada dokumen.
Baca Juga:
<!DOCTYPE html>
<html>
<head>
<title>
Method querySelector() DOM
</title>
</head>
<body
style="text-align: center;">
<h1
style="color: green;">
Blog Elfan
</h1>
<h2>
Method querySelector()
</h2>
<div id="mkn">
<p>Paragraf 1.</p>
<p>Paragraf 2.</p>
</div>
<button
onclick="myFunction()">
Try it
</button>
<script>
function myFunction()
{
var x = document.getElementById("mkn");
x.querySelector("p").style.backgroundColor = "Green";
x.querySelector("p").style.color = "white";
}
</script>
</body>
</html>
Output:
Blog Elfan
Method querySelector()
Paragraf 1.
Paragraf 2.
Referensi Tambahan:
- 3 Method Script Collection Beserta 2 Contoh Penerapannya pada HTML [klik]
- 2 Sintak Penggunaan Properti strictErrorChecking DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti Title DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti URL DOM pada HTML [klik]
- 2 Contoh Penggunaan Method write() DOM pada HTML [klik]
- Cara Penggunaan Method writeln() DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti accessKey DOM pada HTML [klik]
Artikel ini didedikasikan kepada: Dea Nur Meyrawati, Devina Rizky Wigustya Putri, Dewi Destina Rahmawati, Dhea Camelia Okta Shilla, dan Dian Novita Wulansari.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method querySelector() DOM pada HTML?
BalasHapusBerikut adalah jenis browser yang dapat digunakan untuk mengaktifkan method querySelector() DOM pada HTML:
Hapus1. Google Chrome 4.0
2. Internet Explorer 8.0
3. Microsoft Edge
4. Firefox 3.5
5. Opera 10.0
6. Safari 3.2
Apa fungsi method querySelector() DOM pada HTML?
BalasHapusMethod querySelector() pada DOM HTML berfungsi untuk mengembalikan elemen pertama yang cocok dengan CSS yang telah ditentukan dalam dokumen.
HapusMethod querySelector() hanya mengembalikan elemen pertama yang cocok dengan pemilih yang telah ditentukan. Untuk mengembalikan semua kecocokkan, maka dapat menggunakan method querySelectorAll() sebagai gantinya.
Hapus