Skip to content

Instantly share code, notes, and snippets.

Created June 9, 2011 03:41
What would you like to do?
(document.querySelectorAll('*')).forEach ?
var els = document.querySelectorAll('a');
els.forEach(function(e){console.log(e.href);}); // TypeError: els.forEach is not a function
// Why?
// document.querySelectorAll returns a NodeList.
// First thing first, as opposed to other NodeList, this one is not live, mostly because the
// implementation of a live object would be terribly complicated for some selectors
// NodeList are a DOM interface introduced in DOM core level 1 (random guess)
// The ECMAScript binding ( defines
// NodeList as objects. Unfortunately, the spec is not very accurate in how this object should be
// implemented. It does not say if things are inherited or not, no word on NodeList.prototype
// The de-facto standard is apparently that the protoype chain looks roughly like:
// myNodeList -> NodeList.prototype -> Object.prototype
// As you can notice, Array.prototype is not here. It has to be noted that at the time NodeList were
// invented + standardized was before/at the time of ECMAScript 3.
// At this time, Array.prototype only had:
// .concat, .join, .pop, .push, .reverse, .shift, .slice, .sort, .splice, .unshift
// Most of these methods are not applicable to NodeList since they either write on the NodeList.
// .forEach, .filter, etc. came later on with ECMAScript 5 but it was too late to consider adding
// Array.prototype on the prototype chain (is it really too late?)
// A workaround: on FF4 and Chrome, I have been able to have the following running:
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
html, body {
td {
<script type="text/javascript">
NodeList.prototype.forEach = Array.prototype.forEach;
HTMLCollection.prototype.forEach = Array.prototype.forEach; // Because of
function randomColorString(){
var r, g, b;
r = Math.floor(256*Math.random()).toString(10);
g = Math.floor(256*Math.random()).toString(10);
b = Math.floor(256*Math.random()).toString(10);
return ('rgb('+ r +','+ g +','+ b +')');
function createTable(row, col){
var t = document.createElement('table');
var r,c;
var i,j;
for(i=0 ; i<row; i++){
r = document.createElement('tr');
for(j=0; j<col ; j++){
c = document.createElement('td');
return t;
function windowLoad(){
var table = createTable(6, 10);
var cells = document.getElementsByTagName('td');
cells.forEach(function(e,i,a){ = randomColorString();
window.addEventListener("load", windowLoad, false);
<title> TITLE </title>
// THE END !
// ... wait a minute
// Apparently, this doesn't work with document.querySelectorAll on FF4. I'll have to dig into that.
// THE END (until progress is made in the direction of DOM ECMAScript binding?)
Copy link

milgner commented Feb 28, 2012

Ha, this is brilliant in its simplicity! Thank you very much! I was just starting to tear my hair because the result from a querySelectorAll() call didn't support forEach.

Copy link

Actually, now, I would have a completely different advice which is to turn every NodeCollection/HTMLCollection to an actuall array.
Something like:
function $$(selector){
return, 0);

Copy link

milgner commented Feb 28, 2012

Thanks for the feedback. I'll keep that in mind but currently a forEach method is all I need.

Copy link


    var querycollection = WinJS.Utilities.query(".className_1", document);
    querycollection.forEach(function (e) {
        // do some stuff with 'e'

Copy link

ghost commented Sep 15, 2016

I use

[] querycollection, function(element_value, index_key){
} );

But i'm looking for some library, maybe someone knows more perfect way to fix with library? Does work for every browser?


I have modified and used this:

(function() {
    if (typeof NodeList.prototype.forEach === "undefined") {
        NodeList.prototype.forEach = Array.prototype.forEach;

    if (typeof HTMLCollection.prototype.forEach === "undefined") {
        HTMLCollection.prototype.forEach = Array.prototype.forEach;

thank you!!

Copy link

vinyll commented Jan 31, 2018

Or you could use Array.from(document.querySelectorAll('a'))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment