HTMLcollection 长度为零。无法将其转换为数组。车把.js答案

【问题标题】：HTMLcollection length is zero. Can't convert it to array. Handlebars.jsHTMLcollection 长度为零。无法将其转换为数组。车把.js
【发布时间】：2017-01-17 06:35:51
【问题描述】：

我用车把模板替换了我的 html 文件中的内容。现在，我有了这个js代码

function init() {
    var elements = document.getElementsByTagName('li');
    console.log("before click");
    console.log(elements);
    pullData();
    var arr = [].slice.call(elements);
    console.log(arr);

    for (var i = 0; i < arr.length; i++) {
        console.log("before click");
        arr[i].addEventListener("click", function() {
            console.log("after click");
            for (var j = 0; j < arr.length; j++) {
                arr[j].classList.remove('selected', 'no-hover');
            }
            var contentList = document.querySelectorAll('.show');
            console.log(contentList);
            for (var k = 0; k < contentList.length; k++) {
                contentList[k].classList.remove('show');
            }
            document.getElementById('right').style.display = 'block';
            var id = this.id;
            console.log(id);
            var targetElements = document.querySelectorAll('.' + id);
            console.log(targetElements);
            for (var x = 0; x < targetElements.length; x++) {
                targetElements[x].classList.add('show');
            }
            this.classList.add('selected', 'no-hover');
        });
    }
}

在使用 handelbars 模板之前工作正常，因为它返回一个节点列表，我能够迭代元素并将点击附加到每个元素。

使用把手后，我的elements 是一个HTMLcollection，我尝试将其转换为数组，但得到的是一个空数组。

我有以下问题。是车把导致了这种变化吗？（返回 HTMLcollection 而不是节点列表）或者，我只是连接两个不同的东西？

为什么我得到一个空数组？

【问题讨论】：

完整的 html 或只是车把模板？

标签： javascript arrays handlebars.js htmlcollection

【解决方案1】：

所以，我在一些帮助下解决了这个问题。

我得到一个空数组的原因是因为我的 JS 代码试图在把手构建模板之前转换 HTMLcollection。

我通过显示 HTMLcollection 的长度为零来检查这一点。

为了解决这个问题，我必须确保在把手模板处理完之后将集合转换为数组。

【讨论】：