1.什么是DOM？
1.DOM全称：Document Object Model ，文档对象模型。
2.DOM为我们提供了用JavaScript来操作：html、xml文档的应用编程接口。
3.DOM使得html文档形成一棵DOM树，类似于一颗家族树一样，是一层接一层的，子子孙孙。
4.有了DOM，就是相当于拿到了当前html文档的"家谱"，参考这个"家谱"，我们就可以去操作它的每一个节点。
2.什么是节点？
DOM 是这样规定的：
1.整个文档是一个文档节点，并且节点之间具有层次关系。
2.每个 HTML 标签是一个元素节点。
3.包含在 HTML 元素中的文本是文本节点。
4.每一个 HTML 属性是一个属性节点。
5.HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。
3.关于节点（Node）和元素（Element）的区别
1.首先我们观察以下代码：
<div id="div0">
<!--我是一个图片，还没给出具体路径-->
<img src="" alt="">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
var div0 = document.getElementById("div0");
//获取div0下的所有子节点
console.log(div0.childNodes);// NodeList(7) [text, comment, text, img, text, ul, text]
//获取div0下的所有子元素
console.log(div0.children);// HTMLCollection(2) [img, ul]
// HTMLCollection 是 HTML标签列表
// NodeList 是 节点列表
</script>
2.观察发现：
- 当打印div0下所有子元素（Element）时，获取到的就是div0下的两个标签元素<img>和<ul>，干干净净没有任何多余的成分。
- 当打印div0下所有的子节点（Node）时，除了正常的标签，还有三个text，一个comment内容，这三个text内容其实就是<div>、<img>、<ul>标签后面的回车。也就是说把文字（回车）节点、注释节点也都获取到了。
3.所以不难发现：
- 元素是一个小范围的定义，必须是含有完整信息的结点才是一个元素，例如<div>...</div>或<ul>...</ul>等。
- 一个结点不一定是一个元素，而一个元素一定是一个结点。
- 节点的覆盖范围很大，包括：注释、回车符等等。
4.节点属性
1.每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
元素节点的 nodeName 是标签名称
文本节点的 nodeName 永远是 #text
注释节点的 nodeName 永远是 #comment
nodeValue（节点值）
文本节点nodeValue 属性包含文本。
元素节点nodeValue不可用
注释节点nodeValue包括注释内容
nodeType（节点类型）
具体类型对应请参考这里。
2.例如输出一个元素的三个属性：
<div id="div0">
</div>
<script>
var div0 = document.getElementById("div0");
console.log(div0.nodeName,div0.nodeType,div0.nodeValue) // DIV 1 null
</script>
5.获取DOM元素
document.getElementById(); // 根据id获取一个元素
document.getElementsByTagName();// 根据标签名称获取HTML标签列表
document.getElementsByName();// 根据元素（标签）Name属性获取元素列表
document.getElementsByClassName();// 根据className获取HTML标签列表
document.querySelector();// 类CSS选择器返回一个匹配的元素，注意是一个，如有多个，仅返回第一个。
document.querySelectorAll();// 类CSS选择器返回所有匹配的元素。
6.节点遍历
见如下代码：
<div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
abc
<!--<div>abcdef</div>-->
</div>
<button id="bn">按钮</button>
<script>
/*
* children 获取标签下所有HTML元素列表
* childNodes 获取标签下所有的节点，节点包括元素，文本，注释，文本（主要看到的是回车），内容注释就是在网页中增加的注释
* parentElement 父元素
* parentNode 父节点
* firstElementChild 第一个子元素
* firstChild 第一个子节点
*
* lastElementChild 最后一个子元素
* lastChild 最后一个子节点
*
* nextElementSibling 下一个兄弟元素
* nextSibling 下一个兄弟节点
*
* previousElementSibling 上一个兄弟元素
* previousSibling 上一个兄弟节点
*
*
* */
var div=document.getElementsByTagName("div")[0];
console.log(div.children);// HTMLCollection(5) [div, div, div, div, ul]
console.log(div.childNodes);// NodeList(13) [text, div, text, div, text, div, text, div, text, ul, text, comment, text]
console.log(div.childNodes[11]); // <!--<div>我是注释掉的内容</div>-->
//可以如下编写修改注释内容
div.childNodes[11].textContent="注释内容"; // <!--注释内容-->
console.log(div.parentElement);//父元素 body
console.log(div.parentNode);//父节点 body
console.log(div.firstElementChild);
console.log(div.firstChild);// #text
console.log(div.lastElementChild);// 整个<ul>...</ul>
console.log(div.lastChild);// #text
console.log(div.nextElementSibling);// <button id="bn">按钮</button>
console.log(div.nextSibling);// #text
console.log(div.previousElementSibling);// null
console.log(div.previousSibling);// #text
7.创建节点
<script>
/*
* document.createElement("标签名") 根据标签名创建标签
* 父元素.appendChild(DOM元素) 在父元素尾部添加Dom元素
*
* */
var div=document.createElement("div");// 创建一个div元素
document.body.appendChild(div);// 向body中加入div元素
div.textContent="文本内容";// textContent用来设置文本内容
div.style.width="100px";// .style可直接设置样式
div.style.height="100px";
div.style.backgroundColor="#FF0000";
var img = document.createElement("img");// 创建一个img元素
img.src = "img/a.png";// 设置路径
div.appendChild(img);// 把img元素添加到div元素内，img成为了div的子元素
/*
最后输出如下：
<div style="width: 100px; height: 100px; background-color: rgb(255, 0, 0);">文本内容<img src="img/a.png"></div>
*/
</script>
8.DOM的增删改查
<script>
/*
* document.createTextNode("欢迎"); 根据文本内容创建节点
* 可以将节点插入到元素中
* 父元素.insertBefore(要插入的元素，插入在那个元素前面)
* 父元素.appendChild(向父元素末尾插入一个节点node)
* 父元素.replaceChild(新的元素，要替换的元素)
* 元素.remove() 删除当前元素节点
* 父元素.removeChild(子元素) 父元素删除子元素
* 元素.cloneNode(bool) 赋值（克隆）元素，返回新的元素
* bool true 深复制 可以将元素中的子元素和内容都进行复制
* bool false 浅复制 只能将元素和元素的属性进行复制
*
* */
var div=document.createElement("div");// 创建一个div
var span=document.createElement("span");// 创建一个span
span.textContent="你好";//设置span文本元素
div.className="divs";//设置div的class名称
div.appendChild(span);//给div 末尾插入一个span
var txt=document.createTextNode("欢迎");// 创建一个文本元素
div.appendChild(txt);// 给div末尾追加一个文本元素
document.body.appendChild(div);// 给div加在body元素末尾
</script>
