深入Node.compareDocumentPosition API

1つ、迅速な理解

Node.compareDocumentPosition（）メソッドを使用して、ドキュメント内の2つのHTMLノード（表と裏、親子、自己、クロスドキュメントなど）の位置関係を比較できます。DOMノード、テキストノード、コメントノード、さらには属性ノードの位置関係も決定でき、非常に強力です。

IE9 +ブラウザのサポート、IE8をsourceIndex使用して決定できます。

2.深い理解

compareDocumentPosition構文は次のとおりです。

compareValue = node.compareDocumentPosition（otherNode）

注：覚えやすい場所がありますが、返される位置の関係はnode相対的ですか、otherNodeそれともotherNode相対的nodeですか？実際に返される結果はotherNode相対node位置です！

それは中国文化と外国文化の違いかもしれません。中国の文化は内向的で、愛着に固執し、自分自身に注意を払い、何をすべきかを言います。外国の文化の外出、軍事侵略、身振りはすべてあなたがすべきことです。

これらのAPI文法は外国人によって発明されたものであるため、概念的には外国人の知識に基づいています。ノードノードはotherNodeにドキュメントの位置を判断するように要求しました。最終的な結果は、私が勝ったか負けたかではなく、あなたが負けたか勝ったかです。つまり、このように、あなたはotherNode前otherNodeにいて、後ろにいます。

戻り値
compareValueは整数値である戻り値です。可能な値は次のとおりです。

バイナリ	戻り値	言い換えると	対応する定数
000000	0	ノードは一貫しています	–
000001	1	ノードが別のドキュメント内にある（または1つがドキュメント外にある）	Node.DOCUMENT_POSITION_DISCONNECTED
000010	2	ノードノードの前のノードotherNode	Node.DOCUMENT_POSITION_PRECEDING
000100	4	ノードotherNodeはノードノードの後にあります	Node.DOCUMENT_POSITION_FOLLOWING
001000	8	ノードotherNodeにはノードノードが含まれます	Node.DOCUMENT_POSITION_CONTAINS
010000	16	ノードotherNodeはノードノードに含まれています	Node.DOCUMENT_POSITION_CONTAINED_BY
100000	32	特定のノードの場所は、DOMの実装によって異なります	Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC
–	組み合わせ値（34、32 + 2など）	複合ノードの関係	–

複合ノード関係の複合戻り値については、このAPIに慣れるために、単純な位置関係から始めます。

//戻り値は0です
document.body.compareDocumentPosition（document.body）; 
//戻り値は4です<body>は<head>の後ろにあり
ますdocument.head.compareDocumentPosition（document.body）

次に、次のように、複合ノードの関係で返される結合値を確認します。

//戻り値は10、8 + 2 
document.body.compareDocumentPosition（document.documentElement）; 
//戻り値は20、16 + 4 
document.documentElement.compareDocumentPosition（document.body）

戻り値はそれぞれ10とです20。その中で：

108+2合成値はい8、それがあることを意味documentElement含まれるbodyと2それがそのdocumentElement中にbodyフロント。
20yes16+4の合計値16は、それbodyがdocumentElement含まれていることを4意味し、bodyそれがdocumentElement続くことを意味します。

したがって、実際に開発する場合==、定数値に直接等しい位置関係を判断することはできませんが、ビット演算子などの他の演算子を使用する必要があります&。JSでは、&2つの2進数と、オペレータが各々に対するビット単位の比較で表し、同様に1、それはあまりにも1、限りの一つとして、0それは0、最終的な値は、バイナリ値の計算です。

たとえば、以下に示すように、数値2と8比較：

AND2と8の結果

2＆8; //結果は00000、つまり0です

数字2と数字を10比較してみませんか？以下に示すように：

2と10を比較します

2＆10; //結果は000010、つまり2です

compareDocumentPosition戻り値は標準であるため、1ビットのみが2進値1であり、前後または内節と外節の位置関係をビットで直接判断する必要があり、結果は0ではありません。

例えば：

if（document.body.compareDocumentPosition（document.documentElement）＆Node.DOCUMENT_POSITION_PRECEDING）{ 
   // document.documentElement在文書.body 
   /// ... 
}

よの&代わりにキャラクター==。

3、さらに進んでください

compareDocumentPositionまた、次のHTMLなどのHTML属性ノードの前後の位置の関係を比較するためにも使用できます。

<img id = "compareImg" src = "./ mm.jpg" alt = "意意画像">

var altNode = compareImg.getAttributeNode（ 'alt'）; 
var srcNode = compareImg.getAttributeNode（ 'src'）; 
//結果是34 = 32 + 2 
console.log（altNode.compareDocumentPosition（srcNode））;

HTMLコードの属性'src'と'alt'属性の位置が次のように置き換えられた場合：

<img id = "compareImg" alt = "意意像" src = "./ mm.jpg">

結果は次のとおりです。

//結果は36 = 32 + 4 
console.log（altNode.compareDocumentPosition（srcNode））;

戻り値1はどのように表示されますか？

ノードがメモリ内にあり、ドキュメントページに存在しない場合、またはノードがページ内の別のiframeにある場合、戻り値にはが含まれ1ます。

例えば：

//結果は35 = 32 + 2 + 1 
document.createElement（ 'div'）。compareDocumentPosition（document.body）

つまり、特定の実装（32）、document.body最初の（2）、2つのドキュメントは関連していません（1）。

別の例として、Blobを直接使用して非外部リンクiframeを動的に作成します。コードは次のとおりです。

var htmlIframe = '<img id = "img" src = "https：//.../mm.jpg"οnclick= "console.log（this.compareDocumentPosition（window.parent.document.body））">'; 
var iframe = document.createElement（ 'iframe'）; 
var blob = new Blob（[htmlIframe]、{'type'： 'text / html'}）; 
iframe.src = URL.createObjectURL（blob）; 
iframeBlob1.appendChild（iframe）;

リアルタイム効果は次のとおりです。女の子の写真をクリックして出力結果を確認しますか？

以下に示すように、結果は35（32 + 2 + 1）になります。

位置は35です

4つのアプリケーションシナリオ

ノードの前後の位置の関係を知る必要があるのはいつですか？アニメーション＋絶対測位でスライドページ遷移を実現するシーンでは、前ページに戻るスライド方向が逆になっているため、ページが右から左に出るのか、左から前後の位置の関係にあるのかを判断できます。ノード。右に出てください。

たとえば、このデモページで、下部のタブをクリックして、compareDocumentPositionメソッドによって判断されるさまざまな遷移方向を確認します。

以下のビデオ体験をクリックすることもできます。

5、結論

私はまだ若すぎます。最初は、このAPIは単純すぎると思いました。一部の位置は固定数を返すと思いました。返される位置が混在することは予想していませんでした。利点は、位置を正確に知ることができることです。ページ内の特定の要素ノードの。複雑な位置関係の欠点は、学習と理解のコストが増加することです。

実際、非常に詳細な場所の関係を知る必要があるシーンはほとんどありません。

実際の開発Node.DOCUMENT_POSITION_DISCONNECTEDで比較するために、このような定数を使用することをお勧めします。これは、理解しやすく、読みやすくなっています。重要な問題を覚えるのは簡単ではなく、方法もありません。ドキュメントを確認するか、このサイトで検索してくださいcompareDocumentPosition。

さて、それはすべてです、読んでくれてありがとう！