Javascript, viewing "object nodelist"

Question

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.

Gallfly

Answer 1

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

Pass

that just alerts me like this [object text] and [object element] – Gallfly

@Gallfly Try alert(Object.keys(nodeList[i])); – Phreno

it says: [object XMLDocument] – Gallfly

@Gallfly - Yes, because the NodeList is full of Nodes. Is there some specific attribute that you are trying to output? If so you can do alert(nodeList[i].attribute). Or you might want to try alert(nodeList[i].innerHTML). – Pass

@Gallfly What about alert(nodeList[i][0]); ? – Phreno

it keeps giving me back "undefined" – Gallfly

I'll vote each of your answers up and close tihs guys, i think my xml is wrong... – Gallfly

This answer still doesn't tell you how to serialize the object, see mine for an example – Plane

I believe it should be "nodeList[index]" instead of "nodeList[i]" since i is not defined anywhere.. – Kacykaczer

Answer 2

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
// https://mcmap.net/q/137675/-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]));
}

Plane

Thanks, I have not tried console.log before... will look it up. Cheers! – Gallfly

Answer 3

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/

Inbreed