Dom node vs element, what is the difference between the two?

Document Object Model (DOM)is an interface that treats HTML or XML documents as a tree structure, in which each 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 termelement (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.

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 , 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.

,

, ,

,

are all elements because they are represented by tags.

Document type, comment, text nodes are not elements because they are not written using tags:

Nodeis the constructor of the node,HTMLElementis Constructor for elements in JS DOM. A paragraph is both a node and an element, it is an instance of bothNodeandHTMLElement

const paragraph = document.querySelector('p'); paragraph instanceof Node; // => true paragraph instanceof HTMLElement; // => true

Simply put, elements are subtypes of nodes, just like cats are animals The subtypes are the same.

3. DOM attributes: nodes and elements

In addition to distinguishing between nodes and elements, it is also necessary to distinguish between DOM attributes that contain only nodes or only elements.

The following properties of the node type evaluate to a node or collection of nodes (

NodeList):

node.parentNode; // Node or null node.firstChild; // Node or null node.lastChild; // Node or null node.childNodes; // NodeList

However, the following properties evaluate to an element or collection of elements (

HTMLCollection):

node.parentElement; // HTMLElement or null node.children; // HTMLCollection

Since both

node.childNodesand node.children return a list of children, why do you have both properties? good question!

Consider the following paragraph element that contains some text:

 Thank you for visiting my web page! 

Open the

demoand look at thechildNodesandchildren# of the paragraph node ##Properties:

const paragraph = document.querySelector('p'); paragraph.childNodes; // NodeList: [HTMLElement, Text] paragraph.children; // HTMLCollection: [HTMLElement]

paragraph.childNodes

The collection contains 2 nodes:Thank you, andfor visiting my web page!Text node!However, the

paragraph.children

collection contains only 1 item:Thank you.Since

paragraph.children

only contains elements, the text node is not included here because its type is text (Node.TEXT_NODE), not element (Node.ELEMENT_NODE).

Having both node.childNodesandnode.children, we can choose the set of children to access: all child nodes or only children that are elements.

4. Summary

A DOM document is a hierarchical collection of nodes, each node can have parents and/or children. Understanding the difference between DOM nodes and elements is easy if you understand what nodes are.

Nodes have types, and element types are one of them. Elements are represented by tags in HTML documents.

English original address: https://dmitripautin.com/dom-node-element/

Author: Shadeed

Source: dmitripavlutin

For more programming-related knowledge, please visit:Programming Teaching! !

The above is the detailed content of Dom node vs element, what is the difference between the two?. For more information, please follow other related articles on the PHP Chinese website!