每天一句：成长的速度取决于在过程中发现和解决问题的速度，最终这是一个量变引发质变的过程；
DOM(Document Object Model)即文档对象模型，针对HTML和XML文档的API(应用程序接口)。DOM描绘了一个层次化的节点树，用于添加、删除和修改页面的某一部分。
一、DOM介绍
DOM中的三个字母，D(文档)可以理解为整个WEB加载的页面文档；O(对象)可以理解为类似window对象子类的东西，可以调用属性和方法，也就是document对象；M(模型)可以理解为网页文档的树形结构。
DOM提供了访问结构化文档的一种方式，但DOM并不是一种技术，它只是访问结构化文档(主要是XML文档和HTML文档)的一种思想。
DOM有三个等级，分别是DOM1、DOM2、DOM3，并且DOM1在1998年10月成为W3C标准。DOM1所支持的浏览器包括IE6+、Firefox、Safari、Chrome和Opera1.7+。
注: IE中的所有DOM对象都是以COM对象的形式实现的，即是IE中的DOM会与其他浏览器有一定的差异。
-
节点
加载HTML页面时，web浏览器生成一个树形结构，用来表示页面内部结构。DOM将这种树形结构理解为由节点组成:上图树形结构，html标签，没有父辈，没有兄弟，所以html标签为根标签。head标签是html的子标签，meta和title标签是兄弟关系。如果把每个标签当作一个节点，那么这些节点组合成的就是节点树。
节点种类
元素节点、文本节点、属性节点;
<div id="box">测试Div</div>
元素节点: div
属性节点: id="box"
文本节点: 测试Div
二、查找元素
- getElementById() 获取特定ID的节点
- getElementsByName() 通过name书信获取到节点列表
- getElementsByTagName() 获取相同元素的节点列表
- getElementsByClassName() 获取特定类名元素的节点列表
案例: getElementsByClassName的封装(低版本中没有该方法)
案例: 导航下拉菜单效果
三、DOM节点
- node节点属性
节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性: nodeName、nodeType和nodeValue;
var oBox = document.getElementById("box");
alert(oBox.nodeName); // DIV
alert(oBox.nodeType); // 1
alert(oBox.nodeValue); // null
var att = oBox.attributes; // 获取所有属性节点集合
alert(att[0].nodeValue); // box
-
层次节点属性
节点的层次可以划分为: 父节点与子节点、兄弟节点两种。当需要获取其中一个元素节点时，就可以使用层次节点属性俩获取它相关层次的节点;- childNodes: 获取当前元素节点的所有子节点（非IE下包含了文本和元素类型节点，也会包含非法嵌套的子节点；IE下只包含元素类型节点）
for(var i=0; i<oBox.childNodes.length; i++){ // 判断元素节点 if(box.childNodes[i].nodeType === 1){ // 注意输出的是大写的元素名 alert('元素节点:' + box.childNodes[i].nodeName); } else if(box.childNodes[i].nodeType === 3){ // 判断文本节点(有空的文本节点，来源于换行操作) alert('文本节点:' + box.childNodes[i].nodeValue); }
}
>
注1: 使用childNodes返回子节点对象时，可能是元素子节点，也有可能是文本子节点。元素子节点，可以通过nodeName或tagName获取标签名称，来进一步判断处理；而文本节点可以使用nodeValue获取；
注2: 在获取到文本节点时，是无法使用innerHTML属性输出文本内容的(nodeValue和innerHTML第一个区别即是取值)；
注3: nodeValue和innerHTML第二个区别就是赋值时，nodeValue会在文本里的HTML转义成特殊字符，从而达到形成单纯文本的效果；
// 结果: <span>我是span喔</span>
box.childNodes[0].nodeValue = '<span>我是span喔</span>'
// 结果: 我是span喔
box.innerHTML = '<span>我是span喔</span>'
注4: 在非IE中，标准的DOM具有识别空白文本节点的功能；而IE自动忽略了，如果要保持一致的元素节点，可以直接使用getElmentsByTagName方式，或者手动删除/忽略(需要写封装操作);
- firstChild: 获取当前元素节点的第一个子节点
```
alert(oBox.firstChild.nodeName);
```
- lastChild: 获取当前元素节点的最后一个子节点
alert(oBox.lastChild.nodeName);
- parentNode: 获取当前节点的父节点
alert( oBox.parentNode.nodeName);
- previousSibling: 获取当前节点的前一个同级节点
alert(oBox.lastChild.previousSibling.nodeName);
- nextSibling: 获取当前节点的后一个同级节点
alert(oBox.firstChild.nextSibling.nodeName);
- attributes: 获取当前元素节点的所有属性节点集合
oBox.attributes.length // 返回属性节点个数
oBox.attributes[0].nodeType // 节点类型
oBox.attributes[0].nodeValue // 属性值
oBox.attributes[0].nodeName // 属性名
oBox.attributes['title'] // 返回属性名为title的属性节点
- 节点操作
DOM不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点、替换节点；
- write(): 可以把任意字符串插入到文档中
document.write('haha')
- createElement(): 创建一个元素节点
document.createElement('p'); // 创建一个新元素节点p
- appendChild(): 将新节点追加到子节点列表的末尾
var oUl = document.getElementById("box1"); // 获取某个元素节点
var oP = document.createElement('p'); // 创建一个新元素节点
oUl.appendChild(oP); // 将新元素节点p，添加到子节点末尾
- createTextNode(): 创建一个文本节点
var oText = document.createTextNode(‘哈哈’); // 创建一个文本节点
- insertBefore(): 将新节点插入到前面
语法:
// obj父元素，将子元素A插入到子元素B的前面
obj.insertBefore(要插入的元素A, 子元素B);
var oBox = document.getElementById("box"); // 获取到元素
var oP = document.createElement('p'); // 创建一个p节点
oBox.parentNode.insertBefore(oP, oBox); // 将p节点插入到oBox前面
- cloneNode(): 复制节点（创建一个节点的系统开销相对会较大）
var oBox = document.getElementById("box"); // 获取到元素
var newBox = oBox.cloneNode(true); // true即表示复制内容
document.body.appendChild(newBox); // 添加到页面
- removeChild(): 移除节点
document.body.removeChild(newBox); // 将newBox从body从删除
> 案例: 简易日历
作者：EndEvent
链接：https://www.jianshu.com/p/934aa30ba207
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
