DOM:document object model 文档对象模型

DOM就是整个HTML文档的关系图谱(代表整个HTML文档),可以理解为下图:

js学习总结:DOM节点一(选择器,节点类型)-LMLPHP

一、查看元素节点

  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>

      在来看看打印的结果

js学习总结:DOM节点一(选择器,节点类型)-LMLPHP

    从打印结果来看,元素节点的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;
}    
12-19 09:48