1.DOM
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。
2.节点
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
Document：整个文档树的顶层节点
DocumentType：doctype标签（比如<!DOCTYPE html>）
Element：网页的各种HTML标签（比如<body>、<a>等）
Attr：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段
浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。
3.节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，又像一棵树。
浏览器原生提供document节点，代表整个文档。
document
// 整个文档树
文档的第一层有两个节点，第一个是文档类型节点（<!doctype html>），第二个是 HTML 网页的顶层容器标签<html>。后者构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。
除了根节点，其他节点都有三种层级关系。
父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点
DOM 提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，
同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。
1.Node 接口
所有 DOM 节点对象都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础。
1.1 Node.prototype.nodeType //nodeType属性返回一个整数值，表示节点的类型。
document.nodeType //9
不同节点的nodeType属性值和对应的常量如下。
文档节点（document）：9，对应常量Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE
属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
文档类型节点（DocumentType）：10，对应常量Node.DOCUMENT_TYPE_NODE
注释节点（Comment）：8，对应常量Node.COMMENT_NODE
/*
var node = document.documentElement.firstChild;
if (node.nodeType === Node.ELEMENT_NODE) {
console.log('该节点是元素节点');
}
*/
1.2 Node.prototype.nodeName //nodeName 属性返回节点名称
不同节点的nodeName属性值如下。
文档节点（document）：#document
元素节点（element）：大写的标签名
属性节点（attr）：属性的名称
文本节点（text）：#text
文档片断节点（DocumentFragment）：#document-fragment
文档类型节点（DocumentType）：文档的类型
注释节点（Comment）：#comment
1.3 Node.prototype.nodeValue //nodeValue 属性返回一个字符串，表示当前节点的本身的文本值，该属性可读写
只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值，因此这三类节点的nodeValue可以返回结果，
其他类型的节点一律返回null。同样的，也只有这三类节点可以设置nodeValue属性的值，其他类型的节点设置无效。
/*
// HTML 代码如下
// <div id="d1">hello world</div>
var div = document.getElementById('d1');
div.nodeValue // null
div.firstChild.nodeValue // "hello world"
*/
1.4 Node.prototype.textContent // 属性返回当前节点和他所有后代节点的文本内容
/*
// HTML 代码为
// <div id="divA">This is <span>some</span> text</div>
document.getElementById('divA').textContent
// This is some text
*/
1.5 Node.prototype.baseURI // baseURI 属性返回一个字符串， 表示当前网页的绝对路劲。浏览器根据这个属性，计算网页的相对路径的URL，该属性为只读
/*
// 当前网页的网址为
// http://www.example.com/index.html
document.baseURI
// "http://www.example.com/index.html"
*/
该属性的值一般由当前网址的 URL（即window.location属性）决定，但是可以使用 HTML 的<base>标签，改变该属性的值。
1.6 Node.prototype.ownerDocument //Node.ownerDocument 属性返回当前节点所在的顶层文档对象，及 document 对象
/*
var d = p.ownerDocument;
d === document // true
*/
1.7 Node.prototype.nextSibling //属性返回紧跟在当前节点后面的第一个同级节点，如果当前节点后面没有同级节点，则返回null
/*
// HTML 代码如下
// <div id="d1">hello</div><div id="d2">world</div>
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');
d1.nextSibling === d2 // true
*/
1.8 Node.prototype.previousSibling //返回当前节点前面的，距离最近的一个同级节点，没有返回 null
/*
// HTML 代码如下
// <div id="d1">hello</div><div id="d2">world</div>
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');
d2.previousSibling === d1 // true
*/
1.9 Node.prototype.parentNode //返回当前节点的父节点，对于一个节点来说，他的父节点只可能是三种类型: 元素节点（element) ,文档节点(document),和文档片段节点(documentfragment)
/*
if (node.parentElement) {
node.parentElement.style.color = 'red';
}
*/
上面代码中，父元素节点的样式设定了红色。
由于父节点只可能是三种类型：元素节点、文档节点（document）和文档片段节点（documentfragment）。parentElement属性相当于把后两种父节点都排除了。
1.11 Node.prototype.firstChild 、Node.prototype.lastChild // firstChild 返回当前节点的第一个子节点，last 返回当前节点的最后一个子节点
/*
// HTML 代码如下
// <p id="p1"><span>First span</span></p>
var p1 = document.getElementById('p1');
p1.firstChild.nodeName // "SPAN"
*/
/*
// HTML 代码如下
// <p id="p1">
// <span>First span</span>
// </p>
var p1 = document.getElementById('p1');
p1.firstChild.nodeName // "#text"
*/
1.12 Node.prototype.childNodes //属性返回一个类似数组的对象， nodelist 成员包括当前节点的所有子节点
var children = document.querySelector('ul').childNodes;
1.13 Node.prototype.isConnected // 属性返回一个布尔值，表示当前节点是否在文档中
/*
var test = document.createElement('p');
test.isConnected // false
*/
方法：
2.1 Node.prototype.appendChild() //appendChild()方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。
var p = document.createElement('p');
document.body.appendChild(p);
2.2 Node.prototype.hasChildNodes() //hasChildNodes方法返回一个布尔值，表示当前节点是否有子节点
/*
var foo = document.getElementById('foo');
if (foo.hasChildNodes()) {
foo.removeChild(foo.childNodes[0]);
}
*/
2.3 Node.prototype.cloneNode() // 克隆一个节点，他接受一个布尔值作为参数，表示是否同时克隆子节点，返回值是一个克隆出来的新节点
/*
var cloneUL = document.querySelector('ul').cloneNode(true); //方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点。
*/
2.4 Node.prototype.insertBefore() //将某个节点插入父节点内部指定的位置
/*
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
var p = document.createElement('p');
document.body.insertBefore(p, document.body.firstChild);
*/
2.5 Node.prototype.removeChild() //方法接收一个子节点作为参数，用于从当前节点移除该子节点
/*
var divA = document.getElementById('A');
divA.parentNode.removeChild(divA);
*/
2.6 Node.prototype.replaceChild() //replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。
/*
var replacedNode = parentNode.replaceChild(newChild, oldChild);
var divA = document.getElementById('divA');
var newSpan = document.createElement('span');
newSpan.textContent = 'Hello World!';
divA.parentNode.replaceChild(newSpan, divA);
*/
2.7 Node.prototype.contains() //contains方法返回一个布尔值，表示参数节点是否满足以下三个条件之一。
/*
参数节点为当前节点。
参数节点为当前节点的子节点。
参数节点为当前节点的后代节点。
document.body.contains(node)
*/
2.8 Node.prototype.compareDocumentPosition() // compareDocumentPosition方法的用法，与contains方法完全一致，返回一个六个比特位的二进制值，表示参数节点与当前节点的关系。
二进制值 十进制值 含义
000000 0 两个节点相同
000001 1 两个节点不在同一个文档（即有一个节点不在当前文档）
000010 2 参数节点在当前节点的前面
000100 4 参数节点在当前节点的后面
001000 8 参数节点包含当前节点
010000 16 当前节点包含参数节点
100000 32 浏览器内部使用
/*
// HTML 代码如下
// <div id="mydiv">
// <form><input id="test" /></form>
// </div>
var div = document.getElementById('mydiv');
var input = document.getElementById('test');
div.compareDocumentPosition(input) // 20
input.compareDocumentPosition(div) // 10
*/
2.9 Node.prototype.isEqualNode()，Node.prototype.isSameNode() //isEqualNode方法返回一个布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。
/*
var p1 = document.createElement('p');
var p2 = document.createElement('p');
p1.isEqualNode(p2) // true
*/
2.10 Node.prototype.normalize() //normalize方法用于清理当前节点内部的所有文本节点（text）。它会去除空的文本节点，并且将毗邻的文本节点合并成一个，也就是说不存在空的文本节点，以及毗邻的文本节点。
/*
var wrapper = document.createElement('div');
wrapper.appendChild(document.createTextNode('Part 1 '));
wrapper.appendChild(document.createTextNode('Part 2 '));
wrapper.childNodes.length // 2
wrapper.normalize();
wrapper.childNodes.length // 1
*/
2.11 Node.prototype.getRootNode() // getRootNode()方法返回当前节点所在文档的根节点document，与ownerDocument属性的作用相同。
/*
document.body.firstChild.getRootNode() === document
// true
document.body.firstChild.getRootNode() === document.body.firstChild.ownerDocument
// true
该方法可用于document节点自身，这一点与document.ownerDocument不同。
document.getRootNode() // document
document.ownerDocument // null
*/