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

【问题标题】：Javascript, viewing "object nodelist"Javascript，查看“对象节点列表”
【发布时间】：2011-10-16 09:12:30
【问题描述】：

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

  [object NodeList]

如何查看其中的所有值？

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

【问题讨论】：

标签： javascript nodelist

【解决方案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

【讨论】：

@Ryan Try alert(Object.keys(nodeList[i]));
@Ryan - 是的，因为NodeList 充满了Nodes。您是否尝试输出某些特定属性？如果是这样，您可以这样做alert(nodeList[i].attribute)。或者你可能想试试alert(nodeList[i].innerHTML)。
@Ryan alert(nodeList[i][0]); 怎么样？
它一直给我返回“未定义”
我相信它应该是 "nodeList[index]" 而不是 "nodeList[i]" 因为 i 没有在任何地方定义..

【解决方案2】：

更好的选择是不使用警报，因为这将显示对象的 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]));
}

【讨论】：

谢谢，我之前没有尝试过console.log...会查一下。干杯！

【解决方案3】：

现在我肯定会使用以下内容：

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+（已启用实验）

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

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

“element = elements[i]”优于“elements.length”，因为：

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

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

更多细节：

【讨论】：