☰

typescript for loop over HTMLCollection 質問する

tag-icon • tag-icon typescript
typescript for loop over HTMLCollection 質問する

結果を反復処理したい

document.getElementsByTagName("...");

これはHTMLCollection配列ではなく を返します。したがって、 を単純に使用することはできませんforEach。以下は可能ですが、あまり見栄えがよくありません。

let elements = document.getElementsByTagName("...");
for (var i = 0, m = elements.length; i < m; i++) {
    let element = elements[i];
}

JavaScript の場合も、ほぼ同じ質問が存在します。HTMLCollection要素のforループ

そしてどうやら、最新のアップデートにより、最新のブラウザは以下をサポートするようになりました。

var list = document.getElementsByClassName("events");
for (let item of list) {
    log(item.id);
}

しかし、TypeScript コンパイラは次のようにエラーを出力します:

error TS2495: Type 'NodeListOf<HTMLParagraphElement>' is not an array type or a string type.

それでも、適切な Javascript に変換されます。ここで何をしているかを認識しており、ソースコードをそのままコピーするだけではありません。コンパイルされた出力は次のようになります。

var elements = main_div.getElementsByTagName("p");
for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
    var element = elements_1[_i];
}

生成されたコードは古いブラウザでもサポートされるので、これは素晴らしいことです。ただし、エラー メッセージは削除したいと思います。

私のコンパイラオプションは次のとおりです:

{
    "compilerOptions": {

        "module": "commonjs",
        "target": "es5",
        "sourceMap": true,
        "rootDir": "src",
        "lib": [
            "es2015",
            "dom"
        ]
    }
}

ライブラリ オプションを編集してみました。この特定の機能は ES6 の一部であり、何度か改良されています。そのため、ライブラリ内のさまざまな ecmascript バージョンをテストしましたが、機能する設定を見つけることができませんでした。

ベストアンサー1

forEachを使用する場合は配列に変換できます

const elements: Element[] = Array.from(document.getElementsByTagName("..."));
elements.forEach((el: Element) => {
    // do something
})

おすすめ記事