JavaScript: How to Iterate/Loop HTML Elements
The
DOM get elements methods
return either
HTMLCollection
or
NodeList
How do you iterate them?
After JS2015
Since JS2015, both
HTMLCollection
and
NodeList
are Iterable Object.
Use for-of Loop. e.g.
for (let x of document.querySelectorAll("*")) x.style.all = "revert";
or use Spread Operator to turn it to array. e.g.
[...document.querySelectorAll("*")].forEach((x) => { x.style.all = "revert"; });
or use JavaScript: Array.from to turn it into array. e.g.
Array.from(document.querySelectorAll("*")).forEach((x) => { x.style.all = "revert"; });
Before JS2015
For before JS2015 code,
HTMLCollection
and
NodeList
are not iterable,
but still are
Array-Like Object.
see
Apply Array Method to Array-Like Object