原生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还有不少复杂的操做，可是实现的原理是相似的。