contains メソッドと CompareDocumentPosition メソッドを使用して、HTML ノード間に関係があるかどうかを判断します

contains メソッドと CompareDocumentPosition メソッドを使用して、HTML ノード間に関係があるかどうかを判断します_JavaScript スキル

WBOY

リリース： 2016-05-16 18:02:14

オリジナル

1318 人が閲覧しました

それ以来、私はこれらの方法について多くの研究を行い、多くの機会に使用してきました。これらは多くのタスク (特に構造に関する抽象 DOM セレクター) で非常に役立つことが証明されています。
1. DOMElement.contains(DOMNode)
このメソッドは、DOM ノードが別の DOM 要素に含まれているかどうかを判断するために IE で初めて使用されました。
このメソッドは、CSS セレクターのトラバーサル (「#id1 #id2」など) を最適化する場合に役立ちます。 getElementById を介して要素を取得し、.contains() を使用して #id1 に実際に #id2 が含まれているかどうかを判断できます。
注: DOM ノードと DOM 要素が一貫している場合、要素にそれ自体を含めることはできませんが、 .contains() は true を返します。
これは、Internet Explorer、Firefox、Opera、Safari で実行できる単純な実行ラッパーです。
関数 contains(a, b) {
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(arg) & 16); >
2. NodeA.compareDocumentPosition(NodeB)
このメソッドは DOM レベル 3 仕様の一部であり、2 つの DOM ノード間の相互の位置を決定できます。このメソッドは .contains() よりも強力です。このメソッドの応用例の 1 つは、DOM ノードを特定の正確な順序に並べ替えることです。
このメソッドを使用すると、要素の位置に関する一連の情報を決定できます。これらすべての情報はビットコード (ビット、バイナリビットとも呼ばれます) を返します。
それらについてはほとんど知られていません。ビットコードは複数のデータを単純な数値 (訳者注: 0 または 1) として格納します。個々の数値の最終的なオン/オフ (翻訳者注: オン/オフは 0/1 に対応します) により、最終的な結果が得られます。
これは、NodeA.compareDocumentPosition(NodeB) から返された結果と、取得できる情報です。
ビット番号意味
000000 0 要素は一貫しています
000001 1 ノードは別のドキュメント内にあります (またはドキュメントの外にあります)
000010 2 ノード B はノード A の前にあります
000100 4 ノード A は
001000 より前にノード B にあります。 8 ノード B にはノード A が含まれます
010000 16 ノード A にはノード B が含まれます
100000 32 ブラウザのプライベート使用

これは、考えられる結果を意味します

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

<script> ").compareDocumentPosition(document.getElementById("b")) == 20); <br></script> 


ノード A に別のノード B が含まれると、B も含まれます (16) B (4 ) の前にある場合、最終結果は 20 になります。ビットに何が起こるかを見てみると、理解が深まります。 
000100 (4) 010000 (16) = 010100 (20) 
これは、間違いなく、最も複雑な DOM API メソッドを理解するのに役立ちます。もちろん、彼の価値は十分に評価されるべきです。 

DOMNode.compareDocumentPosition が Firefox と Opera で利用できるようになりました。ただし、IE で実行するために使用できるトリックがいくつかあります。

コードをコピー

コードは次のとおりです: // 位置の比較 - MIT Licensed、John Resig function ComparePosition(a, b){

return a.compareDocumentPosition ?

a.compareDocumentPosition(b) :
a.contains
( a != b && a.contains( b) && 16)
( a != b && b.contains(a) && 8 )
( a.sourceIndex >= 0 && b.sourceIndex >= 0 ?
(a.sourceIndex < b .sourceIndex && 4 )
(a.sourceIndex > b.sourceIndex && 2 ) :
1 ) :
0;
IE には、使用できるメソッドとプロパティがいくつか用意されています。まず、 .contains() メソッド (前述したように) を使用して、を含む (16) または含まれる (8) という結果を取得します。また、IE には、ドキュメント内の要素の位置に対応するすべての DOM 要素の .sourceIndex 属性があります (例: document.documentElement.sourceIndex == 0)。この情報があるため、前面 (2) と背面 (4) の 2 つのcompareDocumentPosition パズルを完了できます。さらに、要素が現在のドキュメントにない場合、.sourceIndex は -1 になり、別の答え (1) が得られます。最後に、このプロセスを外挿することにより、要素がそれ自体と等しい場合、空のビットコード (0) が返されることがわかります。
この機能は Internet Explorer、Firefox、Opera で動作します。ただし、Safari では機能が不完全です (contains() メソッドのみがあり、.sourceIndex 属性がないためです。取得できるのは contains (16)、is contains (8) のみであり、他のすべての結果は切断を表す (1) を返します) ）。
PPK は、getElementsByTagNames メソッドを作成して新しい機能を利用できるようにする優れた例を提供します。これを新しいメソッドに適応させてみましょう:

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

 
 / / PPK quirksmode.org によるオリジナル 
function getElementsByTagNames(list, elem) { 
elem = elem document; 
var tagNames = list.split(','), results = []; 🎜 >for ( var i = 0; i var tags = elem.getElementsByTagName( tagNames[i] ); 
for ( var j = 0; j results.push( tags[j] ); 
} 
return results.sort(function(a, b){ 
return 3 - (comparePosition(a, b) & 6 ); 
}); 
} 

 

これを使用して、次の順序でサイトのディレクトリを構築できます:
getElementsByTagNames("h1, h2, h3") ;
Firefox と Opera はこの方法を実装するためにいくつかの取り組みを行っていますが。前進を助けるためにさらに多くのブラウザが登場することを今でも楽しみにしています