Author: Shadeed
Translator: Frontend Xiaozhi
Source: dmitripavlutin
thumbs look , micro-channel search [ big move in the world ] , B station concerned [ the front end of a small intellectual ] this background there is no giant, but with an upward positive attitude of people. This article GitHub https://github.com/qq449245884/xiaozhi has been included, the article has been classified, and a lot of my documents and tutorial materials have been sorted out.Recently, a Vue component has been open sourced, but it is not perfect enough. Welcome everyone to improve it together. I also hope that everyone can give a star to support it. Thank you.
github address: https://github.com/qq449245884/vue-okr-tree
Document Object Model (DOM) is an interface that treats HTML or XML documents as a tree structure, where each node is an object of the document. DOM also provides a set of methods to query the tree, change the 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 node
The key to understanding the difference between nodes and elements is to understand what a node is.
From a higher perspective, the DOM document consists of a hierarchy of nodes. Each node can have a parent and/or child.
Take a look at the following HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<!-- Page Body -->
<h2>My Page</h2>
<p id="content">Thank you for visiting my web page!</p>
</body>
</html>The document contains the following node hierarchy:
<html> is a node in the document tree. It has 2 child nodes: <head> and <body> .
<body> has 3 child nodes: the annotation node <!-- Page Body --> , the title <h2> , and the paragraph <p> . <body> parent node is <html> node.
The mark in the HTML document represents a node, and the interesting thing is that ordinary text is also a node. The paragraph node <p> has 1 child node: the 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, especially the Node.nodeType attribute.
Node.nodeType can 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_NODE represents element nodes, Node.TEXT_NODE represents text nodes, Node.DOCUMENT_NODE document nodes, and so on.
For example, let's select the paragraph node, and then view its nodeType attributes:
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => trueThe node type representing the entire node document tree is Node.DOCUMENT_NODE :
document.nodeType === Node.DOCUMENT_NODE; // => true2. 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: the element is a specific type of node element (Node.ELEMENT_NODE) , as well as types of documents, comments, text, etc.
In short, elements are nodes written using tags in HTML documents. <html> , <head> , <title> , <body> , <h2> , <p> are all elements because they are represented by tags.
Document types, comments, and text nodes are not elements because they are not written using tags:
Node is the node's constructor, and HTMLElement is the element's constructor in JS DOM. Paragraph is both a node and an element. It is also an instance Node and HTMLElement
const paragraph = document.querySelector('p');
paragraph instanceof Node; // => true
paragraph instanceof HTMLElement; // => trueSimply put, elements are subtypes of nodes, just as cats are subtypes of animals.
3. DOM attributes: nodes and elements
In addition to distinguishing between nodes and elements, it is also necessary to distinguish between DOM attributes that only contain nodes or only elements.
The following attributes of a node type are evaluated as a node or a collection of nodes ( NodeList ):
node.parentNode; // Node or null
node.firstChild; // Node or null
node.lastChild; // Node or null
node.childNodes; // NodeListHowever, the following attributes are elements or collections of elements ( HTMLCollection ):
node.parentElement; // HTMLElement or null
node.children; // HTMLCollectionSince node.childNodes and node.children both return a list of children, why both have these two attributes? good question!
Consider the following paragraph element that contains some text:
<p>
<b>Thank you</b> for visiting my web page!
</p>Open the demo , and then check the childNodes and children attributes of the parapgraph node:
const paragraph = document.querySelector('p');
paragraph.childNodes; // NodeList: [HTMLElement, Text]
paragraph.children; // HTMLCollection: [HTMLElement]paragraph.childNodes collection contains 2 nodes: <b>Thank you</b> , and for visiting my web page! text nodes!
However, the paragraph.children collection contains only 1 item: <b>Thank you</b> .
Since paragraph.children only contains elements, the text node is not included here because its type is text ( Node.TEXT_NODE ) instead of element ( Node.ELEMENT_NODE ).
node.childNodes and node.children at the same time, we can choose the set of children to visit: all children nodes or only children are elements.
4. Summary
A DOM document is a hierarchical collection of nodes, and each node can have a parent and/or child. If you understand what a node is, then it is easy to understand the difference between a DOM node and an element.
Nodes have types, and element type is one of them. Elements are represented by tags in HTML documents.
End~ I’m Xiaozhi, I’m going to wash the dishes, see you next time!
code is deployed, the possible bugs cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .
Original: https://dmitripautin.com/dom-node-element/
communicate with
World" on WeChat to read and update as soon as possible (one or two earlier than the blog). This article has been included on GitHub 160a5ad9242617 https://github.com/qq449245884/xiaozhi I have sorted out a lot of my documents. Welcome to Star and improve it. You can refer to the test site for review for interviews. In addition, pay attention to the account. Reply 160a5ad9242630 welfare background, you can see the welfare, you know.
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。