Loop Pada Javacrip DOM

Loop Pada Javacript dan Contoh DOM

Loop pada JavaScript merupakan sebuah pernyataan yang digunakan untuk mengeksekusi suatu kode berulang kali sesuai dengan jumlah iterasi yang ditentukan. Ada beberapa jenis loop yang tersedia pada JavaScript, yaitu for loop, while loop, dan do while loop. Berikut adalah contoh penggunaan masing-masing jenis loop pada JavaScript: 

• Loop

   

    for (let i = 0; i < 10; i++) {

        console.log(i);

    }

 

Pada contoh di atas, loop akan mengeksekusi kode yang ada di dalam blok kode (console.log(i)) sebanyak 10 kali, dimulai dari nilai 0 hingga 9.

• While loop:

    let i = 0;

    while (i < 10) {

    console.log(i);

    i++;

    }

 

Pada contoh di atas, loop akan terlebih dahulu mengeksekusi kode yang ada di dalam blok kode (console.log(i)) sekali, kemudian akan terus mengeksekusi kode tersebut selama nilai i kurang dari 10. Setiap iterasi, nilai i akan ditambah 1.

Anda dapat menggunakan loop pada JavaScript untuk mengontrol elemen HTML melalui DOM (Document Object Model) dan mengatur tampilan elemen tersebut dengan CSS. Berikut adalah contoh penggunaannya:

   

     <ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    </ul>

 

    li {

    display: inline-block;

    margin: 0 10px;

    color: red;

    font-size: 20px;

    font-weight: bold;

  }

   

const listItems = document.querySelectorAll("li");

for (let i = 0; i < listItems.length; i++) {

  listItems[i].style.backgroundColor = "yellow";

}

Pada contoh di atas, kita mengambil semua elemen li di dalam elemen ul dengan menggunakan querySelectorAll, kemudian menggunakan loop for untuk mengatur background warna pada setiap elemen li tersebut menjadi kuning. Kita juga telah mengatur tampilan elemen li pada CSS dengan mengatur warna teks menjadi merah, ukuran font menjadi 20px, dan font-weight menjadi bold.