Mendapatkan Semua Query Selektor HTML querySelectorAll DOM
Method querySelectorAll() DOM pada HTML digunakan untuk mengembalikan segala koleksi dari child element yang cocok dengan CSS selector(s) sebagai sebuah object static NodeList. Object NodeList merepresentasikan sebuah koleksi dari node yang dapat diakses berdasarkan nomor indeksnya yang dimulai dari angka 0.
Catatan: jika ingin menerapkan properti CSS ke semua child node yang cocok dengan selektor spesifik, maka hal tersebut dapat dilakukan dengan cara melakukan iterasi terhadap seluruh node dan melakukan penerapan terhadap properti yang sesuai.
Sintak:
element.querySelectorAll(selectors)
Selectors merupakan bidang yang wajib diisi ketika menjalankannya, dimana bidang ini berfungsi untuk menentukan satu adalah lebih dari CSS selectors yang akan dicocokkan dengan elemen. Selector digunakan untuk memilih elemen HTML berdasarkan nilai id, class, type, dan lain sebagainya. Dalam kasus multiple selectors, tanda koma digunakan untuk memisahkan antar selectors yang digunakan.
Contoh:
 |
| Ilustrasi querySelectorAll DOM HTML |
Sebelum memahami lebih dalam materi tentang Mendapatkan Semua Query Selektor HTML querySelectorAll DOM, terlebih dahulu pelajari materi tentang: Mengembalikan Elemen Sebelumnya HTML previousElementSibling DOM [klik], Mengembalikan Node Sebelumnya HTML Menggunakan previousSibling DOM [klik], dan Mengatur Nilai Elemen Parent HTML Menggunakan parentElement DOM [klik].
Sintak:
element.querySelectorAll(selectors)
Baca Juga:
<!DOCTYPE html>
<html>
<head>
<title>
Method querySelectorAll() DOM
</title>
<style>
#mnns
{
border: 1px solid black;
margin: 5px;}
</style>
</head>
<body style = "text-align: center;">
<h1 style = "color: green;">
Blog Elfan
</h1>
<h2>
Method querySelectorAll()
</h2>
<div id="mnns">
<p>Paragraf 1.</p>
<p>Paragraf 2.</p>
</div>
<button onclick="myFunction()">
Try it
</button>
<script>
function myFunction()
{
var x = document.getElementById("mnns").querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++)
{x[i].style.backgroundColor = "green";
x[i].style.color = "white";}
}
</script>
</body>
</html>
Output:Blog Elfan
Method querySelectorAll()
Paragraf 1.
Paragraf 2.
Referensi Tambahan:
- Cara Penggunaan Properti scrollHeight DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti scrollLeft DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti scrollTop DOM pada HTML [klik]
- Cara Penggunaan Properti scrollWidth DOM pada HTML [klik]
- Cara Penggunaan Method setAttributeNode() DOM pada HTML [klik]
- Cara Penggunaan Properti tagName DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti textContent DOM pada HTML [klik]
Artikel ini didedikasikan kepada: Mega Isabella Wulandari, Meira Pradipta Putri, Meliza Haryani, Merita Cahya Kurniasari, dan Metha Prasetiana.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method querySelectorAll DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan method querySelectorAll DOM pada HTML:
Hapus1. Apple Safari 3.2
2. Google Chrome 4.0
3. Firefox 3.5
4. Opera 10.0
5. Internet Explorer 9.0
Apa fungsi dari method querySelectorAll() DOM pada HTML?
BalasHapusMethod querySelectorAll() DOM pada HTML berfungsi untuk mengembalikan semua elemen yang cocok dengan CSS selector(s).
HapusApa perbedaan antara method querySelector() dan method querySelectorAll() DOM pada HTML?
BalasHapusMethod querySelector() hanya dapat digunakan untuk mengakses satu elemen saja, sedangkan method querySelectorAll() dapat digunakan untuk mengakses semua elemen yang cocok dengan CSS selector yang telah ditentukan.
HapusKapan harus menggunakan method querySelectorAll() dan kapan harus menggunakan method querySelector() pada DOM HTML?
BalasHapusJika ingin mengembalikan semua nilai yang saling bersesuaian maka dapat digunakan method querySelectorAll, sedangkan untuk mengembalikan nilai hanya untuk satu kecocokkan saja, maka dapat digunakan querySelector saja.
Hapus