Я хочу повторити деякі елементи 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масиву? Якщо ні, то що це?
Відповіді:
Ні. Як зазначено в DOM4 , це HTMLCollection(принаймні, у сучасних браузерах. Старіші браузери повернулися а NodeList).
У всіх сучасних браузерах (майже будь-який інший IE <= 8) ви можете викликати forEachметод Array , передаючи йому список елементів (будь то HTMLCollectionчи NodeList) як thisзначення:
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) {...});Якщо ви щасливі, що зможете використовувати ES6 (тобто ви можете сміливо ігнорувати Internet Explorer або використовуєте транспілер ES5), ви можете використовувати Array.from:
Array.from(els).forEach((el) => {
// Do stuff here
console.log(el.tagName);
});querySelectorAllХоча метод повертає NodeList.
document.getElementsByClassName()повинен повернути HTMLCollection(що дуже схоже, але не NodeList). Дякуємо, що вказали на помилку.
HTMLCollectionпораду. Тепер я нарешті можу використовувати HTMLCollection.prototype.forEach = Array.prototype.forEach;в своєму коді.
Ви можете використовувати Array.fromдля перетворення колекції в масив, який чистіше, ніж Array.prototype.forEach.call:
Array.from(document.getElementsByClassName("myclass")).forEach(
function(element, index, array) {
// do stuff
}
);У старих браузерах, які не підтримують Array.from, потрібно використовувати щось на зразок Babel.
ES6 також додає цей синтаксис:
[...document.getElementsByClassName("myclass")].forEach(
(element, index, array) => {
// do stuff
}
);Деструструктура відпочинку за допомогою ...всіх об'єктів, схожих на масив, не лише самих масивів, тоді гарний синтаксис старого масиву використовується для побудови масиву зі значень.
У той час як альтернативна функція querySelectorAll(яка getElementsByClassNameніби не застаріла) повертає колекцію, яка є forEachвродженою, інші методи на кшталт mapабо filterвідсутні, тому цей синтаксис все ще корисний:
[...document.querySelectorAll(".myclass")].map(
(element, index, array) => {
// do stuff
}
);
[...document.querySelectorAll(".myclass")].map(element => element.innerHTML);Або ви можете використовувати, querySelectorAllякий повертає NodeList :
document.querySelectorAll('.myclass').forEach(...)Підтримується сучасними браузерами (включаючи Edge, але не IE):
чи можу я використовувати querySelectorAll
NodeList.prototype.forEach ()
Редагувати: Хоча тип повернення змінився в нових версіях HTML (див. Оновлену відповідь Тіма Дауна), код нижче все ще працює.
Як говорили інші, це NodeList. Ось повний робочий приклад, який ви можете спробувати:
<!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>Це працює в IE 9, FF 5, Safari 5 та Chrome 12 на Win 7.
Результатом getElementsByClassName()не є масив, а об’єкт, схожий на масив . Зокрема, це називається an HTMLCollection, не плутати з ним NodeList(у якого є власний forEach()метод ).
Один простий спосіб з ES2015 для перетворення об’єкта, подібного до масиву, для використання, про Array.prototype.forEach()який ще не було сказано, - це використовувати оператор розповсюдження або синтаксис спред :
const elementsArray = document.getElementsByClassName('myclass');
[...elementsArray].forEach((element, index, array) => {
// do something
});Чи є результатом getElementsByClassName масив?
Немає
Якщо ні, то що це?
Як і у всіх методах DOM, які повертають кілька елементів, це NodeList, див. Https://developer.mozilla.org/en/DOM/document.getElementsByClassName
Як уже було сказано, getElementsByClassNameповертає HTMLCollection , який визначається як
[Exposed=Window]
interface HTMLCollection {
readonly attribute unsigned long length;
getter Element? item(unsigned long index);
getter Element? namedItem(DOMString name);
};Раніше деякі браузери натомість повертали NodeList .
[Exposed=Window]
interface NodeList {
getter Node? item(unsigned long index);
readonly attribute unsigned long length;
iterable<Node>;
};Різниця важлива, оскільки тепер DOM4 визначає NodeList s як ітерабельний.
Згідно з проектом Web IDL ,
Об'єкти, що реалізують інтерфейс, який оголошується ітерабельною підтримкою, повторюється для отримання послідовності значень.
Примітка . У прив'язці до мови ECMAScript інтерфейс, який можна виправити, матиме властивості "записи", "forEach", "ключі", "значення" та @@ iterator на об'єкті прототипу інтерфейсу .
Це означає, що якщо ви хочете використовувати forEach, ви можете використовувати метод DOM, який повертає NodeList , наприклад querySelectorAll.
document.querySelectorAll(".myclass").forEach(function(element, index, array) {
// do stuff
});Зауважте, це ще не підтримується широко. Також див. ForEach метод Node.childNodes?
forEach in not a function
document.querySelectorAll(...).forEach is not a function
getElementsByClassNameповертає HTMLCollection в сучасних браузерах.
який є
масив як об'єкт схожий на аргументи , який iteratable по for...ofпетлі см нижче , ніж MDN документ говорить про це:
Оператор for ... створює цикл ітерації над ітерабельними об'єктами , включаючи: вбудовані String, Array, Array-подібні об'єкти (наприклад, аргументи або NodeList), TypedArray, Map, Set та визначені користувачем ітерабелі. Він викликає користувацький ітераційний гачок із заявами, які слід виконати для значення кожного окремого властивості об'єкта.
приклад
for (let element of getElementsByClassName("classname")){
element.style.display="none";
}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 - це добра версія для циклу в поєднанні з document.getElementsByClassName:
var elements = document.getElementsByClassName('testClass'), elLength = elements.length;
for (var i = 0; i < elLength; i++) {
elements.item(i).textContent = 'Tested';
};У Safari цей варіант є переможцем:
var elements = document.querySelectorAll('.testClass');
elements.forEach((element) => {
element.textContent = 'Tested';
});Якщо ви хочете найбільш популярний варіант для всіх браузерів, це може бути саме цей:
var elements = document.getElementsByClassName('testClass');
Array.from(elements).map(
(element) => {
return element.textContent = 'Tested';
}
);
[].forEach.call(elsArray, function () {...}).