DOM：document object model 文档对象模型
DOM就是整个HTML文档的关系图谱（代表整个HTML文档），可以理解为下图：
一、查看元素节点
1.document.getElementById('元素id') 获取的类型：元素对象；
兼容性：a.IE6、7，会把表单元素input的name属性当做ID来使用；
b.IE8以下的浏览器，不区分id大小写
注意事项：
a.没有获取到元素返回null
b.后端抽取会改变id名称，实际开发不使用id选择器来操作元素节点
2.document.getElementsByTagName('元素标签名') 获取的类型：元素对象类数组
使用：可以通过限定查找范围来获取元素列表。context.getElementByTagName('元素标签名')
3.context.getElementsByName(‘name属性’) 获取的类型：元素对象类数组
兼容性：IE浏览器下只由表单元素和部分元素有效（表单、表单元素、img、iframe），且老版本浏览器不支持。
4.context.getElementsByCalssName('类名的值') 获取的类型：元素对象类数组
兼容性：IE6~8不支持
5.document.querySelector('css选择器') 获取的类型：元素对象类数组
兼容性：IE6、7没有这个方法
6.document.querySelectorAll('css选择器') 获取的类型：元素对象类数组
兼容性：同上。
注意：不是时时的元素节点，删除添加标签都不被检测
在众多原生DOM选择中，似乎每个都存在缺陷，综合考虑最合适被应用到实际开发中的选择器就是getElementByClassName()；但由于IE6~8不兼容，所以需要做一些兼容处理，下面是兼容处理的代码：
function getElementsByClass(className,context){
context = context || document;
//把传递进来的样式类名的首尾空格先去掉，然后在按照中间的空格把里面的每一项拆分成数组
var classNameAry = className.replace(/(^ +| +$)/g,"").split(/ +/g);
//获取指定上下文中的所有的元素标签,循环这些标签，获取每一个标签的className样式类名的字符串
var ary = [];
var nodeList = context.getElementsByTagName("*");
for(var i = 0,len=nodeList.length;i<len;i++){
var curNode = nodeList[i];
//判断curNode.className是否包含classNameAry里面的样式值
//
var isOk = true;//我们假设curNode
for(var k = 0;k<classNameAry.length;k++){
var curName = classNameAry[k];
var reg = new RegExp("(^| +)"+curName+"( +|$)");
if(!reg.test(curNode.className)){
isOk = false;
break;
}
}
if(isOk){//拿每一个标签分别和所有样式类名比较后，如果结果还是true的话，说明当前元素标签包含了所有的样式，也是我们想要的。
ary.push(curNode)
}
}
return ary;
}
二、节点树
| node.parentNode | 返回元素的父节点对象;例如HTML元素的父节点是document | 节点对象 |
| element.childNodes | 返回所有子节点对象列表 | 节点对象类数组 |
| node.fistChild | 返回第一个子节点对象 | 节点对象 |
| node.lastChild | 返回最后一个节点对象 | 节点对象 |
| node.nextStibling | 返回后一个兄弟节点对象 | 节点对象 |
| node.previousSibling | 返回前一个兄弟节点对象 | 节点对象 |
注意：以上方法都是基于节点查询，会将所有节点类的节点型访问出来，不会区分元素节点。（查询元素节点可以参考下一个知识点“遍历元素节点树”）
三、遍历元素节点树
| element.parentElement | 返回当前节点的父节点元素对象（IE9以下不兼容） | 元素节点对象 |
| element.children | 返回当前节点的元素子节点对象列表（IE9以下不兼容） | 元素节点对象类数组 |
| element.childElementCount | 返回当前节点的元素子节点的个数同等于node.children.length | number |
| element.firstElementChild | 返回当前节点的第一个元素子节点对象(IE9以下不兼容) | 元素节点对象 |
| element.lastElementChild | 返回当前节点的最后一个元素子节点对象（IE9以下不兼容） | 元素节点对象 |
| element.nextElmentSibling | 返回当前节点的前一个元素节点对象（IE9以下不兼容） | 元素节点对象 |
| element.previousElementSibling | 返回当前节点的后一个元素节点对象（IE9以下不兼容） | 元素节点对象 |
四、节点类型及节点属性
| 类型名称 | nodeName | nodeValue | nodeType | attributes |
| 元素节点 | 大写的标签名（字符串类型） | null | 1 | 元素节点的属性集合 |
| 属性节点 | .... | .... | 2 | ..... |
| 文本节点 | "#text" | 标签符号间的文本（带Tab） | 3 | undefined |
| 注释节点 | "#comment" | 注释文本 | 8 | undefined |
| document | "#document" | null | 9 | undefined |
| documentFragment | 11 |
注意：
a）documentFragment——文档片段对象
b) 属性节点从文档树形逻辑来说不能与其他节点一起放到这里，被放到这里的原因主要是因为展示nodeType属性。
到这里可能你还不明白属性节点是什么？
从document文本结构来说，属性节点是元素节点的子节点，该节点的内容就是所在元素的所有属性的节点集合。请看示例代码：
<div class="div1" id="div1" style="color:blue;text-align:center"> </div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
var atts = div.attributes;
console.log(atts);
</srcipt>
在来看看打印的结果
从打印结果来看，元素节点的attributes属性获取了元素所有的属性列表，并以类数组的方式保存。
属性节点上同样存在nodeName、nodeType、nodeValue等属性。
五、封装自己的元素子节点集合
由于element.children子元素节点列表属性的兼容性非常不好（IE9以下都不兼容），所以建议封装一个自己的获取元素子节点集合的方法，下面是封装代码。
function retElementChild(node){
var temp = {
length : 0,
push : Array.prototype.push,
splice : Array.prototype.splice
},
child = node.childNodes,
len = child.length;
for (var i = 0; i < len; i++) {
if (child[i].nodeType === 1) {
temp.push(child[i]);
}
}
return temp;
}