HTMLCollection và NodeList có thể lặp lại không?

Question

Trong ES6, iterable là một đối tượng cho phép for... of và có khóa Symbol.iterator.

Mảng có thể lặp lại, như là Bộ và Bản đồ. Câu hỏi đặt ra là: HTMLCollection và NodeList có thể lặp lại không? Chúng được cho là?

Tài liệu MDN dường như đề xuất một NodeList là một lần lặp lại.

for...of vòng lặp trên NodeList sẽ các đối tượng một cách chính xác, trong các trình duyệt có hỗ trợ for...of (như Firefox 13 và sau)

Điều này dường như để chứng thực hành vi của Firefox.

Tôi đã thử nghiệm mã sau trong cả Chrome và Firefox và ngạc nhiên khi thấy rằng Firefox dường như nghĩ rằng chúng có thể lặp lại, nhưng Chrome thì không. Ngoài ra, Firefox cho rằng các trình vòng lặp được trả về bởi HTMLCollection và NodeList là một và giống nhau.

var col = document.getElementsByClassName('test'); // Should get HTMLCollection of 2 elems 
 
var nod = document.querySelectorAll('.test');  // Should get NodeList of 2 elems 
 
var arr = [].slice.call(col);      // Should get Array of 2 elems 
 

 
console.log(col[Symbol.iterator]); // Firefox: iterator function, Chrome: undefined 
 
console.log(nod[Symbol.iterator]); // Firefox: iterator function, Chrome: undefined 
 
console.log(arr[Symbol.iterator]); // Firefox & Chrome: iterator function 
 
console.log(col[Symbol.iterator] === nod[Symbol.iterator]); // Firefox: true 
 
console.log(col[Symbol.iterator] === arr[Symbol.iterator]); // Firefox: false

<div class="test">1</div> 
 
<div class="test">2</div>

Một thực sự kỳ lạ, khó hiểu điều: chạy đoạn mã tạo ra một kết quả khác nhau từ sao chép nó và chạy trong một tập tin thực tế/console trong Firefox (đặc biệt là so sánh cuối cùng). Bất kỳ sự giác ngộ nào về hành vi kì lạ này cũng sẽ được đánh giá cao.

Answer 1

Symbol.iterator hỗ trợ cho NodeList, HTMLCollection, DOMTokenList, và DOMSettableTokenList là discussed và added vào năm ngoái WHATWG's DOM spec.

Answer 2

Thật không may, chưa. Nhưng cho đến khi họ đang có, bạn có thể dễ dàng polyfill họ như vậy:

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

Answer 3

Như greiner chỉ ra, có nguồn gốc Symbol.iterator hỗ trợ cho NodeList đã được thêm vào DOM đặc tả của WHATWG 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];