Table of contents
DOM (Document Object Model) is an interface for JS to operate web pages. It is used to convert a web page into a JS object, so that scripts can be used to perform various operations (such as adding and deleting content).
Document: represents the entire HTML web document
Object: Indicates that each part of the webpage is converted into an object.
Model: Represents the relationship between objects, so that we can easily obtain objects
The Document Object Model (DOM) is the programming interface for web pages. It provides a structured representation of the document (structure tree) and defines a way - programs can access the structure tree to change the structure, style and content of the document.
1. Node level
Any HTML or XML document can be represented by DOM as a hierarchy of nodes. There are many types of nodes, each type corresponds to different information and tags in the document, has its own different characteristics, data and methods, and has certain relationships with other types. These relationships form a hierarchy, allowing markup to be represented as a tree structure rooted at a particular node .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello DOM</title>
</head>
<body>
<p>Hello DOM</p>
</body>
</html>
In XML documents, there is no such predefined element, and any element may become a document element.
1.2. Nodes
The smallest unit of DOM is called a node.
There are seven types of nodes: Document, DocumentType, Element, Text, Comment, DocumentFragment.
(1) Common nodes
Document node (document) : The document object of the entire HTML document exists as a property of the window object and can be used directly.
Element node (Element) : HTML tags in HTML documents.
Attribute node (Attribute) : The attribute of the element, that is, the attribute in the label. It should be noted here that the attribute node is not a child node of the element node , but a part of the element node.
Text node (Text) : the text content in the label.
(2) Other nodes
DocumentType : doctype tag (such as <!DOCTYPE html> ).
Comment : comment
DocumentFragment : a fragment of the document
These seven types of nodes are all derived objects of the node object provided by the browser, and have some common properties and methods.
1.3 Node tree
All nodes of a document can be abstracted into a tree structure according to their level. This tree structure is the DOM. The tree structure (DOM tree) of the document is composed of various types of nodes. Each node can be regarded as a leaf of the document tree.
The number of nodes in the above case, as shown in the figure:
In addition to the root node, other nodes have three relationships with the surrounding nodes. DOM provides an operation interface to obtain the nodes of the three relationships.
Parent node relationship (parentNode): the direct superior node.
Child node relationship (childNode): direct subordinate node. The child node interface includes properties such as firstChild (the first child node) and lastChild (the last child node) .
Sibling node relationship ( sibling ) : Nodes with the same parent node. The sibling node interface includes nextSibling (the immediately following sibling node) and previousSibling (the immediately preceding sibling node) attributes.
2. Node type
DOM Level 1 describes an interface named Node, which must be implemented by all DOM node types. The Node interface is implemented in JavaScript as the Node type, which is directly accessible in all browsers except IE. In JavaScript, all node types inherit from the Node type, so all types share the same basic properties and methods.
2.1 Properties
(1) nodeType attribute
Role: Indicates the type of node
| node type | value |
| Document node (document) | 9 |
| Element node (Element) | 1 |
| Attribute Node (Attr) | 2 |
| Text node (Text) | 3 |
| Document Type Node (DocumentType) | 10 |
| Comment node (Comment) | 8 |
| Document fragment node (DocumentFragment) | 11 |
<div id="div1"></div>
<script>
console.log(document.nodeType);//9
console.log(div1.nodeType);//1
</script>(2) nodeName attribute
Role: return the name of the node
<div id="div1">hello world</div>
<script>
var div = document.getElementById('div1');
console.log(div.nodeName); //DIV
console.log(div.firstChild.nodeName); //#text
</script>(3) nodeValue attribute
Function: It can read and write the text value of the current node itself. Only text nodes, comment nodes, and attribute nodes have text values
<div id="div1">hello world</div>
<script>
var div = document.getElementById('div1');
console.log(div.nodeValue); // null
// 读
console.log(div.firstChild.nodeValue); //hello world
// 写
div.firstChild.nodeValue = '123';
console.log(div.firstChild.nodeValue);//123
</script>(4) textContent property
Function: Return the text content of the current node and all its descendant nodes
<div id="div1">Hello <span><span>World </span>JavaScript</span> DOM</div>
<script>
var div = document.getElementById('div1');
console.log(div.textContent); //Hello World JavaScript DOM
</script>(5) nextSibling property
Function: Return the first sibling node immediately following the current node . if not return null
<div id="div1">hello</div>
<div id="div2">world</div>
<script>
var d1 = document.getElementById('div1');
var d2 = document.getElementById('div2');
console.log(d1.nextSibling); //#text "\n " 没有得到预想的结果是因为第二个div换行了，紧跟当前节点的第一个同级节点不再是第二个div
console.log(d1.nextSibling === d2); // false
</script>
<div id="div1">hello</div><div id="div2">world</div>
<script>
var d1 = document.getElementById('div1');
var d2 = document.getElementById('div2');
console.log(d1.nextSibling); //<div id="d2">world</div>
console.log(d1.nextSibling === d2); // true
</script>(6) previousSibling property
Function: Return the closest sibling node in front of the current node . if not return null
<div id="div1">hello</div><div id="div2">world</div>
<script>
var d1 = document.getElementById('div1');
var d2 = document.getElementById('div2');
console.log(d1.previousSibling); //<div id="div1">hello</div>
console.log(d1.previousSibling === div1); // true
</script>(7) parentNode attribute
Function: Return the parent node of the current node. Its parent node can only be of three types: element node, document node and document fragment node
<div id="d1">hello world</div>
<script>
var div1 = document.getElementById('d1');
console.log(div1.parentNode); // body
</script>(8) parentElement property
Function: Return the parent element node of the current node. Returns null if the current node has no parent element node
<div id="d1">hello world</div>
<script>
var div1 = document.getElementById('d1');
console.log(div1.parentElement); // <body>
//设置父元素的样式属性
div1.parentElement.style.color= 'red';
</script>（9）firstChild&lastChild
Function: Return the first/last child node of the current node, or return null if the current node has no child nodes
<div id="d1">子节点1<div>div</div></div>
<script>
var div1 = document.getElementById('d1');
console.log(div1.firstChild); // #text "子节点1"
console.log(div1.lastChild); // <div>
</script>(10) childNodes attribute
Function: Return all child nodes of the current node, and the returned result is an array type
<div id="d1">子节点1<div>div</div></div>
<script>
var div1 = document.getElementById('d1');
console.log(div1.childNodes); //NodeList [ #text, div ]
</script>3. Method
（1）appendChild()
Function: add child nodes. Used to insert the accepted node object as the last child node into the current node
Input parameter: node object Return value: child node inserted into the document
<body id="box">
<script>
// 创建元素节点p
var p = document.createElement('p');
// 向p标签插入内容
p.innerHTML = '我是一个p标签';
// 将节点插入到body中
document.body.appendChild(p);
//查看body的所有子节点，验证是否插入成功
res = document.getElementById('box');
console.log(res.childNodes);//NodeList(3) [ #text, script, p ]
</script>
</body>（2）insertBefore()
Function: used to insert a node into a specified position inside the parent node
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
Syntax: insertBefore(newNode,referenceNode) parameters passed in by newNode&referenceNode
newNode: Indicates the node to be inserted, the insertion position is in front of the referenceNode
referenceNode: a child node inside the parent node of the current node
return value: newNode
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
<script>
//创建一个p标签
var newNode = document.createElement("p");
// 向p标签插入内容
newNode.innerHTML = '我是p标签'
//parentNode.insertBefore(newNode, referenceNode);
// 获取要插入位置的节点
var refer = document.getElementById('div2')
// 获取父节点的引用
var father = refer.parentNode
// 插入节点
father.insertBefore(newNode,refer)
</script>（3）removeChild()
Role: Accept a child node as a parameter to remove the child node from the current node
Return value: the removed child node
//移除div2
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
<script>
// 获取要删除的节点的引用
var refer = document.getElementById('div2')
// 获取删除的节点的父节点的引用
var father = refer.parentNode
// 删除该子节点
father.removeChild(refer)
</script>（4）replaceChild()
Function: used to replace a child node of the current node with a new node
Syntax: parentNode.replaceChild(newNode, replaceNode)
replaceNode: the node to replace
newNode: new node for replacement
parentNode: the parent node of the node to be replaced
//替换div2
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
<script>
// 创建一个p标签
var p = document.createElement('p');
// 向P标签插入内容
p.innerHTML = '我是一个p标签'
// 获取要替换的节点的引用
var replace = document.getElementById('div2')
// 获取替换的节点的父节点的引用
var father = replace.parentNode
// 删除该子节点
father.replaceChild(p,replace)
</script>Note: The above four methods all need to call the parent node object