Lompat ke konten Lompat ke sidebar Lompat ke footer

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.

Cara Penggunaan Method querySelectorAll() DOM pada HTML
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].

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.

Baca Juga:

Contoh:

<!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.


Artikel ini didedikasikan kepada: Mega Isabella Wulandari, Meira Pradipta Putri, Meliza Haryani, Merita Cahya Kurniasari, dan Metha Prasetiana.

8 komentar untuk "Mendapatkan Semua Query Selektor HTML querySelectorAll DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method querySelectorAll DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan method querySelectorAll DOM pada HTML:
      1. Apple Safari 3.2
      2. Google Chrome 4.0
      3. Firefox 3.5
      4. Opera 10.0
      5. Internet Explorer 9.0

      Hapus
  2. Apa fungsi dari method querySelectorAll() DOM pada HTML?

    BalasHapus
    Balasan
    1. Method querySelectorAll() DOM pada HTML berfungsi untuk mengembalikan semua elemen yang cocok dengan CSS selector(s).

      Hapus
  3. Apa perbedaan antara method querySelector() dan method querySelectorAll() DOM pada HTML?

    BalasHapus
    Balasan
    1. Method 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.

      Hapus
  4. Kapan harus menggunakan method querySelectorAll() dan kapan harus menggunakan method querySelector() pada DOM HTML?

    BalasHapus
    Balasan
    1. Jika 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

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -