最近学习过程中刚好接触到了DOM，根据课上代码的使用与老师讲解大概了解了一下。课后我查了维基百科、MDN与阮一峰的JavaScript标准参考教程中关于DOM的介绍，加深了对DOM的了解。以下我对所查到资料与课上的笔记进行整理，简单介绍一下DOM是个什么东西。毕竟刚刚才学到DOM，知识总结肯定不够全面，后续对DOM掌握到一定程度我会再重新整理修改一下。
DOM（Document Object Model）文档对象模型，是JavaScript操作网页的接口。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种增删减改内容的操作。
浏览器会根据DOM模型将HTML文档解析成一系列的节点（node：DOM的最小组成单位），再由这些节点组成一个树状结构（DOM tree）。或者也可以这么说，DOM模型用一个逻辑树表示一个文档，树的每个分支的终点都是一个节点（node），每个节点都包含着对象（Object）。DOM的方法可以让你用特定的方式操作这个树，用这些方法可以改变文档结构、样式以及内容。所有的节点和最终的树状结构都有规范的对外接口（API）。
注意：DOM并不是一个编程语言，它只是一个接口规范，可以用各种语言实现。DOM并不是JavaScript语法的一部分，但是如果没有DOM，JavaScript语言就没有办法控制网页。
-
节点类型（nodeType）
- 节点的类型有七种：
Document（Node.DOCUMENT_NODE=== 9）：整个文档树的顶层节点
DocumentType（Node.DOCUMENT_TYPE_NODE=== 10）：doctype标签（比如<!DOCTYPE html>）
Element（Node.ELEMENT_NODE=== 1）：网页的各种HTML标签（比如<body>、<a>等）
Attribute：网页元素的属性（比如class="right"）
Text（Node.TEXT_NODE=== 3）：标签之间或标签包含的文本
Comment（Node.COMMENT_NODE=== 8）：注释
DocumentFragment（Node.DOCUMENT_FRAGMENT_NODE=== 1）：文档的片段
浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。
节点（Node）有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型。
根据以上知识如果我们需要判断一个Node是否是元素，可以如以下代码所示判断：
if(Node.nodeType === 1){
console.log('Node is a Element');
}
-
常用的DOM操作API
1.creatElement
createElement通过传入指定的一个标签名来创建一个元素，代码如下：
var div = document.creatElement('div')
上面代码新建一个<div>的节点
2.appendChild
appendChild接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。代码如下：
var div = document.createElement('div');
document.body.appendChild(div);
上面代码新建一个<div>的节点并将其插入document.body的尾部。
3.nodeName
nodeName属性返回节点的名称。
// HTML 代码如下
// <div id="div1">hello world</div>
var div = document.getElementById('div1');
div.nodeName // "DIV"
上面代码中，元素节点<div>的nodeName属性就是大写的标签名DIV。
如果想要得到小写的标签名，则可修改为：div.nodeName.lowercase()
4.textContent
textContent属性返回当前节点和它的所有后代节点的文本内容。
// HTML 代码为
// <div id="divA">This is <span>some</span> text</div>
document.getElementById('divA').textContent
// This is some text
textContent属性自动忽略当前节点内部的 HTML 标签，返回所有文本内容。它的属性是可读写的，给该属性一个值，会创建一个新的文本节点，替换所有原来的子节点。它还有一个好处，就是自动对 HTML 标签转义。
document.getElementById('divA').textContent = 'Hello World'
// 原先div内容被修改为Hello World
5.nextSibling
nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null。
注意：如果当前节点后面有空格，那我们拿到的节点便是文本节点，与预期的不符，故需要进行处理一下，使用while循环遍历所有子节点来找出正确的节点。
6.previousSibling
previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null。
注意：previousSibling与nextSibling注意点相同。
7.parentNode与parentElement
对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）。
parentNode属性返回当前节点的父节点。
parentElement属性返回当前节点的父元素节点。
8.firstChild与lastChild
firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。
lastChild属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。用法与firstChild属性相同。
// HTML 代码如下
// <p id="p1"><span>First span</span></p>
var p1 = document.getElementById('p1');
p1.firstChild.nodeName // "SPAN"
上面代码中，p元素的第一个子节点是span元素。
注意：firstChild返回的除了元素节点，还可能是文本节点或注释节点。
9.childNodes
childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点。使用该属性中返回的length值，可以遍历某个节点的所有子节点。
var div = document.getElementById('div1');
var children = div.childNodes;
for (var i = 0; i < children.length; i++) {
// ...
}
注意：除了元素节点，childNodes属性的返回值还包括文本节点和注释节点。如果当前节点不包括任何子节点，则返回一个空的NodeList集合。由于NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中。
