Javascript，查看“对象节点列表”

Question

对我的一个变量执行alert()会得到以下结果

  [object NodeList]

我如何才能看到其中的所有值呢？

注意:我在Firefox上，不知道如何使用chromebug，所以它没有安装。

Answer 1

您可以像迭代数组一样迭代NodeList中的值：

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

这里有一个很好的资源，其中包含一些更深入的信息：https://web.archive.org/web/20170119045716/http://reference.sitepoint.com/javascript/NodeList

Answer 2

更好的替代方法是不使用alert，因为这将显示对象的toString()。使用FF和Chrome中的console.log将为您提供一个很好的可扩展对象，您可以单击该对象进行深入研究

如果确实需要序列化，可以使用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]));
}

Answer 3

现在，我肯定会用到以下几点：

Chrome、火狐3.5+、IE8+

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

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

IE11+、火狐24+、Chrome 30+ (已启用实验)

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

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

"element = elementsi“优先于"elements.length”，因为：

节点列表通常被实现为带有过滤器的节点迭代器。这意味着获得像length这样的属性是O(n)，并且通过重新检查长度来迭代列表将是O(n^2)。

不像数组访问，据我所知是O(1)。

更多详细信息：

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