How to loop through selected elements with document.querySelectorAll
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?
Answers:
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.
A nice alternative is:
[].forEach.call(
document.querySelectorAll('.check'),
function (el) {
console.log(el);
}
);
but as pointed out, you should use a for loop.
My favorite is using spread operator to convert it to array and then use forEach for looping.
var div_list = document.querySelectorAll('div'); // returns NodeList
var div_array = [...div_list]; // converts NodeList to Array
div_array.forEach(div => {
// do something awesome with each div
});
I code in ES2015 and use Babel.js so there shouldn't be a browser support issue.
It looks like Firefox 50+, Chrome 51+ and Safari 10+ now all support the .forEach function for NodeList objects. Note—.forEach is not supported in Internet Explorer, so consider one of the approaches above or use a polyfill if IE support is required.
https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => console.log(p));<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>With ES6 , there is a static method Array.from to take advantages of Array non-static methods (forEach,map,filter,..) :
Array.from(document.querySelectorAll('div')).forEach((element,index) =>
{
// handle "element"
});
Another , use of Array.from since querySelector provides item method :
var all=document.querySelectorAll('div');
// create range [0,1,2,....,all.length-1]
Array.from({length:all.length},(v,k)=>k).forEach((index)=>{
let element=all.item(index);
});