js学习总结：DOM节点一（选择器，节点类型）

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;//我们假设curNode
15             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">
5     var div = document.getElementsByTagName("div")[0];
6     var atts = div.attributes;
7     console.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;
}