一、使用节点
Node接口：所有节点类型必须继承Node类型
1、节点类型
DOM规定：整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，如此等等。
介绍12种节点类型的博客：https://www.cnblogs.com/xiaohuochai/p/5785189.html
2、节点名称和值
nodeName和nodeValue属性可以读取节点的名称和值。
3、节点关系
DOM把文档视为一种树结构，这种树结构被称为节点树。JavaScript脚本可通过这棵树访问所有节点，可以修改或删除它们的内容，也可以创建新的节点。
4、访问节点
通过节点之间的关系，我们可以定位文档中每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历
ownerDocument：返回当前节点的根元素（document对象）
parentNode：返回当前节点的父节点。所有节点只有一个父节点
childNodes：返回当前节点所有子节点的列表（用[]或者item()访问）
firstChild：返回当前节点的首个子节点
lastChild：返回当前节点的最后一个子节点
nextSibling：返回当前节点之后相邻的同级节点
previousSibling：返回当前节点之前相邻的同级节点
访问根节点还可以用document.documentElement
5、操作节点
Node类型原型方法说明
| 方法 | 说明 |
|---|---|
| appendChild() | 向节点的子节点列表的结尾添加新的子节点 |
| cloneNode() | 复制节点 |
| hasChildNodes() | 判断当前节点是否拥有子节点 |
| insertBefore() | 在指定的子节点前插入新的子节点 |
| normalize() | 合并相邻的Text节点并删除空的Text节点 |
| removeChild() | 删除（并返回）当前节点的指定子节点 |
| replaceChild() | 用新节点替换一个子节点 |
二、使用文档节点
1、访问文档子节点的方法如下：
1）使用documentElement属性，该属性始终指向HTML的html元素
2）使用childNodes列表访问文档元素
ducument对象有个body属性，使用它可以访问body元素
var body=document.body;
2、访问文档信息
HTMLDocument的实例对象document包含很多属性，用来访问文档信息
title：设置或返回<title>包含的文本信息。
lastModified：返回文档最后被修改的日期和时间
URL：返回当前文档的完整URL，即地址栏中显示的地址信息
domain：返回当前文档的域名
referrer：返回链接到当前页面的那个页面的URL。
3、访问文档元素
document对象包含多个访问文档内元素的方法。
getElementById()：返回指定id属性值的元素
getElementByTagName()：返回所有指定标签名称的元素节点
getElementByName()：返回所有指定名称（name属性值）的元素节点。该方法多用于表单结构中，用于获取单选按钮组或复选框组。
4、访问文档集合
除了属性和方法，document对象还定义了一些特殊的集合。
document.anchors：返回文档中所有Anchor对象，即所有带name特性的<a>标签
document.applets（不再推荐使用）
document.forms：返回文档中所有Form对象
document.images：返回文档中所有Image对象
document.links：返回文档中所有Area和Link对象，即所有带href特性的<a>标签
三、使用元素节点
Element类型是最常用的节点类型，它具有以下特征：
*nodeType值为1
*nodeName值为元素的标签名称，也可以使用tagName属性。在HTML中，返回标签名始终为大写，在脚本比较需要全部小写化。
*nodeValue值为null
*parentNode是Document或Element类型节点
*其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或者EntityReference
所有HTML元素都是HTMLElement类型或者其子类型的实例，HTMLElement又是Element的子类。
四、使用文本节点
Text节点具有以下特征
nodeType值为3
nodeName值为“#text”
nodeValue值为节点所包含的文本
parentNode是一个Element类型节点
不包含子节点
1、访问文本节点
比较直接的用法是innerText属性读取，但是标准的用法是nodeValue属性
var text = div.firstChild.nodeValue
2、创建文本节点
document.createTextNode(data);
3、操作文本节点
appendData(string)：将字符串string追加到文本节点的尾部
deleteData(start,length)：从start下标开始删除length个字符
insertData(start,string)：在start下标位置插入字符串string
replaceData(start,length,data)：使用字符串string替换从start下标开始length个字符
splitText(offset)：在offset下标把一个Text节点分割成两个节点
substringData(start,length)：从start上下标开始提取length个字符
4、读取HTML字符串
元素的innerHTML属性可以返回调用元素包含的所有子节点对应的HTML标记字符串。
5、插入HTML字符串
1）innerHTML属性
2）insertAdjacentHTML()方法
包含两个参数：第一个是设置插入位置，第二个是传入要插入的HTML字符串。
插入位置值有：beforebegin、afterbegin、beforeend、afterend。
6、替换HTML字符串
outerHTML属性会覆盖原HTML语句
7、插入文本
1）innerText属性
firefox不支持，可以用textContent属性来兼容
2）outerText属性，与innerText类似
五、使用文档片段节点
文档片段的作用：将文档片段作为节点”仓库“来使用，保存将来可能会添加到文档中的节点。
例如：一次性添加多个节点，减少页面重绘次数
六、使用属性节点
属性节点有Attr类型表示。尽管属性也是节点，但却不被认为是DOM文档数的一部分，DOM没有提供关系指针，很少直接引用属性节点。开发人员常用getAttribute（）、setAttribute（）和removeAttribute（）等方法来操作属性
1、访问属性节点
创建属性节点：document.createAttribute(name)
将新创建的属性添加到元素中，必须使用元素的setAttributeNode（）方法
添加属性后可以通过下列几个方式：attribute属性、getAttributeNode()方法都会返回对应的Attr节点，而getAttribute（）方法直接返回属性的值
2、读取属性值
getAttribute(”元素名称“)可以快速读取指定元素的属性值
3、设置属性值
setAttribute(name,value)可以设置元素的属性值
4、删除属性
使用元素的removeAttribute（）方法可以删除指定的属性：removeAttribute(name)
5、使用类选择器
HTML5为document对象和HTML元素新增了getElementsByClassName()方法，返回一个带有指定类的所有元素的NodeList
6、自定义属性（使用data-前缀）（略）