Cara menggunakan loop nodelist javascript

Tip: Anda dapat menggunakan panjang milik objek NodeList untuk menentukan jumlah elemen yang cocok pemilih tertentu, maka Anda dapat loop melalui semua elemen dan ekstrak info yang Anda inginkan.

Untuk informasi lebih lanjut tentang CSS Selectors, kunjungi CSS Selectors Tutorial dan kami CSS Selectors Referensi .

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

Catatan: Internet Explorer 8 memiliki dukungan untuk penyeleksi CSS2. IE9 dan versi memiliki dukungan untuk CSS3 juga.

Sintaksis

document.querySelectorAll( CSS selectors )

Nilai parameter

Rincian teknis

Contoh lebih

Contoh

Dapatkan semua <p> elemen dalam dokumen, dan mengatur warna latar belakang dari pertama <p> elemen (index 0) :

// Get all <p> elements in the document
var x = document.querySelectorAll("p");

// Set the background color of the first <p> element
x[0].style.backgroundColor = "red"; 

Contoh

Dapatkan semua <p> elemen dalam dokumen dengan class = "contoh", dan mengatur latar belakang pertama <p> elemen:

// Get all <p> elements in the document with class="example"
var x = document.querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0)
x[0].style.backgroundColor = "red"; 

Contoh

Cari tahu berapa banyak elemen dengan class = "contoh" ada dalam dokumen (menggunakan properti panjang dari objek NodeList):

NameDescriptionentries()Returns an Iterator with the key/value pairs from the listforEach()Executes a callback function for each node in the listitem()Returns the node at a specified indexkeys()Returns an Iterator with the keys from the listlengthReturns the number of nodes in a NodeListvalues()Returns an Iterator with the values from the list

Example

Select all

nodes in a document:

const myNodeList = document.querySelectorAll("p");

The elements in the NodeList can be accessed by an index number.

To access the second

node you can write:

Note: The index starts at 0.

HTML DOM Node List Length

The length property defines the number of nodes in a node list:

The length property is useful when you want to loop through the nodes in a node list:

Example

Change the color of all

elements in a node list:

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

Not an Array

A NodeList is not an Array!

A NodeList may look like an array, but it is not.

You can loop through a NodeList and refer to its nodes with an index.

But you cannot use Array methods like push(), pop(), or join() on a NodeList.

The Difference Between an HTMLCollection and a NodeList

A NodeList and an HTMLcollection is very much the same thing.

Both are array-like collections (lists) of nodes (elements) extracted from a document. The nodes can be accessed by index numbers. The index starts at 0.

Perulangan

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Bentuknya kodenya seperti ini:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Yang perlu diperhatikan adalah kondisi yang ada di dalam kurung setelah kata

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Kondisi ini akan menentukan:

• Hitungan akan dimulai dari

  for(counter = 0; counter < 50; counter+=2){
      document.write("<p>Perulangan ke-"+counter+"</p>");
  }

  2 (

  for(counter = 0; counter < 50; counter+=2){
      document.write("<p>Perulangan ke-"+counter+"</p>");
  }

  3);
• Hitungannya sampai berapa? Sampai

  for(counter = 0; counter < 50; counter+=2){
      document.write("<p>Perulangan ke-"+counter+"</p>");
  }

  4;
• Lalu di setiap perulangan

  for(counter = 0; counter < 50; counter+=2){
      document.write("<p>Perulangan ke-"+counter+"</p>");
  }

  5 akan bertambah

  for(counter = 0; counter < 50; counter+=2){
      document.write("<p>Perulangan ke-"+counter+"</p>");
  }

  6 (

  for(counter = 0; counter < 50; counter+=2){
      document.write("<p>Perulangan ke-"+counter+"</p>");
  }

  7).

Variabel

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Jadi setiap perulangan dilakukan nilai

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Ini hasil outputnya:

Apakah nama variabelnya harus selalu

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Tidak.

Kita juga bisa menggunakan nama lain.

Misalnya:

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Pada contoh tersebut, kita melakukan perulangan dimulai dari nol

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

Hasilnya:

Bagaimana kalau counter perulangannya dimulai dari akanga yang lebih besar sampai yang ke paling kecil?

Ini biasanya kita buat saat ingin menghitung mundur…

Caranya gampang.

Kita tinggal isi nilai counter dengan nilai terbesarnya.

Misalnya kita akan mulai hitungan dari

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Maka nilai

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

Lalu di kondisi perbandingannya, kita berikan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Lalu kita kurangi (

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

Hasilnya:

Mengapa tidak sampai nol (

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Karena kondisi yang kita berikan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Kecuali kita menggunakan operator lebih besar sama dengan (

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

2. Perulangan While di Javascript

Perulangan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Perulangan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Untuk memahami perulangan ini…

…mari kita coba lihat contohnya:

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Bisa disederhanakan menjadi:

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Hasilnya:

Coba perhatikan blok kode

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

Di sana… Perulangan akan terjadi selama variabel

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Lalu kita menggunakan fungsi

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Selama kita memilih Ok pada dialog konfirmasi, maka variabel

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Tapi kalau kita pilih Cancel, maka variabel

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Saat variabel

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

3. Perulangan Do/While di Javascript

Perulangan

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Perbedaanya:

Perulangan

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Bentuknya seperti ini:

do {
    // blok kode yang akan diulang
} while (<kondisi>);

Jadi perbedaanya:

Perulangan

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

5 akan mengecek kondisi di belakang (sesudah mengulang), sedangkan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

3 akan mencek kondisi di depan atau awal (sbelum mengulang).

Mari kita coba lihat contohnya:

var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;

do {
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Contoh tersebut sama seperti contoh pada perulangan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Saat perulangan pertama, cobalah untuk membatalkan perulangannya dengan memilih Cancel.

Maka hasilnya:

4. Perulangan Foreach di Javascript

Perulangan

do {
    // blok kode yang akan diulang
} while (<kondisi>);

Perulangan ini termasuk dalam perulangan counted loop, karena jumlah perulangannya akan dituentukan oleh panjang dari array.

Ada dua cara menggunakan perulangan

do {
    // blok kode yang akan diulang
} while (<kondisi>);

1. Menggunakan

   for(counter = 0; counter < 50; counter+=2){
       document.write("<p>Perulangan ke-"+counter+"</p>");
   }

   0 dengan operator

   do {
       // blok kode yang akan diulang
   } while (<kondisi>);

   6;
2. Mengguunakan method

   do {
       // blok kode yang akan diulang
   } while (<kondisi>);

   7.

Contoh:

Berikut ini bentuk perulangan “foreach” tanpa menggunakan operator

do {
    // blok kode yang akan diulang
} while (<kondisi>);

var languages = ["Javascript", "HTML", "CSS", "Typescript"];

for(i = 0; i < languages.length; i++){
    document.write(i+". "+ languages[i] + "<br/>");
}

Perulangan ini dapat dibuat lebih sederhana lagi dengan menggunakan operator

do {
    // blok kode yang akan diulang
} while (<kondisi>);

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Hasilnya:

Cara kedua membuat perulangan

do {
    // blok kode yang akan diulang
} while (<kondisi>);

do {
    // blok kode yang akan diulang
} while (<kondisi>);

Contoh:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Method

do {
    // blok kode yang akan diulang
} while (<kondisi>);

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Hasilnya:

Penjelasan tentang arrow function, akan dibahas pada “Tutorial Javascript: Memahami Fungsi di Javascript”.

5. Perulangan dengan Method repeat()

Perulangan dengen method atau fungsi

var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;

do {
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Fungsi ini khusus digunakan untuk mengulang sebuah teks (string).

Bisa dibilang:

Ini merupakan singkat dari perulangan

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Contoh:

Apabila kita menggunakan perulangan

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Apabila kita menggunakan fungsi

var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;

do {
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Hasilnya:

6. Bonus: Perulangan Bersarang (Nested)

Di dalam blok perulangan, kita juga dapat membuat perulangan.

Ini disebut dengan nested loop atau perulangan bersarang atau perulangan di dalam perualangan.

Mari kita coba lihat contohnya:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Hasilnya:

Pada perulangan tersebut, kita menggunakan dua perulangan

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Perulangan pertama menggunakan variabel

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;

do {
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Contoh lain:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Hasilnya:

Nanti, kita akan banyak menggunakan perulangan bersarang saat bekerja dengan array dua dimensi.

Kita dapat membuat perluangan sebanyak mungki di dalam perulangan yang lainnya.

Namun, ini perlu diperhatikan:

Semakin banyak perulangannya, maka komputer akan semakin lama memprosesnya.

Tentu ini akan membuat website atau aplikasi kita berjalan lambat.

Karena itu, gunakanlah perulangan dengan bijak 😊

Apa Selanjutnya?

Intinya perulangan digunakan untuk melakukan pengulangan. Ini merupakan hal dasar yang harus dipahami setiap programmer.