3

我正在开发 chrome 扩展程序，但遇到了 nodelist 类型的问题。

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循环不起作用。

4

5 回答 5

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;
   }
}
于 2013-02-07T03:36:55.663 回答
1

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

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

或者，您可以将此类数组对象转换为真正的数组并在其上使用本机数组方法：

[].forEach.call(items, function(item) { ... });
于 2013-02-07T03:37:35.210 回答
1

如果您在页面加载期间记录这两个，您可以 console.log() 的原因NodeList，而不是length属性是因为它NodeList是一个“实时”集合。在 DOM 完成加载之前，两者都是未定义的，但由于NodeList是实时的，它将在 Chrome 控制台中更新。该length属性在记录时未定义，并且因为它不是实时的，所以它将保留undefined在控制台中。

您可以随时设置一个变量来引用 nodeList，但要等到 DOM 准备好后再尝试使用数据（使用document.ready函数或可能document.addEventListener()）。

于 2013-12-02T17:50:42.357 回答
0

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

document.addEventListener("DOMContentLoaded", function () {
    divs = document.getElementsByTagName("div");
    console.log(divs);
}, false);
于 2013-05-31T18:13:05.580 回答
0

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

于 2016-01-08T19:25:44.960 回答