ホームページ > 記事 > ウェブフロントエンド > 子ノード、親ノード、兄弟ノードを取得するための JS メソッドの概要

子ノード、親ノード、兄弟ノードを取得するための JS メソッドの概要

韦小宝オリジナル: 2018-01-22 09:59:071774ブラウズ

この記事では、JSで子ノード、親ノード、兄弟ノードを取得する方法の概要と、JSで兄弟ノードを取得する2つの方法を主に紹介します。JSに詳しい友人はこの記事を参考にしてください

実際の開発では、ページを取得する必要がある特定の html 要素で、要素のスタイル、コンテンツ属性などを動的に更新します。親ノードの最初の子ノード

parentObj.lastChild既知の親ノードの子ノード配列を取得します (ここでは IE 7 の直接の子ノードをすべて取得します)

parentObj.children 获取既知节点の直接子节量集団（IE7 中和子ノード效果一样）parentObj.getElementsByTagName

(tagName) 返還已知子节点中类型は指定值的子节量集団です

通过临节点兄弟ノードを取得します: neighbourNode.previousSibing 子ノードを介して親ノードを取得します:

1. childNode.parentNode 既知のノードの親ノードを取得します

上記のメソッドは基本的に再帰的に使用できます、parentObj.firstChild.firstChild.firstChild... しかし、このようなコード愚かなラッシュを持っています。。

Extension

拡張する前に、ノードに関する基本的な知識を知っておく必要があります: Dom ノードでは、ノードごとに異なるタイプがあります

W3C 仕様で一般的に使用される Dom ノードのタイプは次のとおりです

ノードタイプ	説明	値
要素ノード	すべてのHTMLタグこれらはすべて、要素ノード	1
属性ノード	要素ノード(HTMLタグ)の属性です(ID、クラス、名前など)	2
テキストノード	要素ノードまたは属性ノードテキストコンテンツ	3
コメントノード	は、の形式のドキュメントのコメントです	8
ドキュメントノード	は、ドキュメント全体 (Dom ツリーのルートノード、つまりドキュメント)	9

ノードの名前については、ノードの種類ごとに異なる名前が対応します

ノードタイプ	ノード名
要素ノードの名前	HTML(大文字)
属性ノード	属性の名前
テキストノード	その値は常に #text
ドキュメントノード	その値は常に #document

それぞれ、nodeType (ノードタイプ)、nodeName (ノード名)、nodeValue (ノード値) を介して、ノードタイプ、ノード名、ノード値を返すことができます (たとえば、要素ノードは 1、属性ノードは 1 を返します) return 2)

JS 兄弟ノードを取得する2つの方法

方法1: まず親要素の子要素を通して自分を含む「兄弟要素」を見つけ、それ自体を削除する

function sibling(elem){
 var a = [];
 var b = elem.parentNode.children;
 for (var i = 0 ; i < b.length ; i++){
  if(b[i] !== elem) a.push(b[i]);
 }
 return a;
}

方法2: 実装jQueryのメソッドは、最初に要素の最初の子要素を検索し、次に隣接する次の要素を探し続け、それ自体を判断して削除します。

siblings:function(elem)
{
  return JQuery.sibling(elem.parentNode.firstNode,elem);
}
JQuery.sibling = function(n,elem){
  var r = [];
  for (;n;n= n.nextSibling){
  if(n.nodeType == 1 && （！elem || elem != elem))
  r.push(n);
 } 
  return r;
}

このコードは jQuery 1.2 以降のバージョンにあります。私が調べた jQuery 1.2.3 のバージョンでは、このコードは 1800 行目にあります。

このメソッドを独立して使用できる関数に変換します。

fucntion sibling(elem){
 var r = [];
 var n = elem.parentNode.firstChild;
 for(;n;n = n.nextSibling) {
  if(n.nodeType === 1 && n !== elem) {
   r.push(n);
  }
 } 
  return r;
}

明らかに、このメソッドを使用して特定のノードの兄弟要素を検索すると、再帰の冗長性を簡単に回避できます。

すべての要素の子ノードを取得する

JavaScript では、子を介してすべての子ノードを取得できます (HTML のみを返し、子ノードは返されません)。これは、ほとんどすべてのブラウザーでサポートされていますが、Firefox の一部のバージョンでは、サポートされていません。

注: IE では、子にアノテーションノードが含まれます

特別な状況の存在により、要素ノードのみを取得する必要がある場合があります。そのため、上記の知識を使用して、nodeType 属性でフィルターできるようになります: nodeType == 1ノードは要素ノードです。

以下では、すべての要素の子ノードを取得する関数をから定義します:

var getChildNodes = function(elem) {
 var childArr = elem.children || elem.childNodes, 
   childArrTem = new Array();
  for (var i = 0 ; i < childArr.length; i ++ ) {
   if (childArr[i].nodeType == 1){
   childArrTem.push(childArr[i]); 
  }
 } 
 return childArrTem;
}

すべての親ノードを取得する

同様に、現在のノードのすべての親ノードを取得できます:

function getParents （elem）{
 var parents = [];
 while(elem.parentNode){
  parents.push(elem.parentNode)
  elem = elem.parentNode;
 } 
 return parents;
}

このようにDOM ノードを受け入れて、最終的にドキュメントオブジェクトを取得することができます。本体となる最上位レイヤーのみを取得する必要がある場合は、その間の判断を次のように変更できます。 while（elem.parentNode && elem.parentNode.tagName == 'BODY'

で提供されるメソッドと関連知識に基づいて。ノードを取得するための JavaScript は、たくさんのカプセル化メソッドを作成できます。試してみてください。

操作ノードのカプセル化を書いた後は、jQuery で Dom 操作node メソッドのソースコードを確認するのがはるかに簡単になります。

子ノード、親ノード、兄弟ノードを取得するための JS メソッドの概要

関連記事