BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] getElementsByTagNameから返されるすべての要素をループで処理する方法 [重複].

2023-06-23 18:51:35

質問

から再検索されたすべての要素をループ処理しようとしています。 getElementsByTagName("input") から再送されたすべての要素をforEachを使ってループしようとしています。なぜこれがFF、Chrome、またはIEで動作しないのか、何かアイデアはありますか？ 

<html>
    <head>
    </head>
    <body>
        <input type="text" value="" />
        <input type="text" value="" />
        <script>
            function ShowResults(value, index, ar) {
                alert(index);
            }
            var input = document.getElementsByTagName("input");
            alert(input.length);
            input.forEach(ShowResults);
    </script>
    </body>
</html>

どのように解決するのですか？

nodelistを配列に変換する必要があります。 

<html>
    <head>
    </head>
    <body>
        <input type="text" value="" />
        <input type="text" value="" />
        <script>
            function ShowResults(value, index, ar) {
                alert(index);
            }
            var input = document.getElementsByTagName("input");
            var inputList = Array.prototype.slice.call(input);
            alert(inputList.length);
            inputList.forEach(ShowResults);
    </script>
    </body>
</html>

またはforループを使用します。 

for(let i = 0;i < input.length; i++)
{
    ShowResults(input[i].value);
}

で、ShowResults関数を変更します。 

function ShowResults(value) {
   alert(value);
}

なぜそのようなことをする必要があるのでしょうか？

JavaScriptのいくつかのオブジェクトは配列のように見えますが、配列ではありません。これは通常、インデックス付きアクセスや長さプロパティは持っているが、配列のメソッドは持っていないことを意味します。例としては、特殊な変数引数、DOM ノードリスト、そして文字列があります。配列のようなオブジェクトと一般的なメソッドでは、配列のようなオブジェクトを扱うためのヒントが紹介されています。 ソース

2019.10.07のUPDATE

現在ES6では [...inputList].forEach または Array.from(inputList)

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します