Повторити цикл querySelectorAll збігів - CSS-хитрощі

Давайте розглянемо деякі варіанти ітерації над a NodeList, коли ви повернетесь із запуску a document.querySelectorAll.

Про це ми написали оновлену статтю: Набір варіантів циклічного перегляду querySelectorAll NodeLists.

Не всі браузери підтримують кожен з NodeLists, але для тих, які підтримують:

buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));

Ось хитрий спосіб обійти це завдяки дещо глибшій підтримці браузера.

var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));

Справедливе попередження, Тодд Мотто пояснює, чому цей метод є досить хитрим, описуючи понад 10 проблем із ним.

Ви також можете використовувати класичний цикл for:

var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )

Пропозиція Тодда полягає у створенні власного методу:

// forEach method, could be shipped as part of an Object Literal/Module var forEach = function (array, callback, scope) ( for (var i = 0; i < array.length; i++) ( callback.call(scope, i, array(i)); // passes back stuff we need ) ); // Usage: // optionally change the scope as final parameter too, like ECMA5 var myNodeList = document.querySelectorAll('li'); forEach(myNodeList, function (index, value) ( console.log(index, value); // passes index + value back! ));

Ви також можете розповсюдити список самостійно, що надасть вам доступ до інших методів масиву, поки ви в ньому.

(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));

Є також для ... петель. Firefox першим підтримав це, але підтримка стала досить хорошою:

for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )

Це досить інтенсивно (можливо, небезпечно і не рекомендується), але ви можете зробити так, щоб NodeList мав таку ж функцію forEach, що і Array, а потім використовувати його.

NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))

У статті MDN є трохи більше інформації.