Sự khác biệt giữa đối tượng Nút và đối tượng Phần tử?

Question

Tôi hoàn toàn bối rối giữa đối tượng Node và đối tượng Element. document.getElementById() lợi nhuận Yếu tố đối tượng trong khi document.getElementsByClassName() lợi nhuận NodeList đối tượng (Collection of Elements hoặc Nodes?)

Nếu một div là một yếu tố đối tượng sau đó những gì về đối tượng Node div?

Đối tượng nút là gì?

Đối tượng tài liệu, đối tượng Element và đối tượng văn bản cũng là đối tượng Nút hay không?

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 là tất cả các đối tượng Nút'.

Vậy Làm cách nào để 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 nút và Lớp phần tử có liên quan trong cây nguyên mẫu của kế thừa.

<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] 

Answer 1

A node là tên chung cho bất kỳ loại đối tượng nào trong phân cấp DOM. node có thể là một trong các phần tử DOM được tích hợp sẵn như document hoặc document.body, có thể là thẻ HTML được chỉ định trong HTML chẳng hạn như <input> hoặc <p> hoặc nó có thể là nút văn bản được hệ thống tạo của văn bản bên trong phần tử khác. Tóm lại, node là bất kỳ đối tượng DOM nào.

An element là một loại cụ thể của 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ủa các nút nơi mỗi nút có thể có một phụ huynh, một danh sách các nút con và một nextSibling và previousSibling. Cấu trúc đó tạo thành một hệ thống phân cấp giống cây. Nút document sẽ có danh sách các nút con (nút head và nút body). Nút body sẽ có danh sách các nút con (các phần tử cấp cao nhất trong trang HTML của bạn), v.v.

Vì vậy, một nodeList chỉ đơn giản là một danh sách giống như mảng của nodes.

Phần tử là một loại nút cụ thể, 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ư id hoặc class. có thể có con, vv ... Có các loại nút khác như nút nhận xét, nút văn bản, v.v ... với các đặc tính khác nhau. Mỗi nút có thuộc tính .nodeType báo cáo loại nút đó là gì. Bạn có thể xem các loại khác nhau của các nút ở đây (sơ đồ từ MDN):

Bạn có thể thấy một ELEMENT_NODE là một loại đặc biệt của nút nơi nodeType tài sản có giá trị của 1.

Vì vậy, document.getElementById("test") chỉ có thể trả về một nút và được đảm bảo là một phần tử (một loại nút cụ thể). Bởi vì 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, nhà thiết kế đã chọn trả về nodeList vì đó là loại dữ liệu mà họ đã tạo cho danh sách nhiều hơn một nút. Vì chúng chỉ có thể là các phần tử (chỉ có các phần tử thường có tên lớp), về mặt kỹ thuật, nó chỉ có các nút của phần tử kiểu trong đó và các nhà thiết kế có thể tạo một bộ sưu tập có tên khác là elementList, nhưng họ đã chọn chỉ sử dụng một loại bộ sưu tập cho dù nó chỉ có các phần tử trong đó hay không.

---

EDIT: HTML5 định nghĩa một HTMLCollection mà là một danh sách các HTML Elements (không bất kỳ nút, chỉ Elements). Một số thuộc tính hoặc phương thức trong HTML5 hiện trả lại một HTMLCollection. Mặc dù nó rất giống giao diện với một nodeList, một sự phân biệt bây giờ được tạo ra ở chỗ nó chỉ chứa các phần tử, không phải bất kỳ loại nút nào.

Sự khác biệt giữa nodeList và HTMLCollection ít ảnh hưởng đến cách bạn sử dụng (theo như tôi có thể biết), nhưng các nhà thiết kế HTML5 hiện đã tạo nên sự khác biệt đó.

Ví dụ: thuộc tính element.children trả về một phần HTMLCollection trực tiếp.

Answer 2

Node: http://www.w3schools.com/js/js_htmldom_nodes.asp

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

Element: http://www.w3schools.com/js/js_htmldom_elements.asp

Đối tượng phần tử đại diện cho một phần tử trong một tài liệu XML. Các phần tử có thể chứa các thuộc tính, các phần 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 biểu diễn trong một nút văn bản.

trùng lặp:

• What's the difference between an element and a node in XML?
• Why are Nodes and Elements different in XML? What was the rationale?

Answer 3

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

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

"Các đối tượng thực hiện các giao diện Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction, hoặc Comment (chỉ đơn giản là các nút) tham gia vào một cái cây."

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

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

Answer 4

Node là để triển khai cấu trúc cây, do đó, phương pháp của nó là dành cho firstChild, lastChild, childNodes, v.v ... Nó là một lớp học cho cấu trúc cây chung.

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

Một số đối tượng Node là các nút văn bản và chúng không phải là các đối tượng Element. Mỗi đối tượng Node có một tài sản nodeType cho biết những gì loại nút nó là, đối với 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 giao diện đ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 Element kế 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).

Bằng cách này, các đối tượng document là đỉnh của cây nút, và document là một đối tượng Document, và Document thừa hưởng từ Node cũng như:

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

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

Answer 5

Node được sử dụng để đại diện cho thẻ nói chung. Được chia thành 3 loại:

Ghi chú thuộc tính: là nút nằm bên trong thuộc tính của nó. Exp: <p id=”123”></p>

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

Nút phần tử: là nút nằm bên trong thẻ có các thẻ khác. Exp: <p><b></b></p>

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

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