JavaScript: Durchläuft alle von getElementsByTagName zurückgegebenen Elemente

Ich versuche eine Schleife durch alle Elemente retruned von getElementsByTagName("input") forEach zu verwenden. Irgendwelche Ideen, warum dies nicht funktioniert in FF, Chrome oder 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>

InformationsquelleAutor der Frage slayernoah | 2013-10-11

  1. 53

    Müssen Sie konvertieren die nodelist-array mit:

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

    oder verwenden Sie die for-Schleife.

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

    und ändern Ausstellungsergebnisse Funktion:

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

    InformationsquelleAutor der Antwort Dvir

  2. 21

    Yay, ES6: 

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

    MDN Doc für Spread-Operator (...)

    InformationsquelleAutor der Antwort jtheletter

  3. 6

    Weil input ist kein array, es ist HTMLCollection
    Verwenden Sie eine for Schleife wäre besser.

    Und da HTMLCollections sind array-ähnliche Objekte können Sie call Array#forEach auf, wie diese

    Array.prototype.forEach.call(input, ShowResults);

    InformationsquelleAutor der Antwort grape_mao

  4. 4

    Es ist becauseinput ist html-collection. html-Sammlung nicht über forEach.

    können Sie ganz einfach conver es auf array von Arrays.der Prototyp.Scheibe

    Beispiel:

    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/

    InformationsquelleAutor der Antwort Daniel Dykszak

  5. 3

    Grund, dies nicht funktionieren wird, weil 'getElementsByTagName' gibt ein array - artiges Objekt, anstatt eine tatsächliche array. In Fall, dass Sie nicht bewusst sind, hier ist, wie beide Aussehen :-

    var realArray = ['a', 'b', 'c'];
var arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

    So, da Array-ähnliche Objekte Erben von " Objekt.Prototyp' statt 'Array.Prototyp', dies bedeutet, dass die Array-ähnliche Objekte können nicht auf gemeinsame Array-Prototyp-Methoden wie forEach(), push(), map(), filter () und slice().

    Hoffe, das hilft!

    InformationsquelleAutor der Antwort Naman Sancheti

  6. 2

    HTMLCollections nicht die gleichen Methoden wie arrays. Sie können dies überprüfen, durch tiping dies in der javascript-Konsole Ihres Browsers.

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

    Und die Konsole zurück true wenn elements (in diesem Fall) hat eine Methode namens forEach zu nennen.

    InformationsquelleAutor der Antwort Andrés Torres

  7. 1

    In ES6 können Sie die spread Betreiber zu konvertieren, eine HtmlCollection in ein Array. siehe diese Frage Warum kann ich nicht mit Arrays.forEach auf eine Sammlung von Javascript-Elementen?

    input = [...input]
input.forEach(ShowResults)

    InformationsquelleAutor der Antwort inostia

  8. 1

    Habe ich dieses:

    HTMLCollection.prototype.map = Array.prototype.map;

    Können Sie jetzt mit der Karte auf jeden HTMLCollection.

    document.getElementsByTagName("input").map(
    input => console.log(input)
);

    InformationsquelleAutor der Antwort Toni Almeida

Schreibe einen Kommentar