Dom node vs element, what is the difference between the two?-JS Tutorial-php.cn

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!

Copy after login

The document contains the following node hierarchy:

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

##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 thenode is thenode.

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:

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

Copy after login

The node type that represents the entire node document tree is

Node.DOCUMENT_NODE：

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

Copy after login

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
        
         Copy after login
        
       
       Simply put, elements are subtypes of nodes, just like cats are animals The subtypes are the same.
       
       3. DOM attributes: nodes and elementsIn 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
        
         Copy after login
        
       
       However, the following properties evaluate to an element or collection of elements (
       HTMLCollection):
       
        node.parentElement; // HTMLElement or null node.children; // HTMLCollection
        
         Copy after login
        
       
       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! 
        
         Copy after login
        
       
       Open the
       demoand look at thechildNodesandchildren# of the paragraph node ##Properties:
const paragraph = document.querySelector(&#39;p&#39;); paragraph.childNodes; // NodeList: [HTMLElement, Text] paragraph.children; // HTMLCollection: [HTMLElement]
Copy after login
paragraph.childNodesThe collection contains 2 nodes: Thank you, andfor visiting my web page!Text node!However, theparagraph.children
       collection contains only 1 item:Thank you.Sinceparagraph.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!