JavaScript ドキュメントの場所の比較_JavaScript スキル

1. DOMElement.contains(DOMNode)

このメソッドは、DOM ノードが別の DOM 要素に含まれているかどうかを判断するために IE で初めて使用されました。

このメソッドは、CSS セレクターのトラバーサル (「#id1 #id2」など) を最適化する場合に役立ちます。 getElementById を介して要素を取得し、.contains() を使用して #id1 に実際に #id2 が含まれているかどうかを判断できます。

注: DOM ノードと DOM 要素が一貫している場合、要素にそれ自体を含めることはできませんが、 .contains() は true を返します。

これは、Internet Explorer、Firefox、Opera、Safari で実行できる単純な実行ラッパーです。


function 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 ノードは異なるドキュメント内にあります (または 1 つはドキュメントの外にあります)
000010 2 ノード B はノード A の前にあります
000100 4 ノード A はノード B に先行します
001000 8 ノード B にはノード A が含まれます
010000 16 ノード A にはノード B が含まれます
100000 32 ブラウザのプライベート使用

これは、可能性があることを意味します。結果は次のとおりです。同様:

ノード A に別のノード B が含まれ、B (16) が含まれ、B (4) より前にある場合、最終結果は数値 20 になります。ビットに何が起こるかを見てみると、理解が深まります。

000100 (4) 010000 (16) = 010100 (20)

これは、間違いなく、最も複雑な DOM API メソッドを理解するのに役立ちます。もちろん、彼の価値は十分に評価されるべきです。

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


// 位置の比較 - MIT ライセンス、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 (a.sourceIndex > b.sourceIndex && 2) :
1) : 🎜> 0; >}
IE には、使用できるメソッドとプロパティがいくつか用意されています。まず、.contains() メソッド (前述のように) を使用して、contains (16) または is contains (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)、Contained (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 はこのメソッドを実装するためにいくつかの取り組みを行っています。私は、前進を助けるためにさらに多くのブラウザが登場することを今でも楽しみにしています。