Chuyển đổi NodeList để mảng

Question

Tôi đang gặp một thời gian khó khăn chuyển đổi một NodeList để một mảng trong IE 8. Các công trình sau đây một cách hoàn hảo trong Chrome, nhưng trong IE 8 toArray() không được công nhận là hợp lệ:

NodeList.prototype.toArray = function() { 
    var a = []; 

    for (var i = 0, len = this.length; i < len; i++) { 
     a[i] = this[i]; 
    } 

    return a; 
} 

document.all.tags("div").toArray(); 

tôi đã thử thêm một hàm nguyên mẫu vào một mảng chỉ để kiểm tra sự tỉnh táo của tôi và nó hoạt động chính xác. Điều đó làm cho tôi nghĩ rằng IE 8 không thực sự trở lại một NodeList? Dưới đây là ví dụ đầy đủ:

http://jsfiddle.net/e4RbH/

Tôi đang làm gì sai?

Answer 1

Trước tiên, không sử dụng document.all - không chuẩn và không được dùng nữa. Sử dụng document.getElementsByTagName để nhận các yếu tố DIV trong trường hợp của bạn.

Thứ hai, không mở rộng đối tượng DOM chẳng hạn như NodeList - đối tượng dựng sẵn là một giống rất lạ và không bắt buộc phải hoạt động giống như bất kỳ đối tượng nào khác mà bạn thường làm việc. Xem bài viết này để có giải thích chi tiết về điều này: What's wrong with extending the DOM.

Answer 2

IE không hỗ trợ NodeList theo cách tiêu chuẩn. Đây là lý do tại sao bạn nên cuộn vùng tên của riêng mình và KHÔNG mở rộng các đối tượng lõi trình duyệt.

Bạn có thể làm alert(typeof window.NodeList) và xem nó có được xác định hay không.

Answer 3

Cũ câu hỏi, nhưng đây là một cố gắng & phương pháp đúng:

var nodes=document.querySelectorAll("div"); // returns a node list 
nodes=Array.prototype.slice.call(nodes); // copies to an array 

Giải thích

• document.querySelectorAll sử dụng một bộ chọn CSS-style để tìm các yếu tố và trả về một danh sách node. Nó hoạt động như của IE 8.
• Phương thức slice sao chép một phần của một bộ sưu tập giống như mảng (trong trường hợp này là tất cả) thành một mảng mới.
• call cho phép bạn mượn một phương pháp từ một đối tượng để sử dụng trên một

Để tìm danh sách nút bạn cũng có thể đã sử dụng 'document.getElementsByTagName(), nhưng điều này là linh hoạt hơn.

Answer 4

Nếu bạn đang tìm kiếm một câu trả lời hiện đại sử dụng ES6:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

var nodes = document.querySelectorAll('div'); 
nodes = Array.from(nodes);