Sự khác biệt giữa đối tượng Node và đối tượng Element?

Tôi hoàn toàn nhầm lẫn giữa đối tượng Node và đối tượng Element. document.getElementById()trả về đối tượng Element trong khi document.getElementsByClassName() trả về đối tượng NodeList (Bộ sưu tập các phần tử hoặc nút?)

Nếu một div là một đối tượng phần tử thì đối tượng div Node thì sao?

Một đối tượng nút là gì?

Các đối tượng tài liệu, đối tượng phần tử và đối tượng văn bản cũng là đối tượng Node?

Theo cuốn sách của David Flanagan 'Đối tượng Tài liệu, Đối tượng phần tử và đối tượng văn bản của nó đều là các đối tượng Nút'.

Vậy làm thế nào mà một đối tượng có thể kế thừa các thuộc tính / phương thức của đối tượng Element cũng như đối tượng Node?

Nếu có, tôi đoán Lớp Node và Lớp phần tử có liên quan đến cây thừa kế nguyên mẫu.

 <div id="test">
           <p class="para"> 123 </p>
           <p class="para"> abc </p>
 </div>
 <p id="id_para"> next </p>

document.documentElement.toString();    // [object HTMLHtmlElement]

var div = document.getElementById("test");
div.toString();                         // [object HTMLDivElement]                       

var p1 = document.getElementById("id_para");
p1.toString();                          // [object HTMLParagraphElement]

var p2 = document.getElementsByClassName("para");
p2.toString();                          //[object HTMLCollection]

A nodelà tên chung cho bất kỳ loại đối tượng nào trong hệ thống phân cấp DOM. A nodecó thể là một trong các thành phần DOM tích hợp như documenthoặ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 nodelà bất kỳ đối tượng DOM nào.

An elementlà một loại cụ thể nodevì 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 documentnút sẽ có danh sách các nút con (các headnút và các bodynút). Các bodynú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 nodeListchỉ đơ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 idhoặ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 .nodeTypebá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_NODElà một loại nút cụ thể trong đó thuộc nodeTypetí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ề nodeListvì đó 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ó nodeListchỉ 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 HTMLCollectionmộ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 nodeListvà an HTMLCollectioncó í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.childrentính trả về HTMLCollection trực tiếp.

Nodelà để thực hiện một cấu trúc cây, vì vậy phương pháp của nó là cho firstChild, lastChild, childNodes, vv Đây là chi tiết của một lớp học cho một cấu trúc cây tổng quát.

Và sau đó, một số Nodeđối tượng cũng là Elementđối tượng. Elementkế thừa từ Node. Elementcác đối tượng thực sự đại diện cho các đối tượng như được chỉ định trong tệp HTML bằng các thẻ như <div id="content"></div>. Các Elementlớp định nghĩa các thuộc tính và các phương pháp như attributes, id, innerHTML, clientWidth, blur(), và focus().

Một số Nodeđối tượng là các nút văn bản và chúng không phải là Elementđối tượng. Mỗi Nodeđối tượng có một thuộc nodeTypetính cho biết đó là loại nút nào, đối với các tài liệu HTML:

1: Element node
3: Text node
8: Comment node
9: the top level node, which is document

Chúng ta có thể thấy một số ví dụ trong bảng điều khiển:

> document instanceof Node
  true

> document instanceof Element
  false

> document.firstChild
  <html>...</html>

> document.firstChild instanceof Node
  true

> document.firstChild instanceof Element
  true

> document.firstChild.firstChild.nextElementSibling
  <body>...</body>

> document.firstChild.firstChild.nextElementSibling === document.body
  true

> document.firstChild.firstChild.nextSibling
  #text

> document.firstChild.firstChild.nextSibling instanceof Node
  true

> document.firstChild.firstChild.nextSibling instanceof Element
  false

> Element.prototype.__proto__ === Node.prototype
  true

Dòng cuối cùng ở trên cho thấy rằng Elementkế thừa từ Node. (dòng đó sẽ không hoạt động trong IE do __proto__. Sẽ cần sử dụng Chrome, Firefox hoặc Safari).

Nhân tiện, documentđối tượng là đỉnh của cây nút và documentlà một Documentđối tượng và cũng Documentthừa hưởng từ Node:

> Document.prototype.__proto__ === Node.prototype
  true

Dưới đây là một số tài liệu cho các lớp Node và Element:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Euity

Nguồn thông tin tốt nhất cho tất cả các tai ương DOM của bạn

http://www.w3.org/TR/dom/#nodes

"Các đối tượng triển khai giao diện Document, DocumentFragment, DocumentType, Element, Text, TreatmentInemony hoặc Comment (gọi đơn giản là các nút) tham gia vào một cây."

http://www.w3.org/TR/dom/#element

"Các nút phần tử được gọi đơn giản là các phần tử."

Nút: http://www.w3schools.com/js/js_htmldom_nodes.asp

Đối tượng Node đại diện cho một nút trong cây tài liệu. Một nút có thể là một nút phần tử, nút thuộc tính, nút văn bản hoặc bất kỳ loại nút nào khác được giải thích trong chương Loại nút.

Yếu tố: http://www.w3schools.com/js/js_htmldom_elements.asp

Đối tượng Element đại diện cho một thành phần trong tài liệu XML. Các yếu tố có thể chứa các thuộc tính, các yếu tố khác hoặc văn bản. Nếu một phần tử chứa văn bản, văn bản được thể hiện trong một nút văn bản.

bản sao :

• Sự khác biệt giữa một phần tử và một nút trong XML là gì?
• Tại sao các nút và phần tử khác nhau trong XML? Lý do là gì?

Nút được sử dụng để đại diện cho các thẻ nói chung. Chia làm 3 loại:

Lưu ý thuộc tính: là nút mà bên trong nó có thuộc tính. Exp:<p id=”123”></p>

Nút văn bản: là nút mà giữa mở và đóng có nội dung văn bản contian. Exp:<p>Hello</p>

Element Node: là nút mà bên trong nó có các thẻ khác. Exp:<p><b></b></p>

Mỗi nút có thể là các loại đồng thời, không nhất thiết chỉ là một loại duy nhất.

Phần tử chỉ đơn giản là một nút phần tử.