概念
文档对象模型（DOM）是表示和操作HTML和XML文档内容的基础API。
选取文档元素
（1）通过ID选取元素
var id = document.getElementById("section1");
<input type="text" id="section1" value="">
【注】在低于IE8版本的浏览器中，getElementById()对于匹配元素的ID不区分大小写，而且也返回匹配name属性的元素。
（2）通过名字选取元素
HTML的name属性最初打算为表单元素分配名字，在表单数据提交到服务器时使用该 属性的值。类似id属性，name是给元素分配名字，但是区别于id，name属性的值不是必须唯一：多个元素可能有同样的名字，在表单中，单选和复选框按钮通常是这种情况。而且，和id不一样的是name属性只在少数HTML元素中有效，包括表单、表单元素、<iframe>和<img>元素。
基于name属性的值选取HTML元素，可以使用Document对象的getElementsByName()方法。
var arr = document.getElementsByName("fav_color"); //通过name，返回一个HTMLElement集合
<input type="text" name="fav_color" />
【注】getElementsByName()定义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用，在XML文档中不可用。它返回一个NodeList对象，后者的行为类似一个包含若干个Element对象的只读数组。通过实践证明在IE9以及IE9以下，getElementsByName()也返回id属性匹配指定值的元素。为了兼容，应该小心谨慎，不要将同样的字符串同时用做name和id。
（3）通过标签名获取元素
Document对象的getElementByTagName()方法可用来选取指定类型（标签名）的所有HTML或XML元素。例如在文档中获得包含所有<span>元素的只读的类数组对象。
var spans = document.getElementsByTagName("span");
<span></span>
（4）通过CSS选择器选取元素
#warning /*通过id*/ .warning /*通过class*/ input /*所有input元素*/ <input type=‘text" class="warning" id="warning" value="">
（5）document.all[]
在DOM标准化之前，IE 4引入了document.all[]集合来表示所有文档中的元素（除了Text节点）。document.all[]方法已经被标准的方法（如getElementById()和getElementsByTagName()）等所取代，现在已经废弃不应该再使用。
文档的节点树
Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。Node定义了以下重要的属性：
（1）parentNode
该节点的父节点，或者针对类似Document对象应该是null，因为它没有父节点。【获取当前元素的父节点】
（2）childNodes
只读的类数组对象（NodeList对象），它是该节点的子节点的实时表示【返回指定节点的所有子节点】
（3）firstChild、lastChild
该节点的子节点中第一个和最后一个，如果该节点没有子节点则为null【获取当前节点的第一个（childNodes[0]）或最后一个节点 (childNodes[length-1])】
（4）nextSibling
该节点的下一个节点：得到下一个元素【这个元素的类型可以包含空文本节点】
（5）previoursSibling
获取当前节点的上一个节点【nextElementSibling只能得到元素结点】
节点
（1）nodeType【节点类型】
- Element（元素即指标签） <span></span> 用1表示
- Attr（属性） <span color="red"></span 用2表示
- Text（文本） <span>this is a simple document</span> 用3表示
- Comments（注释） <!-- this is a comments--> 用8表示
- Document（文档） alert(window.document.nodeType); 用9表示
（2）nodeName【节点名称】
返回的结果都是大写， 文本的nodeName是#text，注释的nodeName是#comment
（3）nodeValue【节点值】
只对文本节点和注释有用,对于标签没有作用
创建、插入和删除节点
（1）创建Element元素节点
var element = document.createElement("span");
（2）插入节点
appendChild()和insertBefore()方法
var list = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(li); /*将创建的元素li添加到父元素list中*/
list.insertBefore(li, list.childNodes[3]); /*插入到list.chldNodes[3]前面*/ 在元素内部指定节点插入子节点
<ul id = "list"></ul>
【注】在给标签赋值时如果是双标签即如<span></span>则其赋值用innerHTML或者innerText，否则如单标签如<input type="text" />则赋值为value
（3）删除和替换节点
removeChild()方法是从文档树中删除一个节点。但是请放心：该方法不是在待删除的节点上调用，而是在其父节点上调用。在父节点上调用该方法，并将需要删除的子节点作为方法参数传递给它。在文档中删除n节点，代码你可以这样写：
n.parentNode.removeChild(n);
replaceChild()方法删除一个子节点并用一个新的节点取而代之。在父节点上调用该方法，第一个参数是新节点，第二个参数是需要代替的节点。例如
n.parentNode.replaceChild(document.createElement("span"),n);
使用DocumentFragment
DocumentFragment是一种特殊的Node，它作为其他节点的一个临时容器。像这样创建一个DocumentFragment:
var frag = document.createDocumentFragment();
DocumentFragment是独立的，而不是任何其他文档的一部分。它的parentNode总是为null，但类似Element，它可以有任意多的子节点，可以用appendChild()、insertBefore()等方法来操作它们。
它的特殊之处在于它使得一组节点被当做一个节点看待：如果给appendChild()、insertBefore()或replaceChild()传递一个DocumentFragement，其实是将该文档片段的所有子节点插入到文档中，而非片段本身。由于javascript在操作DOM时都会重新加载整个文档的DOM，为了减少DOM操作可以在操作DOM(为其添加或删除属性时)可以将DOM放入DocumentFragment中，最后一次性操作文档碎片,DocumentFragment可以相当于缓冲区，当需要更新大量的DOM节点时，页面会进行大量的渲染，这样将大大的降低了性能，为此可以用DocumentFragment将所有渲染的节点放入内存中，最后进行一次性渲染，这样既可减轻浏览器的负担也可提高页面渲染的速度。
以下函数使用DocumentFragment来倒序排列一个节点的子节点：
/*加载DOM树调用函数进行逆序输出*/
window.onload = function() {
reverse(document.getElementById("list"));
}
function reverse(n){
/*创建一个DocumentFragment作为临时容器*/
var f = document.createDocumentFragment();
/*从后至前循环子节点，将每一子节点移动到文档片段中。n的最后一个节点变成f的第一节点，反之亦安然。注意，给f添加一节点，该节点自动地会从n中删除*/
while(n.lastChild) f.appendChild(n.lastChild);
/*最后，把所有得子节点一次性全部移回n中*/
n.appendChild(f);
}
<ul id = "list">
<li><span><a href = "#">1</a></span></li>
<li><span><a href = "#">2</a></span></li>
<li><span><a href = "#">3</a></span></li>
<li><span><a href = "#">4</a></span></li>
<li><span><a href = "#">5</a></span></li>
<li><span><a href = "#">6</a></span></li>
</ul>