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