Я хочу перебрать некоторые элементы DOM, я делаю это:
document.getElementsByClassName( "myclass" ).forEach( function(element, index, array) {
//do stuff
});
но я получаю ошибку:
document.getElementsByClassName ("myclass"). forEach не является функцией
Я использую Firefox 3, поэтому я знаю, что оба getElementsByClassName
и Array.forEach
присутствуют. Это прекрасно работает:
[2, 5, 9].forEach( function(element, index, array) {
//do stuff
});
Является ли результат getElementsByClassName
массива? Если нет, то что это?
источник
[].forEach.call(elsArray, function () {...})
.querySelectorAll
хотя метод возвращает NodeListdocument.getElementsByClassName()
должно возвращатьHTMLCollection
(что очень похоже, но не NodeList). Спасибо за указание на ошибку.HTMLCollection
совет. Теперь я, наконец, могу использоватьHTMLCollection.prototype.forEach = Array.prototype.forEach;
в своем коде.Вы можете использовать
Array.from
для преобразования коллекции в массив, который чище, чемArray.prototype.forEach.call
:В старых браузерах, которые не поддерживают
Array.from
, вам нужно использовать что-то вроде Babel.ES6 также добавляет этот синтаксис:
Остальная деструктуризация
...
работает со всеми объектами, похожими на массивы, а не только с самими массивами, тогда для создания массива из значений используется старый добрый синтаксис массива.В то время как альтернативная функция
querySelectorAll
(которая делаетgetElementsByClassName
устаревшей) возвращает коллекцию, котораяforEach
изначально имеет , другие методы, такие какmap
илиfilter
отсутствуют, поэтому этот синтаксис все еще полезен:источник
Или вы можете использовать
querySelectorAll
который возвращает NodeList :Поддерживается современными браузерами (включая Edge, но не IE):
могу ли я использовать
querySelectorAll NodeList.prototype.forEach ()
MDN: Document.querySelectorAll ()
источник
Редактировать: Хотя тип возврата изменился в новых версиях HTML (см. Обновленный ответ Тима Дауна), приведенный ниже код все еще работает.
Как уже говорили другие, это NodeList. Вот полный рабочий пример, который вы можете попробовать:
Это работает в IE 9, FF 5, Safari 5 и Chrome 12 на Win 7.
источник
Результатом
getElementsByClassName()
является не массив, а объект массива . В частности это называетсяHTMLCollection
, не путать сNodeList
( который имеет свой собственныйforEach()
метод ).Один простой способ с ES2015 преобразовать подобный массиву объект для использования с,
Array.prototype.forEach()
который еще не был упомянут, состоит в том, чтобы использовать оператор распространения или синтаксис распространения :источник
нет
Как и для всех методов DOM, которые возвращают несколько элементов, это NodeList, см. Https://developer.mozilla.org/en/DOM/document.getElementsByClassName.
источник
Как уже было сказано,
getElementsByClassName
возвращает коллекцию HTMLCollection , которая определяется какРанее некоторые браузеры возвращали NodeList .
Разница важна, потому что DOM4 теперь определяет NodeList s как итеративный.
Согласно проекту Web IDL ,
Это означает, что, если вы хотите использовать
forEach
, вы можете использовать метод DOM, который возвращает NodeList , напримерquerySelectorAll
.Обратите внимание, что пока это широко не поддерживается. Также см. Метод forEach для Node.childNodes?
источник
forEach in not a function
document.querySelectorAll(...).forEach is not a function
Он не возвращает
Array
, он возвращает NodeList .источник
Это более безопасный способ:
источник
getElementsByClassName
возвращает HTMLCollection в современных браузерах.который является массивоподобным объектом, похожим на аргументы, итеративный по
for...of
циклу, смотрите ниже, что MDN doc говорит об этом:пример
источник
error TS2488: Type 'HTMLCollectionOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
Вот тест, который я создал на jsperf: https://jsperf.com/vanillajs-loop-through-elements-of-class
Самая популярная версия в Chrome и Firefox - это старый добрый цикл for в сочетании с document.getElementsByClassName:
В Safari этот вариант является победителем:
Если вам нужен наиболее удобный вариант для всех браузеров, он может быть таким:
источник