82

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>
4

10 に答える 10

103

これを使用して、ノードリストを配列に変換する必要があります。

<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 年 7 月 10 日の更新
ES6 を使用できる Nowdays [...inputList].forEach、またはArray.from(inputList)

于 2013-10-11T18:17:49.980 に答える
64

やあ、ES6:

const children = [...parent.getElementsByTagName('tag')];
children.forEach((child) => { /* Do something; */ });

Spread Operator の MDN Doc ( ...)

于 2016-12-17T04:59:58.997 に答える
10

inputは配列ではないので、 HTMLCollection Use a forloop の方がよいでしょう。

そして、HTMLCollections は配列のようなオブジェクトなので、このようにできますcall Array#forEach

Array.prototype.forEach.call(input, ShowResults);
于 2013-10-11T18:24:24.220 に答える
5

入力がhtmlコレクションだからです。html コレクションには forEach がありません。

Array.prototype.slice で簡単に配列に変換できます

例：

function ShowResults(value, index, ar) {
            alert(index);
        }
        var input = document.getElementsByTagName("input");
        alert(input.length);
input = Array.prototype.slice.call(input)
        input.forEach(ShowResults);

http://jsfiddle.net/fPuKt/1/

于 2013-10-11T18:20:20.687 に答える
3

HTMLCollections には、配列と同じメソッドはありません。このことは、ブラウザの JavaScript コンソールでこれをチップすることで確認できます。

var elements = document.getElementsByClassName('some-class');
'forEach' in elements;

そして、（この場合）呼び出すために呼び出されたメソッドがある場合true、コンソールは戻ります。elementsforEach

于 2013-10-11T18:28:28.553 に答える
3

ES6 では、spread演算子を使用して HtmlCollection を配列に変換できます。この質問を参照してくださいJavascript 要素のコレクションで Array.forEach を使用できないのはなぜですか?

input = [...input]
input.forEach(ShowResults)
于 2016-09-30T18:45:07.443 に答える