HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのcompareDocumentPosition()メソッドとは？使い方と戻り値をわかりやすく解説

HTML DOMのcompareDocumentPosition()メソッドは、あるノードと別のノードとのドキュメント内における位置関係を比較するために使用されます。戻り値は整数型で、2つのノードの相対的な位置をビットフラグ（ビットマスク）の組み合わせとして表します。主な戻り値は以下のとおりです。

戻り値対応する定数意味
1DOCUMENT_POSITION_DISCONNECTED関係なし。2つのノードは同じドキュメントに属していません。
2DOCUMENT_POSITION_PRECEDING引数に指定したノード（para1）が、呼び出し元のノード（para2）よりも前に位置しています。
4DOCUMENT_POSITION_FOLLOWING引数に指定したノード（para1）が、呼び出し元のノード（para2）よりも後に位置しています。
8DOCUMENT_POSITION_CONTAINS引数に指定したノード（para2）が、呼び出し元のノード（para1）の内部に含まれています。
16DOCUMENT_POSITION_CONTAINED_BY引数に指定したノード（para1）が、呼び出し元のノード（para2）の内部に含まれています。
32DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC実装依存の関係です。同じ要素の2つの属性を比較した場合などに返されます。

構文

HTML DOM compareDocumentPosition()メソッドの構文は以下のとおりです。

node.compareDocumentPosition(node)

ここでの「node」はノードオブジェクトであり、現在のノードと比較したい対象のノードを指定します。

サンプルコード

compareDocumentPosition()メソッドの使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<p id="para1">This is a paragraph</p>
<p id="para2">This is another paragraph</p>
<p>Click the button to compare the position of the two paragraphs.</p>
<button onclick="docPosition()">POSITION</button>
<p id="Sample"></p>
<script>
    function docPosition() {
        var p1 = document.getElementById("para1").lastChild;
        var p2 = document.getElementById("para2").lastChild;
        var x = p2.compareDocumentPosition(p1);
        document.getElementById("Sample").innerHTML = x;
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のように表示されます。

HTML DOMのcompareDocumentPosition()メソッドとは？使い方と戻り値をわかりやすく解説

POSITIONボタンをクリックすると −

HTML DOMのcompareDocumentPosition()メソッドとは？使い方と戻り値をわかりやすく解説

コードの解説

上記の例では、まずid「para1」と「para2」を持つ2つの<p>要素を作成しています。

<p id="para1">This is a paragraph</p>
<p id="para2">This is another paragraph</p>

次に、ユーザーがクリックするとdocPosition()関数を実行するPOSITIONボタンを作成しています。

<button onclick="docPosition()">POSITION</button>

docPosition()関数では、documentオブジェクトのgetElementById()メソッドを使って両方の<p>要素を取得し、それぞれのlastChildプロパティの値を変数p1とp2に代入しています。

その後、p1を引数としてp2に対してcompareDocumentPosition()メソッドを呼び出します。これは「p2から見たp1の位置関係」を比較することを意味します。ドキュメント内でpara1はpara2よりも前に配置されているため、戻り値は「2」（DOCUMENT_POSITION_PRECEDING）となります。

function docPosition() {
    var p1 = document.getElementById("para1").lastChild;
    var p2 = document.getElementById("para2").lastChild;
    var x = p2.compareDocumentPosition(p1);
    document.getElementById("Sample").innerHTML = x;
}

なお、複数の関係が同時に成り立つ場合は、各ビットフラグが組み合わされた値が返されます。例えば、あるノードが別のノードに含まれている場合、「含まれている（16）」と「前にある／後にある（2または4）」が同時に成立するため、これらを足し合わせた値が返ることがあります。このメソッドは主要なモダンブラウザすべてでサポートされており、DOMツリーの構造解析やノードの順序判定などに幅広く活用できます。

  1. HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

    HTML DOM の writeln() メソッドは、複数の式（HTML や JavaScript）をドキュメントに直接書き込むための機能を提供します。注意： このメソッドは、ドキュメント内に既存の HTML コードがある場合、それを上書きします。また、渡された引数はそれぞれ新しい行に追加される点が特徴です。構文writeln() メソッドの基本的な構文は以下の通りです。document.writeln(argument1, argument2, ...)カンマで区切ることで、複数の引数（文字列や HTML 要素など）を一度に渡すことができます。各引数は改行されて出力されます。writeln(

  2. HTML DOM write()メソッドとは?構文と使い方を実例で解説

    HTML DOM の write() メソッドは、HTML や JavaScript などの複数の式をドキュメントに直接書き出すための機能です。ページの読み込み時に動的にコンテンツを生成したり、別ウィンドウへメッセージを出力したりする場面で活用されます。注意: このメソッドには重要な特徴が2つあります。ひとつは、ドキュメント内にすでに HTML コードが存在する場合、それを上書きしてしまうという点。もうひとつは、引数を渡しても自動的には改行されず、そのまま連結されるという点です。用途によっては意図しない表示になることがあるため、挙動を理解した上で使うことが大切です。構文write() メソッド