一、DOM简介
D——document，没有文档，也就是没有网页，DOM就无从谈起。
当创建了一个网页并把它加载到web浏览器中时，DOM就悄然而生。浏览器根据网页文档创建一个文档对象。
O——object，对象。
对象有三种，
1、用户自定义对象
2、内建对象，javascript中的对象，如Array，Math，Date等。
3、宿主对象，由浏览器提供的对象，如window对象。
M——model，模型。
正如一个火车模型代表一列真正的火车，DOM代表被加载到浏览器窗口里的当前网页。浏览器为我们提供了当前网页的模型，可通过javascript去读写它。
所以DOM(Document Object Model)，文档对象模型，可以简单理解为代表网页文档的一颗树（模型）。
二、nodeName、nodeValue以及nodeType和innerHTML和value
DOM将网页表示为一颗树，该树的节点类型有多种。
元素节点——html标签
文本节点——文本
属性节点——属性总是被包含在标签里，所以属性节点总是被包含在元素节点当中。（元素节点（属性节点，文本节点））
通常可以通过开发者工具（如firebug）查看dom结构，但是要说明一点，开发者工具中的DOM并不完整，因为有些元素存在于DOM中，但是不会被开发者工具显示。比如回车会被当做一个文本节点。
1、nodeType
DOM本质就是一堆节点的集合，由于包含不同类型的信息，所以就有不同类型的节点。接下来看nodeType。
元素节点，nodeType为1
属性节点，nodeType为2
文本节点，nodeType为3
文档节点，nodeType为9
Note：文档节点并不是根元素(html)，因为注释等内容可以出现在根元素之外。所以在构造DOM树时，根元素并不适合作为根节点，所以就出现了文档节点，而根节点作为文档节点的子节点。
补充内容:
值——元素类型
1——元素节点，表示文档中元素，元素节点是唯一能够拥有属性的节点类型。元素和属性的文本内容都是由文本节点来表示的。
2——属性节点，代表元素的属性。
3——文本节点，只包含文本内容，也可以只包含空白。
4——CDATA段节点。
5——ENTITY REFERENCE实体引用节点。实体引用节点可以被用于表示DOM树中的一个实体引用。
6——ENTITY实体节点，表示文档中已分析或未分析的实体。
7——PI（processing instruction）处理指令节点，
8——注释节点，表示注释的内容。
9——文档节点(DOCUMENT)，文档树的根节点。
10——DOCUMENT TYPE文档类型节点。
11——DOCUMENT FRAGMENT文档片段节点，文档片段是"轻量级的"或"最小的"Document对象。
12——NOTATION记号节点表示了在DTD中声明的记号。
2、nodeName
对于元素节点，nodeName就是标签名。元素节点也可以通过tagName获取标签名。
对于文本节点，nodeName永远是#text
对于属性节点，nodeName是属性名称
对于文档节点，nodeName永远是#document。
3、nodeValue
对于元素节点，因为本身不直接包含文本，所以nodeValue是不可用的。
对于文本节点，nodeValue值为文本值
对于属性节点，nodeValue值为属性值。
4、innerHTML
innerHTML只对元素节点有用，获取元素节点内容，也就是元素节点包含的文本节点的值。其他节点使用nodeValue。
类似的，form里的DOM元素（input select checkbox textarea radio）值获取时都使用value。
textarea虽然可以访问innerHTML,但是获取的是初始文档中的值，当页面的textarea中的值发生变化时，innerHTML不会及时更新。有兴趣可自己写demo测试。
三、HTML DOM 访问节点
DOM的思想就是每个节点都是对象，是对象我们就可以通过一些方法获取它或者改变它的属性等。
可以通过多种方法来查找DOM元素：
a、使用getElementById()和getElementByTagName()和getElementsByClassName()方法
b、通过一个元素节点的parentNode、childNodes、children、firstChild和lastChild和previousSibling和nextSibling
c、通过document.documentElement和document.body
1、getElementById()和getElementsByTagName()和getElementsByClassName()和getElementsByName()
这四种方法会忽略文档的结构。
getElementById()不多说。
getElementsByTagName()使用指定标签名返回所有元素，这些元素是调用该方法的元素的后代。
getElementsByClassName()返回带有指定类名的所有元素的节点列表。
getElementsByName()根据元素的name属性返回所有元素的节点列表。
2、childNodes
childNodes保存子节点的引用，包括空白也在内（除了IE<9），也包括<script>在内。
3、children
如果只想获得子节点中的元素节点，跳过文本节点，应该使用children属性。
IE<9会在children属性中列出注释节点。
4、firstChild和lastChild
firstChild和lastChild是childNodes中首尾节点的快速索引。
5、parentNode，previousSibling和nextSibling
获取父节点或者左右相邻的节点。
可借助这些属性来更新DOM，增删元素。
四、HTML DOM 操作
1、创建新元素（节点）
- createElement()//创建一具体的元素
- createTextNode()//创建一个文本节点
- createDocumentFragment()//创建一个DOM片段
createDocumentFragment()创建一个文档碎片，把所有的节点都加在上面，最后把文档碎片一次性添加到document中，比一次次修改DOM更高效。
查看createDocumentFragment()执行效率了解更多。
2、元素操作
a、更改元素内容
<body> <p id="p">p标签的内容</p> <script> var p=document.getElementById("p"); alert("暂停观察"); p.innerHTML="内容替换了"; </script> </body>
还可以直接给文本节点的nodeValue赋值。
比如：p.firstChild.nodeValue="再次更新文字"
b、新增元素(appendChild和insertBefore)
appendChild()将新元素作为父元素的最后一个子元素。
<body> <p id="p1">p标签的内容</p> <script> var p1=document.getElementById("p1"); var newP=document.createElement("p"); var text=document.createTextNode("新增的p标签的内容"); newP.appendChild(text); p1.parentNode.appendChild(newP); </script> </body>
insertBefore()通过父元素调用，将第一个元素插入第二个元素前面。
<body> <p id="p1">p标签的内容</p> <script> var p1=document.getElementById("p1"); var newP=document.createElement("p"); var text=document.createTextNode("新增的p标签的内容"); newP.appendChild(text); p1.parentNode.insertBefore(newP,p1);//通过父p1的父元素将newP插入到p1的前面 </script> </body>
c、移除元素removeChild
DOM中删除元素，必须通过父元素进行操作。
<body> <p id="p1">p标签的内容</p> <script> var p1=document.getElementById("p1"); alert("暂停观察"); p1.parentNode.removeChild(p1); </script> </body>
d、替换元素replaceChild
替换元素也必须通过父元素来进行，接收2个参数，和insertBefore类似，用第一个参数替换第二个
<body> <p id="p1">p标签的内容</p> <script> var p1=document.getElementById("p1"); var p2=document.createElement("p"); var text=document.createTextNode("替换的文本"); p2.appendChild(text); alert("暂停观察"); p1.parentNode.replaceChild(p2,p1); </script> </body>
可见DOM结构的改动（增删改）都是通过父节点来进行的。
4、事件操作
DOM对HTML事件做响应。
事件处理的工作机制：
在元素添加了事件处理函数后，一旦预定事件发生，相应的JavaScript代码可以返回一个结果，而这个结果将被传递回那个事件处理函数。
比如给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样一来，当这个链接被点击时，如果那段JavaScript返回给onclick事件处理函数的值是true，onclick事件处理函数将认为“这个链接被点击了”；反之如果那段JavaScript代码返回给onclick事件处理函数的值是false，onclick事件处理函数将认为“这个函数没有被点击”。
可以拿下面代码验证：
<a href="http://www.baidu.com" onclick="return false;">click me</a>
关于事件这部分内容太多，有兴趣可看