DOM 概述
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。
节点
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
Document：整个文档树的顶层节点
DocumentType：doctype标签（比如<!DOCTYPE html>）
Element：网页的各种HTML标签（比如<body>、<a>等）
Attribute：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段
节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。
浏览器原生提供document节点，代表整个文档。
文档的第一层有两个节点，第一个是文档类型节点（<!doctype html>），第二个是 HTML 网页的顶层容器标签<html>。后者构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。
除了根节点，其他节点都有三种层级关系。
1.父节点关系（parentNode）：直接的那个上级节点
2.子节点关系（childNodes）：直接的下级节点
3.同级节点关系（sibling）：拥有同一个父节点的节点
DOM 提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。
获取节点（查找元素）
标签==元素==节点
直接获取
通过id：document.getElementById('id')
通过类名：document.getElementsByClassName('class')
通过标签名：document.getElementsByTagName('tag')
html5新增
querySelector 找到所有满足的元素，并且返回第0个
querySelectorAll 找到所有满足的元素
let oul=document.getElementById("ul1");
oul.getElementsByClassName("box"); => document.querySelectorAll('#ul1 .box div')
getElementsByTagName("div")
<body>
<div id="div1">
<ul>
<li>
<span>111</span>
<span class="s1">222<input type="text" ></span>
<span>333</span>
</li>
<li class="box">
<span>111</span>
<span class="s1">222<input type="text" ></span>
<span>333</span>
</li>
<li class="box">
<span>111</span>
<span class="s1">222<input type="text" ></span>
<span>333</span>
</li>
<li>
<span>111</span>
<span class="s1">222<input type="text" ></span>
<span>333</span>
</li>
</ul>
</div>
<script>
let arr=document.querySelectorAll('#div1 ul li.box span.s1 input[type=text]');
// 给选中的元素添加背景
for (let i=0;i<arr.length;i++){
arr[i].style.background='pink';
}
console.log(arr);
</script>
</body>
节点操作（元素操作）
创建节点（元素）
创建元素 document.createElement("tag")
添加元素 parent.appendChild(child) 添加（追加）到最后
添加元素 parent.insertBefore(child,位置) 添加到任意位置
<body>
<input type="text" id="txt1">
<button type="button" id="btn1">按钮</button>
<ul id="ul1"></ul>
<script>
let oTxt=document.getElementById("txt1");
let oBtn=document.getElementById("btn1");
let oUl=document.getElementById("ul1");
//点击button按钮后
oBtn.onclick=function (){
//创建一个li元素
let oLi=document.createElement("li");
// oTxt.value 获取输入框里的内容
oLi.innerHTML=oTxt.value;
// 获取完后清空oTxt.value里的内容
oTxt.value='';
//创建一个元素必须插入才会显示
// 把获取到输入框里的内容写入到li标签并且往页面追加显示此元素
oUl.appendChild(oLi);
}
</script>
</body>
删除节点（元素）
删除元素 parent.removeChild(child)
<body>
<h2>删除节点</h2>
<div id="txt">
<p>这是第一个子节点</p>
<p>这是第二个子节点</p>
<p>这是第三个子节点</p>
</div>
<input type="button" value="删除" id="btn">
<script>
let deletetxt=document.getElementById('txt');
let delNode=document.getElementById('btn');
delNode.onclick=function (){
//判断是否有子节点
if(deletetxt.hasChildNodes()){
//删除第一个节点
deletetxt.removeChild(deletetxt.firstChild);
}
}
</script>
</body>
替换元素
替换元素 parent.replaceChild(child,old_child)
<body>
<button type="button" id="btn1">按钮</button>
<ul id="ul1">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<script>
let oBtn=document.getElementById('btn1');
let oUl=document.getElementById('ul1');
oBtn.onclick=function (){
//创建一个li元素
let oLi=document.createElement('li');
oLi.innerHTML="xiaomo";
// 替换掉ul下第一个li里的内容
oUl.replaceChild(oLi,oUl.children[0]);
}
</script>
</body>