cho truy vấn vòng lặpSelectorAll

Question

Mozilla tuyên bố rằng "cho vòng lặp sẽ lặp lại chính xác đối tượng NodeList". (nguồn: https://developer.mozilla.org/en-US/docs/Web/API/NodeList) Tuy nhiên, tính năng này không hoạt động trong Chrome 43. Đây có phải là tài liệu không chính xác hoặc lỗi trình duyệt không?

Các sao chép mã ví dụ được sử dụng trên một trang với hộp kiểm sau:

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

Answer 1

Chỉnh sửa: This is shipping in Chrome 51.

Jake Archibald posted a simple fix:

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

Và đối với các vòng.

Answer 2

Kể từ khi tôi đã sử dụng thành công trong for..of Gecko để lặp NodeList s, có vẻ như đây là một lỗi trình duyệt, hoặc ít nhất là một thiếu trình duyệt .

mã làm việc thực tế từ một UserScript Tôi hiện đang sử dụng:

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

(Điều này cũng sử dụng let, nhưng đó là một câu chuyện khác.)

Answer 3

Các tài liệu là chính xác, nhưng tôi sẽ không gọi một này lỗi. Thay vào đó là "tính năng chưa được triển khai".

Không có tiêu chuẩn cho điều này và vẫn còn thảo luận tích cực về cách DOM nên tích hợp với ES6. Chú ý rằng nó là rõ ràng rằngquerySelectorAll nên trả lại một cái gì đó iterable mà có thể được sử dụng trong một vòng lặp for of (tùy theo từng nhu cầu mong muốn phổ biến), nhưng nó không rõ ràng cách đó nên xảy ra (Hãy NodeList thực hiện các giao diện Iterable? Hãy để một số Elements collection subclass Array?).

Answer 4

Hãy thử sử dụng 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" />

Bạn cũng có thể sử dụng 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

Bạn có thể sử dụng 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 
} 

hoặc ngay hơn

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

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

Lưu ý quan trọngArray.from đã được giới thiệu trong phiên bản Chrome 45 source.

Answer 6

Đây là những gì tôi làm, cho một cách tiếp cận khác nhau

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

tốt từ IE9 trở lên

Answer 7

hỗ trợ Native Symbol.iterator cho NodeList là added đến WHATWG's DOM spec trong năm 2014.

Thật không may, Chrome 51 là phiên bản đầu tiên của Chrome để hỗ trợ nó và bản Beta của nó vừa được phát hành tại thời điểm viết câu trả lời này. Ngoài ra, không có hỗ trợ trong bất kỳ phiên bản nào của Internet Explorer hoặc Edge.

Để thêm Symbol.iterator hỗ trợ cho NodeList trong tất cả các trình duyệt mã của bạn, chỉ cần sử dụng polyfill sau:

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

Answer 8

Dưới đây là thêm một giải pháp cho thời hiện đại:

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

này có lợi thế của spread operator được hỗ trợ trong Google Chrome 46+, Firefox 16+ và Edge và chỉ để giải trí arrow function.

Answer 9

Tôi gặp sự cố này. Hóa ra của tôi đã được gây ra bằng cách gọi Promise.all() với các tham số thay vì một mảng. Ví dụ:

Trước: Promise.all(p1, p2)

Sau: Promise.all([p1, p2])

Hope this helps một ai đó.