1. 什么是DOM
DOM 全称是 Document Object Model，也就是文档对象模型。
DOM 就是针对 HTML 和 XML 提供的一个API。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
我们可以把一个HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如 <div></div> 这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。
2. DOM 有什么用
简单来说，通过 DOM 操作HTML元素，你可以改变网页。比如我们现在要更改网页标题，可以直接键入代码：
document.title = 'How to learn javascript'
这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。
你可以使用 Javascript 语言来操作 DOM 以改变网页。
为了改变网页，你必须告诉 Javascript 改变哪一个节点。这就是操作 DOM。
改变网页，实际就是操作DOM对节点进行增删改查。
3. DOM元素的增删改查
3.1 添加元素
- Document.createElement() // 创建元素
语法：
let element = document.createElement(tagName[, options])
- Document.createTextNode() // 创建一个新的文本节点
语法：
var text = document.createTextNode()
- Document.createAttribute() // 创建并返回一个新的属性节点
语法：
attribute = document.createAttribute(name)
- Document.createComment() // 创建并返回一个注释节点
语法：
var commentNode = document.createComment(data)
- Document.createDocumentFragment() // 创建一个新的空的文档片段
语法：
var docFragment = document.createDocumentFragment()
- Node.appendChild() // 将一个节点添加到指定父节点的子节点列表末尾
语法：var child = node.appendChild(child) - Element.classList.add() // 添加指定的类值class
语法：
elementNodeReference.classList.add( String [, String] )
- Document.write();Document.writeIn() // 将文本字符串写入打开的文档流
语法：
document.write(markup)
document.writeIn(line)
document.write()和writeIn()的区别是前者没有换行，而后者有换行。
3.2 删除元素
- Element.removeAttribute() // 从元素中删除指定的属性
语法：
element.removeAttribute(attrName)
- Element.removeChild(）// 删除子元素
语法：
var oldChild = node.removeChild(child);
- element.removeChild(child);
ChildNode.remove() // 删除元素
语法：
- elementNodeReference.remove()
Child.parentNode.removeChild(child) // 不确定父元素时可这样删除子元素
示例：
if (node.parentNode) {
//判断node是否在DOM树中
node.parentNode.removeChild(node);
}
- Element.classList.remove() // 移除元素中一个或多个类名
语法：
elementNodeReference.classList.remove( String [,String] )
3.3 修改元素
- Node.innerText // 修改元素文本内容
语法：
Node.innerHTML =new content
Element.innerHTML // 设置或获取描述元素后代的HTML语句
语法：
const content = element.innerHTML;
// 返回时，内容包含描述所有元素后代的序列化HTML代码。
element.innerHTML = markup;
// 除所有元素的子节点，解析内容字符串，并将生成的节点分配给元素的子元素。
- node.cloneNode() // 拷贝元素(包括所有属性和值)
语法及示例：
var dupNode = node.cloneNode(deep)
<!--example-->
<body>
<ul id="myList1">
<li>iPhone</li>
<li>iPad</li>
</ul>
<ul id="myList2">
<li>Macbook</li>
<li>appleMusic</li >
</ul>
<button onclick="myFunction()">复制</button>
<script>
function myFunction(){
var itm=document.getElementById("myList2").lastChild;
var cln=itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
</script>
</body>
<!--点击复制按钮，myList2中最后元素会复制到myList1中-->
- Element.setAttribute() // 设置或者改变指定属性并指定值
语法：
element.setAttribute(name, value)
- style.property = new style // 修改元素CSS属性值
示例：
var title= document.querySelector("h1")
title.style.backgroundColor = red // h1背景色改为红色
- Node.replaceChild() // 替换子节点
语法及示例：
replacedNode = parentNode.replaceChild(newChild, oldChild)
<!--example-->
<body>
<ul id="myList">
<li>iPhone</li>
<li>iPod</li>
<li>Macbook</li>
</ul>
<button onclick="myFunction()">替换</button>
<script>
function myFunction(){
var textnode=document.createTextNode("Surface pro");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
</script>
<!--点击替换按钮，myList中第一个元素会被替换成Surface pro-->
3.4 查找元素
- attribute.getAttribute() // 返回元素的指定属性值
语法：
let attribute = element.getAttribute(attributeName)
- Document.getElementsByClassName() // 返回一个节点列表（数组），包含了所有拥有指定 class 的子元素
语法：
var elements = document.getElementsByClassName(names);
var elements = rootElement.getElementsByClassName(names);
- Document.getElementsByName() // 返回带有指定名称的对象集合
语法：
elements = document.getElementsByName(name)
- Document.getElementsByTagName() // 返回带有指定标签名的对象集合
语法：
var elements = document.getElementsByTagName(name)
- Document.getElementById() // 返回对拥有指定 id 的第一个对象的引用
语法：element = document.getElementById(id) - Document.querySelector() // 返回文档中匹配指定的CSS选择器的第一元素
语法及示例：element = document.querySelector(selectors) // 语法 //example document.querySelector("#demo") // 获取文档中ID为demo的元素 - Document.querySelectorAll() // 返回与指定的选择器组匹配的文档中的元素列表
语法：
elementList = document.querySelectorAll(selectors