For loop querySelectorAll

Mozilla заявляет, что "для циклов петли над объектами NodeList правильно". (источник: https://developer.mozilla.org/en-US/docs/Web/API/NodeList) Однако это не работает в Chrome 43. Это неправильная документация или ошибка браузера?

Скопированный код примера, используемый на странице с флажками:

var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
  item.checked = true;
}

Ответы

Ответ 1

Изменить: Это доставка в Chrome 51.

Джейк Арчибальд опубликовал простое исправление:

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]

И для циклов.

Ответ 2

Документы правильные, но я бы не назвал это ошибкой. Скорее это "еще не реализованная функция".

Для этого нет стандарта, и по-прежнему активно обсуждается вопрос о том, как DOM должен интегрироваться с ES6. Обратите внимание, что ясно, что querySelectorAll должен возвращать что-то итерабельное, которое может использоваться в цикле for of (как и обычные ожидания), но не ясно, как это должно произойти (пусть NodeList реализует интерфейс Iterable? некоторые Elements collection подкласс Array?).

Ответ 3

Так как я успешно использовал for..of в Gecko для итерации NodeList s, кажется, это ошибка браузера или, по крайней мере, отсутствие браузера.

Фактический рабочий код из пользовательского текста, который я использую в настоящее время:

let llnk = document.querySelectorAll("div#threadlist a.threadtitle_unread");
for (let lnk of llnk) {
    //...
}

(Это также использует let, но это другая история.)

Ответ 4

Попробуйте использовать Array.prototype.entries()

var list = [].entries.call(document.querySelectorAll("input[type=checkbox]"));

for (item of list) {
  item[1].checked = true;
};

<input type="checkbox" /><input type="checkbox" />

Ответ 5

Здесь еще одно решение для современного времени:

[...document.querySelectorAll("input[type=checkbox]")].forEach(node => {
     node.textContent = "foo";
});

Это использует оператор который поддерживается в Google Chrome 46+, Firefox 16+ и Edge, и просто для удовольствия функция стрелки.

Ответ 6

Вы можете использовать Array.from

let _list = document.querySelectorAll('input[type=checkbox]');

let list = Array.from(_list);

for (let item of list) {
  //... just like an array
  item.checked = true
}

или более коротко

let list = document.querySelectorAll('input[type=checkbox]');

for (let item of Array.from(list)) {
  item.checked = true
}

Важное примечание Array.from было представлено в Chrome 45 source.

Ответ 7

Это то, что я делаю, для другого подхода

Array.prototype.forEach.call(document.querySelectorAll("input[type=checkbox]"),function(ele,idx)
{
    ele.checked = true;
}

хорошо от IE9 и выше

Ответ 8

Нативная поддержка Symbol.iterator для NodeList была добавлена  в Спецификация WHATWG DOM в 2014 году.

К сожалению, Chrome 51 является первой версией Chrome для ее поддержки, и ее бета-версия только что была выпущена во время написания этого ответа. Кроме того, нет поддержки в любой версии Internet Explorer или Edge.

Чтобы добавить Symbol.iterator поддержку NodeList во всех браузерах к вашему коду, используйте только polyfill:

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

Ответ 9

У меня была эта проблема. Оказывается, мой был вызван вызовом Promise.all() с параметрами вместо массива. Например:

До: Promise.all(p1, p2)

После: Promise.all([p1, p2])

Надеюсь, это поможет кому-то.