現在の要素が親要素のどの子要素であるかを効率的に取得する_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では一般的なトラバーサルを使用するという処理を区別する関数を書きました。

コードをコピー コードは次のとおりです。

function getChildrenIndex(ele){
//IE が最も単純かつ最速です
if(ele.sourceIndex){
return ele.sourceIndex - ele.parentNode.sourceIndex - 1;
}
//その他のブラウザ
var i= 0;
while(ele = ele.previousElementSibling){
i ;
}
return i;
}

上記の関数は要素を計算するだけです、値が 1 のノードタイプノード、テキストノード、注釈ノードなどはカウントされません。すべてのノードを計算する必要がある場合、この属性は Element 専用であるため、sourceIndex は使用できません。それに応じて、previousElementSibling もpreviousSibling に変更する必要があります。その後、次の関数として記述する必要があります:

コードをコピーします コードは次のとおりです。

function getNodeIndex(node){
var i=0; while( ele = ele.previousSibling ){
i; このメソッドのテストのパフォーマンスは非常に低く、このメソッドが非常に効率的である場合は、リソース インデックス番号をキャッシュする IE とは異なります。効率を向上させるために二分法を採用していますが、まだそれは不可能です。


最終概要:

テーブルの TD 要素と TR 要素の場合は、最初に cellIndex 属性と rowIndex 属性を使用します。

IE の場合は、sourceIndex 属性が優先されます。
その他の場合は、previousElementSibling またはpreviousSibling を使用して走査します。
compareDocumentPosition メソッドのパフォーマンスは非常に悪いです。