What is the difference between DOM nodes and elements

Related recommendations: " javascript video tutorial"

Document Object Model (DOM)is a model that converts HTML or XML The document is viewed as an interface to a tree structure, where each node is an object of the document. DOM also provides a set of methods to query the tree, change structure, and style.

DOM also uses the term element (Element) which is very similar to a node. So, what is the difference between DOM nodes and elements?

1. DOM nodes

The key to understanding the difference between nodes and elements is to understand what a node is.

From a higher perspective, a DOM document consists of a node hierarchy. Each node can have parents and/or children.

Take a look at the following HTML document:

    
   
My Page
 
Thank you for visiting my web page!
  

The document contains the following node hierarchy:

is a node in the document tree. It has 2 child nodes: and .

A node with 3 child nodes: Comment node , Title < h2>, paragraph

. The parent node of the node is the node.

The tag in the HTML document represents a node. Interestingly, ordinary text is also a node. Paragraph node

has 1 child node: text node "Thank you for visiting my web page!".

1.2 Node Type

How do we distinguish these different types of nodes? The answer lies in the DOM Node interface, specifically the Node.nodeTypeattribute.

Node.nodeTypecan have one of the following values representing the node type:

• Node.ELEMENT_NODE
• Node.ATTRIBUTE_NODE
• Node.TEXT_NODE
• Node.CDATA_SECTION_NODE
• Node.PROCESSING_INSTRUCTION_NODE
• Node.COMMENT_NODE
• Node.DOCUMENT_NODE
• Node. DOCUMENT_TYPE_NODE
• Node.DOCUMENT_FRAGMENT_NODE
• Node.NOTATION_NODE

constants meaningfully indicate node types: for example Node.ELEMENT_NODErepresents element nodes, Node.TEXT_NODErepresents the text node, Node.DOCUMENT_NODEthe document node, and so on.

For example, let us select the paragraph node and view its nodeTypeattribute:

const paragraph = document.querySelector('p'); paragraph.nodeType === Node.ELEMENT_NODE; // => true

The node type that represents the entire node document tree is Node.DOCUMENT_NODE：

document.nodeType === Node.DOCUMENT_NODE; // => true

2. DOM elements

After mastering the knowledge of DOM nodes, it is now time to distinguish between DOM nodes and elements.

If you understand node terminology, the answer is obvious: elements are nodes of a specific type element (Node.ELEMENT_NODE), as well as types such as document, comment, text, etc.

In short, elements are nodes written using markup in an HTML document. , ,