DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Mendapatkan Semua Query Selektor HTML Menggunakan 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

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.


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

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Enkapsulasi Java dan Fungsinya

Specifier %d dan %i Bahasa C dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

7 Paradigma Penelitian pada Statistika Penelitian

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas