Tại sao getElementsByClassName của JavaScript cung cấp một đối tượng KHÔNG phải là một mảng?

Question

Tôi đang cố gắng để có được một danh sách trong JavaScript (không sử dụng jQuery) của tất cả các yếu tố trên trang với một tên lớp cụ thể. Do đó, tôi sử dụng hàm getElementsByClassName() như sau:

var expand_buttons = document.getElementsByClassName('expand'); 
console.log(expand_buttons, expand_buttons.length, expand_buttons[0]); 

Lưu ý rằng tôi có ba phần tử neo trên trang của tôi với lớp 'mở rộng'. console.log này() kết quả đầu ra

[] 0 undefined 

Tiếp theo, cho đá, tôi ném expand_buttons vào mảng riêng của mình như sau:

var newArray = new Array(expand_buttons); 
console.log(newArray, newArray.length); 

này đột nhiên kết quả đầu ra

[NodeList[3]] 1 

và tôi có thể nhấp thông qua nodelist và xem các thuộc tính của ba phần tử neo 'mở rộng' trên trang. Nó cũng đáng chú ý rằng tôi đã có thể nhận được mã của tôi làm việc trong một w3schools test page. Cũng có thể lưu ý rằng việc sử dụng document.getElementsByName của tôi thực sự làm đầu ra (cho bảng điều khiển) một mảng các phần tử, nhưng khi tôi yêu cầu độ dài của nó, nó cho tôi biết 0. Tương tự, nếu tôi cố gắng truy cập một phần tử mảng sử dụng array_name[0] như bình thường, nó xuất ra 'không xác định', mặc dù rõ ràng là một phần tử bên trong của một mảng khi tôi in đối tượng vào bảng điều khiển.

Có ai có bất kỳ ý tưởng nào tại sao điều này có thể không? Tôi chỉ muốn lặp qua các phần tử DOM và tôi đang tránh jQuery vào lúc này bởi vì tôi đang cố gắng thực hành mã hóa bằng JavaScript vani.

Cảm ơn,

ParagonRG

Answer 1

Nó không hẳn là một điều Javascript vì nó là một điều trình duyệt web. API đó được cung cấp bởi một đối tượng nguyên gốc (đối tượng document) và theo đặc tả DOM, nó trả về một đối tượng NodeList. Bạn có thể xử lý một NodeList như một mảng, và nó tương tự, nhưng khác biệt rõ rệt (như bạn đã nhận thấy).

Bạn luôn có thể sao chép một NodeList đến một mảng mới:

var nodeArr = Array.prototype.slice.call(theNodeList, 0); 

hoặc trong môi trường ES2015 hiện đại:

var nodeArr = Array.from(theNodeList); 

Javascript luôn tồn tại trong một số bối cảnh thời gian chạy, và bối cảnh có thể bao gồm tất cả các loại các API cung cấp cơ sở cho mã JavaScript. Trình duyệt web là một trong những ngữ cảnh đó. DOM được xác định theo cách không đặc biệt là một phần đối với JavaScript; đó là định nghĩa giao diện trung lập về ngôn ngữ.

Tôi đoán phiên bản ngắn của câu trả lời này sẽ là "bởi vì nó chỉ làm."

Answer 2

Nó không trả lại một mảng vì đối tượng nó returns is "live", cụ thể nó là một live NodeList:

Trong hầu hết các trường hợp, các NodeList là một bộ sưu tập sống. Điều này có nghĩa là các thay đổi trên cây DOM sẽ được phản ánh trên bộ sưu tập.