現在の要素が親要素のどの子要素であるかを効率的に取得する_javascriptスキル

たとえば、イベントを処理する場合、現在どの子ノードがクリックされているかを知る必要がある場合がありますが、HTML DOM 自体は対応する属性を直接提供しないため、自分で計算する必要があります。

インデックス番号から、parentNode.childNodes[index] またはparentNode.children[index] を直接使用するだけで、インデックスに対応する子ノードまたは子要素を簡単に取得できます。

しかし、逆に、ノードまたは要素オブジェクトを知ることは、そのインデックス番号を知ることはそれほど簡単ではありません。

一部の特殊な要素については、HTML DOM にはインデックス番号を示す対応する属性があります (主にテーブルの TD 要素と TR 要素)。

表のセルのTD要素にはcellIndex属性があります。

テーブルの行 TR 要素には rowIndex 属性があります。

処理対象がテーブルの場合は、最初にこれら 2 つの属性を使用します。

しかし、一般的なノードや要素には、childNodeIndex や childElementIndex などの属性がありません。

ソリューションは主に 2 つのカテゴリに分類されます:

1. ノードのインデックス番号を事前に計算してキャッシュします (ノード属性または JS 変数に保存できます)。 。

2. リアルタイム計算では、いくつかのノードを通過する必要があります。

アプリケーションでは、さまざまな実際の状況に応じて、上記 2 種類のソリューションのいずれかを選択できます。

オプション 1 が適用されるシナリオ:

DOM 構造が変更されず、個々のノードのインデックスを頻繁に取得する必要がある場合、オプション 1 を使用できます。

利点はその後の読み込みが速いことですが、欠点は初期化にオーバーヘッドが必要であり、DOM 構造が変更された後に再初期化する必要があることです。

オプション 2 が適用される状況:

DOM 構造が変更される可能性があり、個々のノードのインデックスが特に頻繁に取得されない場合は、オプション 2 を使用できます。

利点は、DOM 構造の変更の影響を受けず、DOM 構造を汚染せず、初期化のオーバーヘッドがないことです。欠点は、高頻度の通話には適していないことです。

一般に、オプション 2 を採用することをお勧めします。通常、DOM ツリーのサイズは比較的制限されており、ループの 1 サイクルによって全体のパフォーマンスが大幅に低下することはなく、その利点が大きいためです。

IE ブラウザの場合は、より直接的な方法があります。

IE4 から IE11 までは、sourceIndex 属性があり、DOM ツリー内の要素の順序を表し、要素と親要素の sourceIndex の差を比較することで、どの子要素であるかを簡単に知ることができます。要素はその要素です。

IEでは効率的に判断するためにsourceIndexを使用し、非IEでは一般的なトラバーサルを使用するという処理を区別する関数を書きました。