for loop querySelectorAll

Question

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

Answer 1

Редактировать: This is shipping in Chrome 51.

Jake Archibald posted a simple fix:

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

И для петель.

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

Try используя 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" />

Вы можете также использовать Array.prototype.values()

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

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

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

Answer 5

Вы можете использовать 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.

Answer 6

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

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

хорошее от IE9 и выше поддержки

Answer 7

Native Symbol.iterator для NodeList был added к WHATWG's DOM spec в 2014 г.

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

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

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

Answer 8

Вот еще одно решение для современной эпохи:

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

Это имеет преимущество spread operator, который поддерживается в Google Chrome 46+, Firefox 16+ и Edge, и просто для удовольствия arrow function.

Answer 9

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

До: Promise.all(p1, p2)

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

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