A node
là tên chung cho bất kỳ loại đối tượng nào trong hệ thống phân cấp DOM. A node
có thể là một trong các thành phần DOM tích hợp như document
hoặc document.body
, nó có thể là thẻ HTML được chỉ định trong HTML <input>
, <p>
hoặc có thể là một nút văn bản được hệ thống tạo ra để giữ một khối văn bản bên trong một phần tử khác . Vì vậy, một cách ngắn gọn, a node
là bất kỳ đối tượng DOM nào.
An element
là một loại cụ thể node
vì có nhiều loại nút khác (nút văn bản, nút nhận xét, nút tài liệu, v.v ...).
DOM bao gồm một hệ thống phân cấp các nút trong đó mỗi nút có thể có cha mẹ, danh sách các nút con và nextSibling và trướcSibling. Cấu trúc đó tạo thành một hệ thống phân cấp giống như cây. Các document
nút sẽ có danh sách các nút con (các head
nút và các body
nút). Các body
nút sẽ có danh sách các nút con (các yếu tố cấp cao nhất trong trang HTML của bạn) và vân vân.
Vì vậy, a nodeList
chỉ đơn giản là một danh sách giống như mảng nodes
.
Một phần tử là một loại nút cụ thể, một loại nút có thể được chỉ định trực tiếp trong HTML bằng thẻ HTML và có thể có các thuộc tính như một id
hoặc a class
. có thể có con, v.v ... Có các loại nút khác như nút bình luận, nút văn bản, v.v ... với các đặc điểm khác nhau. Mỗi nút có một thuộc tính .nodeType
báo cáo loại nút đó là gì. Bạn có thể xem các loại nút khác nhau tại đây (sơ đồ từ MDN ):
Bạn có thể thấy một ELEMENT_NODE
là một loại nút cụ thể trong đó thuộc nodeType
tính có giá trị là 1
.
Vì vậy, document.getElementById("test")
chỉ có thể trả về một nút và nó được đảm bảo là một phần tử (một loại nút cụ thể). Do đó, nó chỉ trả về phần tử chứ không phải là một danh sách.
Vì document.getElementsByClassName("para")
có thể trả về nhiều hơn một đối tượng, các nhà thiết kế đã chọn trả về nodeList
vì đó là kiểu dữ liệu họ đã tạo cho một danh sách có nhiều hơn một nút. Vì đây chỉ có thể là các phần tử (chỉ các phần tử thường có tên lớp), về mặt kỹ thuật, nó nodeList
chỉ có các nút của phần tử loại trong đó và các nhà thiết kế có thể tạo ra một bộ sưu tập có tên khác là một elementList
, nhưng họ đã chọn chỉ sử dụng một loại của bộ sưu tập cho dù nó chỉ có các yếu tố trong đó hay không.
EDIT: HTML5 định nghĩa HTMLCollection
một danh sách các Phần tử HTML (không phải bất kỳ nút nào, chỉ các Phần tử). Một số thuộc tính hoặc phương thức trong HTML5 hiện trả về một HTMLCollection
. Mặc dù có giao diện rất giống với a nodeList
, nhưng một sự khác biệt bây giờ được thực hiện ở chỗ nó chỉ chứa các yếu tố, không phải bất kỳ loại nút nào.
Sự khác biệt giữa a nodeList
và an HTMLCollection
có ít ảnh hưởng đến cách bạn sử dụng một (theo như tôi có thể nói), nhưng các nhà thiết kế của HTML5 hiện đã tạo ra sự khác biệt đó.
Ví dụ: thuộc element.children
tính trả về HTMLCollection trực tiếp.