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

Question

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

10

在我的变量上执行alert()会给我这个结果

  [object NodeList]

我怎么才能看到其中所有的值？

注意：我在使用Firefox浏览器，不知道如何使用Chromebug，因此它没有安装。

- Ryan

3个回答

7

更好的选择是不使用alert，因为它会显示对象的toString()。在FF和Chrome中使用console.log将给您一个漂亮的可展开对象，您可以单击进行钻取。

如果您真的需要序列化，可以使用outerHTML。

// Firefox doesn't support outerHTML on nodes, so here's a method that does it
// https://dev59.com/VXI-5IYBdhLWcg3wu7Lv
function outerHTML(node){
    return node.outerHTML || new XMLSerializer().serializeToString(node);
}

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

- Ruan Mendes

1

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

2

现在我一定会使用以下浏览器：

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)的数组访问不同。

更多细节：

- Artur INTECH

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aroth · Accepted Answer

您可以像遍历数组一样遍历NodeList中的值：

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

这是一个好的资源，提供了更深入的信息：https://web.archive.org/web/20170119045716/http://reference.sitepoint.com/javascript/NodeList