1. 什么是DOM？
文档对象模型（DOM），全称为 “文档对象模型”（Document Object Model），js组成部分之一，描述处理网页内容的方法和接口。它的作用是将网页转换为一个js对象，从而可以用脚本进行各种操作（比如增删内容）。
DOM是网页的编程接口。它给文档（结构树）提供了一个结构化的表诉并且定义了一种方式–程序可以对结构树进行访问，以改变文档的内容，样式和内容。
1.1. 节点层级
<!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>Document</title>
</head>
<body>
</body>
</html>
节点解析图：
其中，document节点表示每个文档的根节点。在这里，根节点的唯一子节点是元素，我们称之为文档元素（documentElement）。文档元素是文档最外层的元素，所有其他元素都存在于这个元素之内。每个文档只能有一个文档元素。在 HTML 页面中，文档元素始终是元素。
1.2 节点
DOM的最小组成单位叫做节点（node）。 文档的树形结构（DOM树），就是各种不同类型的节点组成。每个节点可以看成是文档树的一片叶子。
节点的类型有7种：Document、DocumentType、Element、Text、Comment、DocumentFragment。
常用节点：
- 文档节点（document）
整个HTML文档document对象作为window对象的属性存在的，我们不用获取可以直接使用。 - 元素节点（Element）
HTML文档中的HTML标签 - 属性节点（Attribute）
元素的属性，表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分 - 文本节点（Text）
HTML标签中的文本内容。
其他节点：
- DocumentType
doctype标签（比如<!DOCTYPE html>）。 - Comment
注释 - DocumentFragment
文档的片段
以上7种节点都属于浏览器原生提供的节点对象的派生对象，具有一些共同的属性和方法。
1.3 节点树
DOM树状结构图：
最顶层的节点就是document节点，它代表了整个文档。文档里面最高的HTML标签，一般是<html>，它构成树结构的根节点（root node），其他HTML标签节点都是它的下级。
除了根节点以外，其他节点对于周围的节点都存在三种关系。
- 父节点关系（parentNode）：直接的那个上级节点。
- 子节点关系（childNode）：直接的下级节点。
- 同级节点关系（sibling）：拥有同一父节点的节点。
2. Node类型
Node 接口在 JavaScript中被实现为 Node 类型，在除 IE之外的所有浏览器中都可以直接访问这个类型。在 JavaScript中，所有节点类型都继承 Node 类型，因此所有类型都共享相同的基本属性和方法。
2.1 Node节点属性
- nodeType
nodeType属性返回一个整数值，表示节点的类型，常用节点类型如下：
| 节点类型 | 值 | 对应常量 |
|---|---|---|
| 文档节点（document） | 9 | Node.DOCUMENT_NODE |
| 元素节点（element） | 1 | Node.ELEMENT_NODE |
<script>
console.log(document.nodeType); //9
var container = document.getElementById("container")
console.log(container.nodeType); // 1
</script>
- nodeName
- nodeValue
- textContent
- nextSibling
- previousSibling
- parentNode
- parentElement
- firstChild和lastChild
- childNodes
2.2 Node节点常用操作方法
- appendChild()
appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。
<!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>Document</title>
<style>
#container{
width: 200px;
height: 200px;
background-color: chocolate;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var container =document.getElementById('container')
//appendChild()
//新建一个节点
var a = document.createElement('a')
// //给新节点设置内容
a.innerHTML ='a标签'
// //appendChild 将子节点添加到目标节点中
// //父容器.appendChild(子节点)
container.appendChild(a)
</script>
</body>
</html>
页面效果：
- insertBefore()
insertBefore方法用于将某个节点插入父节点内部的指定位置。
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
insertBefore方法接受两个参数:第一个参数是所要插入的节点newNode，第二个参数是父节点parentNode内部的一个子节点referenceNode(位置参考节点)。newNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode
在上诉案例中添加代码
//新建一个节点
var span1 = document.createElement('span')
//设置节点内容
span1.innerHTML = "我是一个span标签"
//在container之前插入一个span标签
document.body.insertBefore(span1,container)
页面效果：
- removeChild()
removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。
//removeChild()
//删除a标签
container.removeChild(a)
页面效果：
- replaceChild()
replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。
var replacedNode = parentNode.replaceChild(newChild, oldChild);
replaceChild方法接受两个参数，第一个参数newChild是用来替换的新节点，第二个参数oldChild是将要替换走的子节点。返回值是替换走的那个节点oldChild。
在上述代码中添加代码：
//replaceChild()
var p = document.createElement('p')
p.innerHTML="这是一个段落标签"
document.body.replaceChild(p,span1)
页面效果：
5. 其他方法
cloneNode()
方法返回调用该方法的节点的一个副本。
var dupNode = node.cloneNode(deep);
node：将要被克隆的节点
dupNode：克隆生成的副本节点
deep： 可选，是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。
// 克隆
var container2 =container.cloneNode(true);
//将克隆后的节点添加到页面结构中
document.body.appendChild(container2)
3. Document类型
3.1 Document属性
| 属性 | 描述 |
|---|---|
| documentElement | 始终指向HTML页面中的元素。 |
| body | 直接指向元素 |
| doctype | 访问<!DOCTYPE>, 浏览器支持不一致，很少使用 |
| title | 获取文档的标题 |
| url | 取得完整的URL |
| domain | 取得域名，并且可以进行设置，在跨域访问中经常会用到。 |
| referrer | 取得链接到当前页面的那个页面的URL，即来源页面的URL。 |
| images | 获取所有的img对象，返回HTMLCollection类数组对象 |
| forms | 获取所有的form对象，返回HTMLCollection类数组对象 |
| links | 获取文档中所有带href属性的元素 |
3.2. 查找元素的方法
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
| document.querySelector() | 返回文档中匹配指定的CSS选择器的第一个元素 |
| document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 |
3.3. 添加元素
document.createElement(element)
创建一个新的HTML元素，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
<script>
// 创建元素节点p
var p = document.createElement('p');
// 向p标签插入内容
p.innerHTML = '我是一个p标签';
// 将节点插入到body中
document.body.appendChild(p);
</script>
3.4. 写入
document.write()
向文档写入文本或 HTML 表达式 或 JavaScript 代码。
<script>
document.write("<p>Hello world!</p>");
document.write("<span>Hello DOM!</span>");
document.write("Hello Weekend!");
</script>
4. Element类型
4.1 属性
attributes：返回一个与该元素相关的所有属性的集合。
classList：返回该元素包含的 class 属性的集合。
className：获取或设置指定元素的 class 属性的值。
clientHeight：获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。
clientTop：返回该元素距离它上边界的高度。
clientLeft：返回该元素距离它左边界的宽度。
clientWidth：返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。
innerHTML：设置或获取 HTML 语法表示的元素的后代。
tagName：返回当前元素的标签名。
4.2 常用方法
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html content | 改变元素的文本内容 |
| element.attribute = value | 修改属性的值 |
| element.getAttribute() | 返回元素节点的指定属性值。 |
| element.setAttribute(attribute, value) | 设置或改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
5. Text类型
Text 节点由 Text 类型表示，包含按字面解释的纯文本，也可能包含转义后的 HTML 字符，但不含 HTML 代码。
5.1属性及方法
length
文本长度
appendData(text)
追加文本
deleteData(beginIndex,count)
删除文本
insertData(beginIndex,text)
插入文本
replaceData(beginIndex,count,text)
替换文本
splitText(beginIndex)
从beginIndex位置将当前文本节点分成两个文本节点
document.createTextNode(text)
创建文本节点，参数为要插入节点中的文本
substringData(beginIndex,count)
从beginIndex开始提取count个子字符串