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不兼容，所以需要做一些兼容处理，下面是兼容处理的代码：

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;
}