DOM中元素获取方式以及节点的应用

DOM中元素获取的方式

(DOM:document object model)

• id获取 :document.getElementById('div')
  • id获取只能document
• class获取:document.getElementsByClassName('p')
• tagName:可以限定范围的获取元素
• querySelect
  • querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
  • var oDiv=document.querySelector('div');
  • var oDiv=document.querySelector('#divId');
  • var oDiv=document.querySelector('.divClass');
• querySelecortAll;
  • querySelectorAll获取到的是一组元素

querySelector.png

节点

节点关系

• children 它返回指定元素的子元素集合。经测试，它只返回html节点
  • 一般情况兼容，在IE7/8下如果有注释，拿到的会包含注释
• childNodes 它返回指定元素的所有子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。

children与childNodes.png

• parentNode 返回某节点的父节点。
  如果指定的节点没有父节点则返回 null 。
• previousSibling 上一个哥哥节点
  previousSibling属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
  previousElementSibling属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点） 高级浏览器支持
• nextSibling 下一个弟弟节点

封装

• getChildren 获取当前容器下所有的子元素

       function getChildren(parent,tagName) {
        var aChild=parent.childNodes;
        var ary=[];
        for(var i=0 ;i<aChild.length;i++){
            if(aChild[i].nodeType==1){
                tagName?aChild[i].tagName.toLowerCase()==tagName.toLowerCase()&&ary.push(aChild[i]):ary.push(aChild[i]);
            }
        }
        return ary;
    }

获取上一个哥哥元素

    function pre(ele) {
        if(ele.previousElementSibling){
            return ele.previousElementSibling;
        }
        var prev=ele.previousSibling;
        while(prev && prev.nodeType==1){
            prev=prev.previousSibling;
        }
    }

获取所有的弟弟元素

    function prev(curEle){
        if(curEle.previousElementSibling){
            return curEle.previousElementSibling;
        }
        var pre=curEle.previousSibling;
        while(pre && pre.nodeType !== 1){
            pre=pre.previousSibling;
        }
        return pre;
    }
    function nextAll(ele) {
        var ary=[];
        var nex=next(ele);
        while(nex){
            ary.push(nex);
            nex=next(ele);
        }
        return ary;
    }