JS: iterowanie po wyniku getElementsByClassName przy użyciu Array.forEach

240

Chcę iterować niektóre elementy DOM, robię to:

document.getElementsByClassName( "myclass" ).forEach( function(element, index, array) {
  //do stuff
});

ale pojawia się błąd:

document.getElementsByClassName („moja_klasa”). forEach nie jest funkcją

Używam Firefoksa 3, więc wiem, że oba getElementsByClassNamei Array.forEachsą obecne. Działa to dobrze:

[2, 5, 9].forEach( function(element, index, array) {
  //do stuff
});

Czy wynika z getElementsByClassNametablicy? Jeśli nie, co to jest?

javascript foreach getelementsbyclassname

— Steve Claridge
źródło

384

Nie. Jak podano w DOM4 , jest to HTMLCollection(przynajmniej w nowoczesnych przeglądarkach. Starsze przeglądarki zwróciły a NodeList).

We wszystkich współczesnych przeglądarkach (prawie wszystko inne IE <= 8) możesz wywołać forEachmetodę Array , przekazując jej listę elementów ( HTMLCollectionczy to lub NodeList) jako thiswartość:

var els = document.getElementsByClassName("myclass");

Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
    console.log(el.tagName);
});

// Or
[].forEach.call(els, function (el) {...});

Jeśli jesteś szczęśliwy, że możesz korzystać z ES6 (tzn. Możesz bezpiecznie zignorować Internet Explorera lub używasz transpilatora ES5), możesz użyć Array.from:

Array.from(els).forEach((el) => {
    // Do stuff here
    console.log(el.tagName);
});

— Tim Down
źródło

29

Nie trzeba najpierw konwertować go na macierz. Po prostu użyj [].forEach.call(elsArray, function () {...}).

— kay - SE is evil

1

To NIE jest lista węzłów. Jest to obiekt podobny do tablicy. Nawet nie sądzę, że ma typ instancji. querySelectorAllMetoda zwraca jednak NodeList.

— Maksim Vi.

2

@MaksimVi. Masz całkowitą rację: DOM4 określa, że document.getElementsByClassName()powinien zwrócić HTMLCollection(który jest bardzo podobny, ale nie NodeList). Dzięki za zwrócenie uwagi na błąd.

— Tim Down

@MaksimVi .: Zastanawiam się, czy to się kiedyś zmieniło. Zazwyczaj sprawdzam te rzeczy.

— Tim Down

1

@TimDown, dzięki za HTMLCollectionwskazówkę. Teraz w końcu mogę użyć HTMLCollection.prototype.forEach = Array.prototype.forEach;w moim kodzie.

— Maksim Vi.

70

Możesz użyć Array.fromdo konwersji kolekcji na tablicę, co jest o wiele czystsze niż Array.prototype.forEach.call:

Array.from(document.getElementsByClassName("myclass")).forEach(
    function(element, index, array) {
        // do stuff
    }
);

W starszych przeglądarkach, które nie obsługują Array.from, musisz użyć czegoś takiego jak Babel.

ES6 dodaje również tę składnię:

[...document.getElementsByClassName("myclass")].forEach(
    (element, index, array) => {
        // do stuff
    }
);

Restrukturyzacja spoczynkowa ...działa na wszystkich obiektach podobnych do tablicy, nie tylko na samych tablicach, a następnie do tworzenia tablicy na podstawie wartości używana jest stara, dobra składnia tablicy.

Podczas gdy funkcja alternatywna querySelectorAll(która sprawia, że jest getElementsByClassNameprzestarzała) zwraca kolekcję, która ma forEachnatywnie, innych metod takich jak maplub filterbrak, więc ta składnia jest nadal przydatna:

[...document.querySelectorAll(".myclass")].map(
    (element, index, array) => {
        // do stuff
    }
);

[...document.querySelectorAll(".myclass")].map(element => element.innerHTML);

— Athari
źródło

6

Uwaga: bez transpilacji zgodnie z sugestią (Babel), NIE jest to kompatybilne z IE <Edge, Opera, Safari <9, przeglądarka Android, Chrome na Androida, ... itd.) Źródło: mozilla dev docs

— Sean

30

Lub możesz użyć, querySelectorAllktóra zwraca NodeList :

document.querySelectorAll('.myclass').forEach(...)

Obsługiwane przez nowoczesne przeglądarki (w tym Edge, ale nie IE):
Czy mogę używać querySelectorAll
NodeList.prototype.forEach ()

MDN: Document.querySelectorAll ()

— icl7126
źródło

4

Należy pamiętać o ograniczeniu wydajności w stosunku do getElementByClassName

— Szabolcs Páll

3

Kara za wydajność jest znikoma w porównaniu z innymi bardziej intensywnymi zadaniami, takimi jak modyfikowanie DOM. Jeśli wykonam 60 000 z nich w ciągu 1 milisekundy , jestem prawie pewien, że nie będzie to problemem dla jakiegokolwiek rozsądnego użycia :)

— icl7126

1

Podłączyłeś zły test porównawczy. Oto poprawna miara: netthmark.net/Benchmarks/Show/4076/0/... Właśnie uruchomiłem to na moim słabszym telefonie, mam 160k / s vs 380k / s. Odkąd wspominałeś o manipulacji DOM, tutaj jest to, że zbyt pomiaruthat.net/Benchmarks/Show/5705/0/... Masz 50k / s vs. 130k / s. Jak widać, manipulowanie DOM jest jeszcze wolniejsze, prawdopodobnie z powodu statyczności NodeList (jak wspominają inni). Nadal nieistotne w większości przypadków użycia, ale mimo to prawie 3-krotnie wolniejsze.

— Szabolcs Páll

14

Edycja: Mimo że typ zwrotu zmienił się w nowych wersjach HTML (patrz zaktualizowana odpowiedź Tim Down), poniższy kod nadal działa.

Jak powiedzieli inni, jest to lista NodeList. Oto kompletny, działający przykład, który możesz wypróbować:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function findTheOddOnes()
            {
                var theOddOnes = document.getElementsByClassName("odd");
                for(var i=0; i<theOddOnes.length; i++)
                {
                    alert(theOddOnes[i].innerHTML);
                }
            }
        </script>
    </head>
    <body>
        <h1>getElementsByClassName Test</h1>
        <p class="odd">This is an odd para.</p>
        <p>This is an even para.</p>
        <p class="odd">This one is also odd.</p>
        <p>This one is not odd.</p>
        <form>
            <input type="button" value="Find the odd ones..." onclick="findTheOddOnes()">
        </form>
    </body>
</html>

Działa to w IE 9, FF 5, Safari 5 i Chrome 12 w Win 7.

— james.garriss
źródło

9

Wynikiem getElementsByClassName()nie jest tablica, ale obiekt podobny do tablicy . W szczególności jest to nazywane an HTMLCollection, z którym nie należy mylić NodeList( który ma własną forEach()metodę ).

Jednym prostym sposobem przy użyciu ES2015 do konwersji obiektu typu tablicowego do użytku z Array.prototype.forEach()tym, o którym jeszcze nie wspomniano, jest użycie operatora lub składni spreadu :

const elementsArray = document.getElementsByClassName('myclass');

[...elementsArray].forEach((element, index, array) => {
    // do something
});

— Kloptikus
źródło

2

Uważam, że jest to naprawdę właściwy sposób, aby to zrobić w nowoczesnych przeglądarkach. To jest dokładnie ta składnia rozkładów przypadków użycia, która została stworzona do rozwiązania.

— Matt Korostoff,

5

Czy wynik getElementsByClassName jest tablicą?

Nie

Jeśli nie, co to jest?

Podobnie jak w przypadku wszystkich metod DOM zwracających wiele elementów, jest to NodeList, patrz https://developer.mozilla.org/en/DOM/document.getElementsByClassName

— Quentin
źródło

3

Jak już powiedziano, getElementsByClassNamezwraca HTMLCollection , który jest zdefiniowany jako

[Exposed=Window]
interface HTMLCollection {
  readonly attribute unsigned long length;
  getter Element? item(unsigned long index);
  getter Element? namedItem(DOMString name);
};

Wcześniej niektóre przeglądarki zwracały zamiast tego NodeList .

[Exposed=Window]
interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable<Node>;
};

Różnica jest ważna, ponieważ DOM4 definiuje teraz NodeList s jako iterowalny.

Zgodnie z projektem Web IDL ,

Obiekty implementujące interfejs zadeklarowany jako obsługujący iterację są iterowane w celu uzyskania sekwencji wartości.

Uwaga : W powiązaniu języka ECMAScript iterowalny interfejs będzie miał „wpisy”, „forEach”, „klucze”, „wartości” i właściwości iteratora @@ na swoim prototypowym obiekcie interfejsu .

Oznacza to, że jeśli chcesz użyć forEach, możesz użyć metody DOM, która zwraca NodeList , jak querySelectorAll.

document.querySelectorAll(".myclass").forEach(function(element, index, array) {
  // do stuff
});

Uwaga: nie jest to jeszcze szeroko obsługiwane. Zobacz także metodę forEach dla Node.childNodes?

— Oriol
źródło

1

Powrót do Chrome 49forEach in not a function

— Witalij Zdanewicz

@VitalyZdanevich Wypróbuj Chromium 50

— Oriol

W Chrome 50 dostajędocument.querySelectorAll(...).forEach is not a function

— Witalij Zdanevich

@VitalyZdanevich To działało na Chromium 50 i nadal działa na Chromium 53. Może nie było uważane za wystarczająco stabilne, aby zostać wysłane do Chrome 50.

— Oriol

1

Nie Arrayzwraca ani zwraca NodeList .

— reko_t
źródło

1

Jest to bezpieczniejszy sposób:

var elements = document.getElementsByClassName("myclass");
for (var i = 0; i < elements.length; i++) myFunction(elements[i]);

— gildniy
źródło

0

getElementsByClassNamezwraca HTMLCollection w nowoczesnych przeglądarkach.

który jest obiektem podobnym do tablicy podobnym do argumentów, które można iterować przez for...ofpętlę, zobacz poniżej, co mówi o tym MDN doc:

Instrukcja for ... tworzy pętlę iterującą po obiektach iterowalnych , w tym: wbudowanym String, Array, obiektach podobnych do Array (np. Argumenty lub NodeList), TypedArray, Map, Set i iterable zdefiniowane przez użytkownika. Wywołuje niestandardowy hak iteracji z instrukcjami do wykonania dla wartości każdej odrębnej właściwości obiektu.

przykład

for (let element of getElementsByClassName("classname")){
   element.style.display="none";
}

— Haritsinh Gohil
źródło

Nie tak, zgodnie z maszynowym pismem:error TS2488: Type 'HTMLCollectionOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.

— Turtles Are Cute

@TurtlesAreCute, tutaj OP używa javascript a nie maszynopisu i odpowiedziałem zgodnie z zaleceniem waniliowym js, więc w maszynopisie może być inne rozwiązanie problemu.

— Haritsinh Gohil

@TurtlesAreCute, Nawiasem mówiąc, działa również również w maszynopisie, ale musisz wspomnieć o właściwym typie zmiennej, która zawiera element konkretnej klasy css, więc może ją odpowiednio rzutować, po szczegóły zobacz tę odpowiedź .

— Haritsinh Gohil

0

Oto test, który utworzyłem na jsperf: https://jsperf.com/vanillajs-loop-through-elements-of-class

Najbardziej udoskonaloną wersją w Chrome i Firefox jest stara dobra pętla for w połączeniu z document.getElementsByClassName:

var elements = document.getElementsByClassName('testClass'), elLength = elements.length;
for (var i = 0; i < elLength; i++) {
    elements.item(i).textContent = 'Tested';
};

W Safari ten wariant jest zwycięzcą:

var elements = document.querySelectorAll('.testClass');
elements.forEach((element) => {
    element.textContent = 'Tested';
});

Jeśli chcesz mieć najbardziej wydajny wariant dla wszystkich przeglądarek, może to być ten:

var elements = document.getElementsByClassName('testClass');
Array.from(elements).map(
    (element) => {
        return element.textContent = 'Tested';
    }
);

— StefanSL
źródło