原生JavaScript 獲取下一個/上一個同胞元素

看JavaScript遇到的問題，研究了下

獲取上一個或者下一個同胞元素，使用很多人會立馬想到JQuery  prev() 和 next() 的確非常方便。那么原生的JavaScript該怎么獲取 上一個 或者 下一個 同胞元素呢？

JavaScript 提供了原生的API nextSibling / prevSibling;

用法：

ele.nextSibling

問題： 在現代瀏覽器中，nextSibing會返回下一個節點，但通常下一個節點是文本節點（產生文本節點的原因是標簽之間的換行，空格等）而非元素節點。

例如：

獲取li2, 使用document.querySelector("li2").nextSibling 並不能選中<li>3</li>，而是選中了文本節點。因此JavaScript提供的新的api ：nextElementSibling / previousElementSibling但是這個api不支持ie8;要兼容IE8只能手動寫函數了。

 

        function getNextSibilingsNode(ele) {
            var parsent = ele.parentNode;//獲取元素父元素
            var childrens = parsent.childNodes;//獲取兄弟元素
            var i = 0;
            for(i; i < childrens.length; i++) {
                if(childrens[i].nodeType == 1 && childrens[i] == ele){//元素節點nodeType值為1，剔除文本節點
                    if(childrens[i+1].nodeType == 1){//防止li之間沒有換行，直接選擇下一個i+1
                        return childrens[i+1];
                    }if(childrens[i+2].nodeType == 1){//跳過文本節點，所以i+2
                        return childrens[i+2];
                    }
                    else{
                        throw error("傳入的元素出錯，請檢查，可能這是最后一個元素");
                    }
                }
            }
        }

 

這個方法測試了下，兼容ie5+了。足夠用了。

prev方法 獲取前一個同胞元素

        function getNextSibilingsNode(ele) {
            var parsent = ele.parentNode;//獲取元素父元素
            var childrens = parsent.childNodes;//獲取兄弟元素
            var i = 0;
            for(i; i < childrens.length; i++) {
                if(childrens[i].nodeType == 1 && childrens[i] == ele){//元素節點nodeType值為1，剔除文本節點
                    if(childrens[i-1].nodeType == 1){//防止li之間沒有換行，直接選擇下一個i+1
                        return childrens[i-1];
                    }if(childrens[i-2].nodeType == 1){//跳過文本節點，所以i+2
                        return childrens[i-2];
                    }
                    else{
                        throw error("傳入的元素出錯，請檢查，可能這是第一個元素");
                    }
                }
            }
        }