ドキュメントの場所の比較

<br />2 年前に PPK が投稿した素晴らしいブログ記事では、contains() メソッドと compareDocumentPosition() メソッドがそれぞれのブラウザーでどのように機能するかが説明されています。それ以来、私はこれらの方法について多くの研究を行い、多くの機会にそれらを使用してきました。これらは、多くのタスク（特に、構造を持つ DOM セレクターの抽象化）に非常に役立つことがわかります。
1. DOMElement.contains(DOMNode)
このメソッドは元々、DOM ノードが別の DOM 要素に含まれているかどうかを判断するために IE で使用されていました。
このメソッドは、CSS セレクターのトラバーサル (「#id1 #id2」など) を最適化するときに役立ちます。 getElementById を介して要素を取得し、.contains() を使用して #id1 に実際に #id2 が含まれているかどうかを判断できます。
注: DOM ノードと DOM 要素が一致している場合、.contains() は true を返しますが、要素にそれ自身を含めることはできません。
Internet Explorer、Firefox、Opera、Safari で実行できるシンプルな実行可能ラッパーがあります。
関数は(a, b)を含む{
a.contains を返します ? a != b && a.contains(b) : !!(a.compareDocumentPosition(arg) & 16);
}
2. NodeA.CompareDocumentPosition(NodeB)
このメソッドは DOM レベル 3 仕様の一部であり、2 つの DOM ノードの相対的な位置を決定できます。このメソッドは .contains() よりも強力です。このメソッドの 1 つの応用例としては、DOM ノードを特定かつ正確な順序で並べ替えることが挙げられます。
この方法を使用すると、要素の位置に関する一連の情報を決定できます。この情報はすべてビットコード (ビット、バイナリビットとも呼ばれます) として返されます。
それらについてはほとんど知られていない。ビットコードとは、複数のデータを 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 ブラウザのプライベート使用つまり、次のような結果になると考えられます。
<div id="a">
<div id="b"></div>
</div>
<スクリプト>
アラート( document.getElementById("a").compareDocumentPosition(document.getElementById("b")) == 20);
</スクリプト>
ノード A に別のノード B が含まれ、B (16) が含まれ、B (4) の前に来ると、最終結果は数値 20 になります。ビットに何が起こるかを見れば、理解が深まります。
000100 (4) 010000 (16) = 010100 (20)
これは間違いなく、最もわかりにくい DOM API メソッドを理解するのに役立ちます。もちろん、彼の価値は十分に認められています。
DOMNode.compareDocumentPosition が Firefox と Opera で利用できるようになりました。ただし、IE で実行するために使用できるトリックがいくつかあります。
// ポジションの比較 - MIT ライセンス、John Resig
関数 comparePosition(a, b){
a.compareDocumentPosition を返しますか?
a.CompareDocumentPosition(b) : ドキュメントの位置を比較します。
a. 含まれていますか?
( 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 by (8) のみを取得でき、その他の結果は壊れていることを示す (1) を返します)。
PPK は、getElementsByTagNames メソッドを作成して新しい機能を利用できるようにする優れた例を提供します。これを新しい方法に適応させてみましょう:

これを使用して、サイトのディレクトリを次の順序で構築できるようになりました。
タグ名ごとに要素を取得します("h1, h2, h3");
Firefox と Opera は、このアプローチを実装するために何らかの取り組みを行っています。今後も、より多くのブラウザが登場し、物事が前進していくことを期待しています。
文書の位置の比較
// オリジナルは PPK quirksmode.org より
関数 getElementsByTagNames(リスト、要素) {
elem = elem || ドキュメント;
var tagNames = list.split(','), 結果 = [];
( var i = 0; i < tagNames.length; i ) {
タグを要素ごとに取得します。
( var j = 0; j < tags.length; j ) の場合
結果をpush( tags[j] );
}
結果を返します。sort(function(a, b){
3 - (comparePosition(a, b) & 6) を返します。
});
}

<<: Dockerはローカルイメージとコンテナの保存場所を設定します

>>: CSS スクロールバースタイル変更コード