HTMLコレクションの長さはゼロです。配列に変換できません。 Handlebars.js

Question

私はhtmlファイルのコンテンツをハンドルバーテンプレートに置き換えました。今、私はこれはそれがノードリストを返していましたように、handelbarsテンプレートを使用する前に、細かい仕事をしていたコード

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'); 
     }); 
    } 
} 

をJS持って、私は、要素を反復し、各要素にクリックを追加することができました。

ハンドルバーを使用した後、私のelementsはHTMLcollectionであり、これを配列に変換しようとしましたが、空の配列が取得されています。

以下の質問があります。ハンドルバーがこの変更を引き起こしていますか？（ノードリストの代わりにHTMLcollectionを返す）または、2つの別々のものを接続していますか？

なぜ空の配列が得られますか？

Answer 1

だから私は少し助けを借りてこれを解決しました。

空の配列を取得したのは、テンプレートを作成する前にJSコードがHTMLコレクションを変換しようとしていたためです。

これは、ゼロとして出てきたHTMLコレクションの長さを表示することで確認しました。

すべて私はこれを修正するために、ハンドルバーテンプレートがそのプロセスで完了した後に、コレクションに配列を変換することを確認する必要がありました。