Question

我正在开发Chrome扩展程序并且遇到节点列表类型的问题。

var compoentChange = document.getElementById("component_change");
var items = compoentChange.getElementsByTagName("option");

当我console.log(items)时，它会显示[item: function]。当我展开它时，它具有所有选项元素和长度属性。

问题在于我无法访问这些元素。当我console.log(items.length)时，我得到undefined。

如何遍历items变量？

for(i in items){}和for循环不起作用。

Answer 1

你仍然可以items.length，所以只需像这样制作一个for循环。我建议将它推入阵列。

var myArray = [];

for(var i=0; i<items.length; i++){
     myArray.push(items[i]);
}

好吧，如果这不是一个选项，可以尝试这样的事情：

var myArray = [];
for(var i=0, e=1; i<e; i++ ){
   if(items[i] != undefined){
      e++;
      myArray.push(items[i]);
   }else{
      break;
   }
}

Answer 2

NodeLists是类似于数组的对象。您可以使用常规for循环（而不是for..in）进行迭代：

for (var i = 0; i < items.length; i++) { ... }

或者您可以将这个类似数组的对象转换为真实数组，并在其上使用原生数组方法：

[].forEach.call(items, function(item) { ... });

Answer 3

如果您在页面加载期间记录了这两个，那么您可以将{。{1}}而不是NodeList属性作为console.log（）的原因是因为length是“现场”系列。在DOM完成加载之前，两者都是未定义的，但由于NodeList是实时的，因此它将在Chrome控制台中更新。 NodeList属性在记录时未定义，并且由于它不存在，它将在控制台中保留length。

您可以随时设置变量以引用nodeList，但在尝试使用数据之前等待DOM准备就绪（使用undefined函数或document.ready）。

Answer 4

我遇到了类似的问题。事实证明，这是因为我应该在DOM完成加载后访问数据。

document.addEventListener("DOMContentLoaded", function () {
    divs = document.getElementsByTagName("div");
    console.log(divs);
}, false);

Answer 5

for ... of可以用于这种情况。但是由于a bug，这个机会不能用于铬。

无法遍历chrome中的节点列表

5 个答案: