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不兼容，所以需要做一些兼容处理，下面是兼容处理的代码：
1 function getElementsByClass(className,context){ 2 context = context || document; 3 //把传递进来的样式类名的首尾空格先去掉，然后在按照中间的空格把里面的每一项拆分成数组 4 var classNameAry = className.replace(/(^ +| +$)/g,"").split(/ +/g); 5 6 //获取指定上下文中的所有的元素标签,循环这些标签，获取每一个标签的className样式类名的字符串 7 var ary = []; 8 var nodeList = context.getElementsByTagName("*"); 9 for(var i = 0,len=nodeList.length;i<len;i++){10 var curNode = nodeList[i];11 //判断curNode.className是否包含classNameAry里面的样式值12 13 //14 var isOk = true;//我们假设curNode15 for(var k = 0;k<classNameAry.length;k++){16 var curName = classNameAry[k];17 var reg = new RegExp("(^| +)"+curName+"( +|$)");18 if(!reg.test(curNode.className)){19 isOk = false;20 break;21 }22 }23 if(isOk){//拿每一个标签分别和所有样式类名比较后，如果结果还是true的话，说明当前元素标签包含了所有的样式，也是我们想要的。24 ary.push(curNode)25 }26 }
二、节点树
注意：以上方法都是基于节点查询，会将所有节点类的节点型访问出来，不会区分元素节点。（查询元素节点可以参考下一个知识点“遍历元素节点树”）
三、遍历元素节点树
四、节点类型及节点属性
注意：
a）documentFragment——文档片段对象
b) 属性节点从文档树形逻辑来说不能与其他节点一起放到这里，被放到这里的原因主要是因为展示nodeType属性。
到这里可能你还不明白属性节点是什么？
从document文本结构来说，属性节点是元素节点的子节点，该节点的内容就是所在元素的所有属性的节点集合。请看示例代码：
1 <div class="div1" id="div1" style="color:blue;text-align:center">2 3 </div>4 <script type="text/javascript">5var div = document.getElementsByTagName("div")[0];6var atts = div.attributes;7console.log(atts);8 </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;}
