DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
节点层次
根节点为文档节点（document），下面有各种节点，包括元素节点、特性节点和文档节点等，共同组成一颗节点树。
Node类型
JavaScript中所有节点类型都继承自Node类型，因此也就拥有Node类型的属性和方法。以下方法和属性调用者为someNode。
1、属性
nodeType：判断节点类型，为一个1到12的数字分别代表不同类型，如element类型为数字1。
nodeName，nodeValue：对于不同类型节点去不同的值。
childNodes：子节点的NodeList对象，NodeList是一种类数组对象，有length属性，可通过方括号或item()访问各项。
parentNode：指向父节点
previousSibling：指向前面的兄弟节点
nextSibling：指向后面的兄弟节点
firstChild：指向第一个子节点
lastChild：指向最后一个子节点
ownerDocument：指向整个文档的文档节点
2、方法
hasChildNodes()：判断是否有子节点
appendChild()：向childNodes列表的末尾增加一个节点 注：任何节点不能同时出现在文档的多个位置上
insertBefore()：向某个位置的前面插入一个节点
replaceChild()：替换指定节点
removeChild()：移除某个节点
cloneNode()：复制节点，如果参数为true，则深度复制 //除IE9之前的IE浏览器外，都会为空白字符创建节点
normalize()：删除空文本节点，合并相邻文档节点
Document类型
Document类型表示文档。浏览器中document对象是window对象的一个属性，因此可以作为全局对象来访问。
1、文档的子节点
documentElement：指向<html>元素，等同于document.childNodes[0]和document.firstChild
body：指向<body>元素
doctype：大多数情况下会指向一个DocumentType节点
2、文档信息
title：当前页面的标题
URL：包含页面完整的URL，不可设置
domain：只包含页面的域名，可以设置，但是不能设置为URL中不包含的域，并且设置过程只能从紧绷到松散（p2p.wrox.com——>wrox.com），设置为相同域，便于通信
referrer：保存着链接到当前页面的那个页面的URL，不可设置
3、查找元素
getElementById()：取得ID名为参数的元素
getElementByTagName()：参数为要去的元素的标签名，返回一个NodeList对象，在HTML文档中，返回一个HTMLCollection对象
namedItem()：HTMLCollection对象的一个方法，通过元素的name特性取得集合中的项
getElementsByName()：返回带有给定name特性的所有元素，返回一个HTMLCollection对象，只有HTMLDocument对象才具有此方法
上面这些方法也可用element类型调用，表示在相应的节点下操作。
4、特殊集合
以下几种属性都返回HTMLCollection对象
forms：包含文档中的所有<form>元素，与document.getElementByTagName("form")得到结果相同
images：包含文档中的所有<fimg>元素，与document.getElementByTagName("img")得到结果相同
anchors：包含文档中所有带name属性的<a>元素
links：包含文档中所有带href特性的<a>元素
5、DOM一致性检测
document.implementation.hasFeature()：检测浏览器是否支持给定名称和版本的功能
6、文档写入
write()，writeln()：想文档写入内容，可以包含html语句，也可以包含文本内容，但在加载结束后调用时重写整个页面
Element类型
Element类型是Web编程中比较常用的类型，用于表现XML或HTML元素，提供了对元素标签名（tagName）、子节点及特性的访问。
1、HTML元素
id：元素的id特性值
className：元素的class特性值。注意：不是class而是className
2、取得特性
getAttribute()：获取指定特性名的特性值，特性可以是公认的特性或者是自定义的特性（data-前缀）。当时公认的特性时，与使用相对应的属性访问效果相同。如div.id等同于div.getAttribute("id")，这里的div是通过document.getElementById("myDiv")获取的Element类型对象
3、设置特性
setAttribute()：接受两个参数，设定指定特性的值
4、删除特性
removeAttribute()
5、attributes属性
attributes：返回一个NamedNodeMap对象，包含元素的动态特性集合，常用语遍历元素的所有属性
6、创建元素
一般流程：创建一个新元素，为该元素添加特性值，将新元素用appendChild()等方法插入到文档中。
document.createElement()：创建一个新元素
Text类型
可以通过nodeValue属性或data属性访问Text节点包含的文本。操作节点中文本的方法有如下几种：
appendData(text)：将text添加到节点的末尾
deleteData()：删除指定位置的文本
insertData()：插入文本
replaceData()：替换文本
substringData()：提取指定的字符串
1、创建文本节点
document.createTextNode()：创建文本节点，一般将其appendChild()到element类型中
2、规范化文本节点
normalize()：合并相邻文本节点（element.normalize()）
3、分割文本节点
分割文本节点是从文本节点中获取数据的一种常用DOM技术。
splitText()：将一个文本节点在指定位置分成两个文本节点
DocumentFragment类型
文档片段类型虽然不能被直接添加到文档中，但是它可以作为一个”仓库“来使用，可以在里面保存可能添加到文档中的节点，然后实现一次添加，而文档树不会被添加进去。
看下面这个例子
<ul id="myList"></ul>假设我们想为该ul元素添加3个列表项，我们可以用文档片段来这样添加：
var fragment=document.createDocumentFragment();通过文档片段添加的好处是，如果我们逐个添加列表项，那么每添加一次，浏览器就会渲染一次新信息。而利用文档片段，我们可以实现一次性的添加。
var ul=document.getElementById("myList");
var li=null;
for(var i=0;i<3;i++){
li=document.createElement("li");
li.appendChild(document.createTextNode("Item"+(i+1)));
<strong>fragment.appendChild(li);</strong>
}
<strong>ul.appendChild(fragment);</strong>
DOM操作技术
通过前面介绍的方法和属性，我们可以通过动态的创建<script>标签，<style>标签并为他们添加相应的特性，就可以实现创建动态脚本和动态样式的功能。其中，这些脚本和样式可以是外部文件，也可以使内嵌代码。
最后注：前面所提到的NodeList对象，NamedNodeMap对象以及HTMLCollection对象都是”动态的“，也就是说，每当文档结构发生变化，它们都会动态更新，因此每次访问这些对象，都会进行一次基于文档的查询，所以可以考虑将这些类型的对象取得的值缓存起来。