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

節(jié)點

節(jié)點關(guān)系

• children 它返回指定元素的子元素集合。經(jīng)測試，它只返回html節(jié)點
  • 一般情況兼容，在IE7/8下如果有注釋，拿到的會包含注釋
• childNodes 它返回指定元素的所有子元素集合，包括html節(jié)點，所有屬性，文本。可以通過nodeType來判斷是哪種類型的節(jié)點，只有當(dāng)nodeType==1時才是元素節(jié)點，2是屬性節(jié)點，3是文本節(jié)點。

children與childNodes.png

• parentNode 返回某節(jié)點的父節(jié)點。
  如果指定的節(jié)點沒有父節(jié)點則返回 null 。
• previousSibling 上一個哥哥節(jié)點
  previousSibling屬性返回元素節(jié)點之前的兄弟節(jié)點（包括文本節(jié)點、注釋節(jié)點）；
  previousElementSibling屬性只返回元素節(jié)點之前的兄弟元素節(jié)點（不包括文本節(jié)點、注釋節(jié)點） 高級瀏覽器支持
• nextSibling 下一個弟弟節(jié)點

封裝

• getChildren 獲取當(dāng)前容器下所有的子元素

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