无法在 HtmlCollection 上迭代

unable to iterate on HtmlCollection

本文关键字：迭代 HtmlCollection      更新时间：2023-09-26

我对一个简单的代码有问题

    var x = document.getElementsByTagName("th");
    var plop = Array.prototype.slice(x);
    console.log(x);
    console.log(x.length);
    console.log(plop);

输出

[item: function, namedItem: function]
0: th.fc-day-header.fc-sun.fc-widget-header.fc-first
1: th.fc-day-header.fc-mon.fc-widget-header
2: th.fc-day-header.fc-tue.fc-widget-header
3: th.fc-day-header.fc-wed.fc-widget-header
4: th.fc-day-header.fc-thu.fc-widget-header
5: th.fc-day-header.fc-fri.fc-widget-header
6: th.fc-day-header.fc-sat.fc-widget-header.fc-last
length: 7__proto__: HTMLCollection
    controller.js:309 0
    controller.js:310 []

为什么我在这里看到长度 7 而 x.length 给出 0 ？

提前致谢

更新：我设置了代码 

$scope.$on('$viewContentLoaded', function(){
}

它现在有效。我还无法设置点击方法，但它进展^^

$scope.$on('$viewContentLoaded', function(){
var x = document.getElementsByTagName("th");
var arr =  Array.prototype.slice.call(x);
        console.log(arr);
        for (var i = 0; i < arr.length; i++) {
           // console.log("iterate");
            console.log(arr[i]);
            arr[i].onclick = function(){
                console.log("lol");
            };
        }
};

当您尝试从HTMLCollection创建数组副本时，您错过了.call()。 取而代之的是：

var x = document.getElementsByTagName("th");
var plop = Array.prototype.slice(x);

您可以这样做：

var x = document.getElementsByTagName("th");
var plop = Array.prototype.slice.call(x);
console.log(plop);

注意：您不需要仅仅为了迭代它而制作数组副本。 您可以直接迭代 HTMLCollection：

var items = document.getElementsByTagName("th");
for (var i = 0; i < items.length; i++) {
    console.log(items[i]);
}
相关文章：