Doing an alert() on one of my variables gives me this result

  [object NodeList]

How can I see all the values in that?

Note; I am on Firefox and dont know how to use chromebug so its not installed.

Doing an alert() on one of my variables gives me this result

  [object NodeList]

How can I see all the values in that?

Note; I am on Firefox and dont know how to use chromebug so its not installed.

• javascript
• nodelist

3 Answers 3

You can iterate the values in a NodeList the same way you would an array:

for (var index = 0; index < nodeList.length; index++) {
    alert(nodeList[index]);
}

Here is a good resource with some more in-depth information: https://web.archive.org/web/20170119045716/http://reference.sitepoint.com/javascript/NodeList

The better alternative is not to use alert, since that will display the object's toString(). Using console.log from FF and Chrome will give you a nice expandable object that you can click on to drill into it

And if you really need serialization, you can use outerHTML

// Firefox doesn't support outerHTML on nodes, so here's a method that does it
// http://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox
function outerHTML(node){
    return node.outerHTML || new XMLSerializer().serializeToString(node);
}

for (var index = 0; index < nodeList.length; index++) {
    alert(outerHTML(nodeList[index]));
}

Nowadays I would definitely use the following:

Chrome, Firefox 3.5+, IE8+

var elements = document.querySelectorAll('a');

for (var i = 0, element; (element = elements[i]); i++) {
    console.log(element);
}

IE11+, Firefox 24+, Chrome 30+ (with experiments enabled)

let elements = document.querySelectorAll('a');

for (let i = 0, element; (element = elements[i]); i++) {
    console.log(element);
}

"element = elements[i]" is preferred over "elements.length" since:

Node lists are often implemented as node iterators with a filter. This means that getting a property like length is O(n), and iterating over the list by re-checking the length will be O(n^2).

Unlike array access, which is as far as I remember O(1).

More details:

• https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
• http://kangax.github.io/es5-compat-table/es6/