一、DOM介绍
DOM（Document Object Model）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。
节点种类：元素节点、文本节点、属性节点
二、查找元素
getElementById() 获取特定ID元素的节点
getElementsByTagName() 获取相同元素的节点列表
getElementsByName() 获取相同名称的节点列表
getAttribute() 获取特定元素节点属性的值
setAttribute() 设置特定元素节点属性的值
removeAttribute() 移除特定元素节点属性
三、DOM节点
节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType和nodeValue。
属性说明
childNodes 获取当前元素节点的所有子节点
firstChild 获取当前元素节点的第一个子节点
lastChild 获取当前元素节点的最后一个子节点
ownerDocument 获取该节点的文档根节点，相当与document
parentNode 获取当前节点的父节点
previousSibling 获取当前节点的前一个同级节点
nextSibling 获取当前节点的后一个同级节点
attributes 获取当前元素节点的所有属性节点集合
三、节点操作
DOM不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。
节点操作方法
方法说明
write() 这个方法可以把任意字符串插入到文档中
createElement() 创建一个元素节点
appendChild() 将新节点追加到子节点列表的末尾
createTextNode() 创建一个文件节点
insertBefore() 将新节点插入在前面
repalceChild() 将新节点替换旧节点
cloneNode() 复制节点
removeChild() 移除节点
四、DOM操作节点内容
虽然在之前我们已经学习了各种DOM操作的方法，这里所介绍是innerText、innerHTML、outerText和outerHTML等属性。除了之前用过的innerHTML之外，其他三个还么有涉及到。
1.innerText属性
document.getElementById('box').innerText; //获取文本内容(如有html直接过滤掉)
document.getElementById('box').innerText ='Mr.Lee'; //设置文本(如有html转义)
//兼容方案
function getInnerText(element) {
return(typeof element.textContent == 'string') ?
element.textContent :element.innerText;
}
function setInnerText(element, text) {
if(typeof element.textContent == 'string') {
element.textContent = text;
}else {
element.innerText = text;
}
}
2.innerHTML属性
这个属性之前就已经研究过，不拒绝HTML。
document.getElementById('box').innerHTML; //获取文本(不过滤HTML)
document.getElementById('box').innerHTML ='123'; //可解析HTML
虽然innerHTML可以插入HTML，但本身还是有一定的限制，也就是所谓的作用域元素，离开这个作用域就无效了。
box.innerHTML ="<script>alert('Lee');</script>"; //元素不能被执行
box.innerHTML ="<style>background:red;</style>"; //元素不能被执行
3.outerText
outerText在取值的时候和innerText一样，同时火狐不支持，而赋值方法相当危险，他不单替换了文本内容，还将元素直接抹去。
var box = document.getElementById('box');
box.outerText = '<b>123</b>';
alert(document.getElementById('box')); //null，建议不去使用
4.outerHTML
outerHTML属性在取值和innerHTML一致，但和outerText也一样，很危险，赋值的之后会将元素抹去。
var box = document.getElementById('box');
box.outerHTML = '123';
alert(document.getElementById('box')); //null，建议不去使用，火狐旧版未抹去
五、DOM元素的尺寸和位置
1.获取元素CSS的大小
通过style内联获取元素的大小
var box = document.getElementById('box'); //获取元素
box.style.width; //200px、空
box.style.height; //200px、空
2、获取元素实际大小
clientWidth和clientHeight
这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。
box.clientWidth;
box.clientHeight;
