[轉]原生JS-查找相鄰的元素-siblings方法的實現

　　在針對element的操作里，查找附近的元素是一個不可少的過程，比如在實現tab時，其中的一個div增加了“on”class，其他的去除“on”class。如果用jquery的朋友就肯定不會陌生siblings，這個非常的好用，本文針對這個方法的實現進行分析和解剖。

　　身為一個菜鳥，我們很容易忽視了element的previousSibling 和 nextSibling 屬性，previousSibling 屬性可返回某節點之前緊跟的節點（處於同一樹層級），nextSibling 屬性可返回某個元素之后緊跟的元素（處於同一樹層級中）。現在知道思路了吧，前提是要了解這兩個屬性，那么思路就很簡單了，就是利用previousSibling 和 nextSibling，找到元素前面的元素和后面的元素。但是這里還要注意一個問題，那就是元素的nodeType，畢竟我們不想找y一些文本節點和屬性節點，所以”nodeType ===1″ 作為判斷條件。

　　源碼如下：

var siblingElem = function(elem){
        var _nodes = []
            ,_elem = elem
        ;
        while ((elem = elem.previousSibling)){
            if(elem.nodeType === 1){
                _nodes.push(elem);
                break;
            }
        }

        elem = _elem;
        while ((elem = elem.nextSibling)){
            if(elem.nodeType === 1){
                _nodes.push(elem);
                break;
            }
        }

        return _nodes;
    }

 

　　使用可以這樣子：

var dy = document.getElementById('dy');
var sib = siblingElem(dy);

 

　　sib得到的就是 dy的附近的元素了。
　　是不是很簡單，jquery中的siblings還有很多復雜的操作，但是實現的原理是類似的。

　　來自 http://www.subying.com/archives/46.html ---subying's blog