Javascript, viewing "object 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]));
}
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
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/