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.

score 12 · Accepted Answer · edited Sep 04 '19 at 18:54

12

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

edited Sep 04 '19 at 18:54

albert

8,112
3
47
63

answered Jul 30 '11 at 02:50

aroth

54,026
20
135
176

that just alerts me like this [object text] and [object element] – Ryan Jul 30 '11 at 02:55
1

@Ryan Try `alert(Object.keys(nodeList[i]))`; – Shaz Jul 30 '11 at 03:05
it says: [object XMLDocument] – Ryan Jul 30 '11 at 03:10
2

@Ryan - 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)`. – aroth Jul 30 '11 at 03:11
1

@Ryan What about `alert(nodeList[i][0]);` ? – Shaz Jul 30 '11 at 03:12
1

it keeps giving me back "undefined" – Ryan Jul 30 '11 at 03:14
I'll vote each of your answers up and close tihs guys, i think my xml is wrong... – Ryan Jul 30 '11 at 03:15
This answer still doesn't tell you how to serialize the object, see mine for an example – Ruan Mendes Oct 20 '11 at 18:27
3

I believe it should be "nodeList[index]" instead of "nodeList[i]" since i is not defined anywhere.. – Khokhar Nov 04 '13 at 15:01

score 7 · Answer 2 · edited Aug 30 '21 at 10:55

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]));
}

Thanks, I have not tried console.log before... will look it up. Cheers! — Ryan, Oct 20 '11 at 02:40

Artur INTECH · Answer 3 · 2018-05-01T12:10:58.783

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:

Javascript, viewing "object nodelist"

3 Answers3