原生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還有不少複雜的操做，可是實現的原理是相似的。