Cara Penggunaan Method querySelectorAll() DOM pada HTML

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:

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

Komentar

  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

Posting Komentar

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

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C