web-dev-qa-db-ja.com

HTMLCollectionを反復する方法

クラス_node-item_を使用してHTMLにいくつかの要素があります。次のコマンドを使用して、コンポーネント内の要素にアクセスします。

_let nodeItems = document.getElementsByClassName('node-item');
_

nodeItemsをログに記録すると、長さ4の_HTMLCollection[]_が得られます.

私は多くの方法を試しましたが、それでもnodeItemsを反復できません：

1-最初の試行：

_let bar = [].slice.call(nodeItems);
for (var g of bar){
    console.log(g); //gives me nothing
} 
_

2秒の試行：

_for(let c of <any>nodeItems) {
    console.log(c); //gives me nothing
}
_

そして、配列反復とオブジェクト反復を試みましたが、それでもundefinedまたはerrorです。また試しました：

let nodeItems = document.querySelector(selectors);

しかし、同じ問題。

javascriptangulartypescripthtmlcollection
6
Fateme Fazli

nodeItemsはHTMLCollectionで、配列のようなオブジェクトです。

それは、最新のブラウザーで反復可能です。イテレータは downlevelIterationコンパイラオプション を有効にしてサポートされており、この場合は次のようになります。

const nodeItems = document.getElementsByClassName('node-item');

for (const c of nodeItems) {
  // ...
}

イテラブルは古いブラウザでポリフィルできます。 core-jsは DOMイテラブルのポリフィル を提供します。

それ以外の場合は、nodeItemsを配列に変換して、通常どおり反復できます。

const nodeItems = Array.from(document.getElementsByClassName('node-item'));

for (const c of nodeItems) {
  // ...
}
7
Estus Flask

Array.from(document.getElementsByClassName('node-item'))または拡散演算子[...document.getElementsByClassName('node-item')]を使用して、配列で使用するものをすべて使用します。

それとは別に、通常のforループを使用することもできます

let nodeItems = document.getElementsByClassName('node-item');
for (let i = 0; i < nodeItems.length; i++) {
    // access current element with nodeItems[i]
}
4
baao

spread演算子をdocument.querySelectorAllで使用して配列を作成できます。

これがスニペットです：

let nodeItems = [...(document.querySelectorAll('.class1'))];

for (var g of nodeItems) {
  console.log( g.innerHTML ); 
}
<div class='class1'>Text 1</div>
<div class='class1'>Text 2</div>
<div class='class1'>Text 3</div>

ドキュメント： Spread

2
Eddie