Hãy xem xét một số tùy chọn để lặp lại a NodeList, khi bạn quay lại sau khi chạy a document.querySelectorAll.
Chúng tôi đã viết một bài báo cập nhật về điều này: Một loạt các tùy chọn để lặp lại truy vấnSelectorAll NodeLists.
Không phải tất cả các trình duyệt đều hỗ trợ forEach trên NodeLists, nhưng đối với những trình duyệt đó:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Đây là một cách khó để giải quyết vấn đề đó với hỗ trợ trình duyệt sâu hơn một chút.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Cảnh báo công bằng, Todd Motto giải thích lý do tại sao phương pháp này là một phương pháp khá hack, chi tiết hơn 10 vấn đề với nó.
Bạn cũng có thể sử dụng vòng lặp for cổ điển:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Đề xuất của Todd là hãy thực hiện phương pháp của riêng bạn:
// 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! ));Bạn cũng có thể tự trải danh sách, điều này sẽ cung cấp cho bạn quyền truy cập vào các phương thức mảng khác khi bạn đang ở đó.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Ngoài ra còn có các vòng lặp for… of. Firefox là người đầu tiên hỗ trợ điều này nhưng sự hỗ trợ đã trở nên khá tốt:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Điều này khá dữ dội (có thể nguy hiểm và không được khuyến khích) nhưng bạn có thể làm cho NodeList có cùng chức năng forEach như Array, sau đó sử dụng nó.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))Có một chút thông tin trong bài viết MDN.