How to loop through selected elements with document.querySelectorAll

Question

I am trying loop on selected elements that queried with document.querySelectorAll, but how?

For example I use:

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

Output:

<input id="check-1" class="check" type="checkbox" name="check"> <input id="check-2" class="check" type="checkbox" name="check"> <input id="check-3" class="check" type="checkbox" name="check"> <input id="check-4" class="check" type="checkbox" name="check"> <input id="check-5" class="check" type="checkbox" name="check"> <input id="check-6" class="check" type="checkbox" name="check"> <input id="check-7" class="check" type="checkbox" name="check"> <input id="check-8" class="check" type="checkbox" name="check"> <input id="check-9" class="check" type="checkbox" name="check"> <input id="check-10" class="check" type="checkbox" name="check" checked="">  10 item() namedItem() 

My problem is that at the end this method returns 3 extra items. How can I properly do it?

Answer 1

for in loop is not recommended for arrays and array-like objects - you see why. There can be more than just number-indexed items, for example the length property or some methods, but for in will loop through all of them. Use either

for (var i = 0, len = checkboxes.length; i < len; i++) {     //work with checkboxes[i] } 

or

for (var i = 0, element; element = checkboxes[i]; i++) {     //work with element } 

The second way can't be used if some elements in array can be falsy (not your case), but can be more readable because you don't need to use [] notation everywhere.