Looping Through Selected Elements with document.querySelectorAll

Problem:
When attempting to loop through elements selected using document.querySelectorAll, the output includes additional, irrelevant items.

Example:

var checkboxes = document.querySelectorAll('.check');
for( i in checkboxes) {
  console.log(checkboxes[i]);
}

Output:

10
item()
namedItem()

The problem arises because document.querySelectorAll returns a NodeList, which is an array-like object. However, NodeList does not support array methods like forEach.

Solution:

To properly loop through the selected elements, convert the NodeList to an array. There are several ways to do this:

1. Spread Syntax (ES2015 ):

   const divs = [...document.querySelectorAll('div')];
   divs.forEach((div) => {
     // Do something with each div
   });

2. Array.from():

   const divs = Array.from(document.querySelectorAll('div'));
   divs.forEach((div) => {
     // Do something with each div
   });

3. Looping over node indices:

   const checkboxes = document.querySelectorAll('.check');
   for (let i = 0; i