JavaScript の ParentNode プロパティ

この記事では、JavaScript プログラミング言語の ParentNode プロパティについて説明し、その使用目的とともに示します。

JavaScript での ParentNode の概要

ParentNode の children プロパティは、それが呼び出されたノードのすべての子コンポーネントを含むライブ HTMLCollection を提供する読み取り専用プロパティです。

このコレクションはプロパティが呼び出されたときに返され、本体は各 HTML 要素のいくつかの子ノードです。

さらに、要素のプロパティには読み取り専用アクセスしかありません。つまり、個々の機能が parentNode プロパティのタイプで受け入れられるかどうかに関係なく、ノードを編集することはできません。

nth の子から親ノードを取得するには、アクセスする必要がある親の子ノードを知る必要があります。 また、必要な親ノードとアクセスできる子ノードの間に存在する要素の数を知る必要があります。

画面上で現在アクティブになっているすべてのコンポーネントを含む JavaScript のイベントにアクセスできます。これは、子から親に移動して最初の親を見つけるのとは逆の順序です。

必要な親ノードを見つけるために、まずイベントを引数として受け取り、イベントをループする関数を作成します。

for (var i = event.length; i >= 0; i--) {
}

イベント配列のすべての要素をループするようにイベントとループを設定したので、変数を作成し、storedValue という名前を付けます。

次に、子の配列を変数に格納して、イベント配列に存在する要素を追跡できるようにします。

var storedValue = event.children[i];

ループを通過すると、必要な parent 要素が storedValue 変数に保存されます。 保存された値を parent 変数に入れます。

parent = storedValue;

関数の完全なコードを以下に示します。

function getNthParent(event) {
  for (var i = event.length; i >= 0; i--) {
    var storedValue = event.children[i];
    console.log(storedValue);
  }
  parent = storedValue;
}

. を使用して parentNode のチェーンを作成する必要がない parentNode を見つけるための別の方法として、while ループを利用することができます。 オペレーター。

関数を作成し、nthParent という名前を付けます。 子ノードと親ノードの間に存在する要素の数として、要素と数値 n をフィードします。

while (n-- && element) {
  element = element.parentNode;
}

このコードは、親ノードに到達するまでノードのツリーを上に移動します。

ループの繰り返しが完了すると、必要な親ノードは、ループの各サイクルを通じて割り当てられた要素変数でアクセスできるようになります。

親ノードを見つけて要素変数に割り当てた前のステップの完了に続いて、要素を返します。 while ループを含むコード行全体をここに示します。

function nthParent(element, n) {
  while (n-- && element) element = element.parentNode;
  return element;
}

上記の手法は、階層内の要素を通過する単純なループであり、子から始まり、上に向かって進みます。

recursive メソッドは、コードでループを使用せずに親ノードに到達するのに役立つ戦略の 1つです。

このメソッドでは、直接の親ノードを取得する関数を記述し、前のフェーズで取得した親ノードでその関数を呼び出します。 このプロセスは、要素の数がゼロになるまで繰り返されます。

関数宣言のコードと渡す必要があるパラメーターを次に示します。

function getNthParent(elem, n) {}

この場合、子と親の間の要素と項目数がパラメーターです。

この時点で必要なのは、使用するために必要な親ノードを戻す条件だけです。

return n === 0 ? elem : getNthParent(elem.parentNode, n - 1);

このコードは、n の値が 0 に等しいかどうかをチェックします。 指定された条件が満たされた場合、関数は要素を返します。

そうでない場合、関数は提供された要素の親ノードで自身を呼び出し、n の値を 1 ずつ減らして 0 になり、条件が満たされ、必要な親ノードを返します。

関数の完了に続いて、目的の関数を実行し、返された親ノードを以下に示す方法で変数に保存する必要があります。

var child = getNthparent(someElement, 4);

私たちが提供する子は、この特定のシナリオで4 番目の親要素へのアクセスを提供します。

この問題を解決するための再帰的手法のコード全体は、ここで見ることができます。

function getNthParent(elem, n) {
  return n === 0 ? elem : getNthParent(elem.parentNode, n - 1);
}