オリジナルJS-隣接する要素の検索-siblingsメソッドの実装

elementに対する操作では、tabを実装する際にdivの1つに「on」classが追加され、他の「on」classが除去されるなど、近くの要素を検索することは不可欠なプロセスである.jqueryの友达を使うとsiblingsを知らないことはありません.これはとても使いやすいので、本稿ではこの方法の実現について分析し、解剖します.
菜鳥として、elementのpreviousSiblingプロパティとnextSiblingプロパティを無視しがちです.previousSiblingプロパティは、ノードの前に続くノード(同じツリーレベル)を返し、nextSiblingプロパティは、ある要素の後に続く要素(同じツリーレベル)を返します.今考え方を知っているでしょう.前提はこの2つの属性を理解することです.考え方は簡単です.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には複雑な操作がたくさんありますが、実現の原理は似ています.