javascript - HTML コレクションの長さがゼロです。配列に変換できません。ハンドルバー.js

Question

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 を返します) それとも、2 つの別々のものを接続しているだけですか?

空の配列を取得するのはなぜですか?