nodeB.compareDocumentPosition( nodeA )メソッド

nodeB.compareDocumentPosition( nodeA )は、「nodeA」と「nodeB」の位置関係を調べ、位置関係を示す数値を返すメソッド。

構文

var $integer = $nodeB.compareDocumentPosition( $nodeA );

引数

$nodeA
「$nodeB」との位置関係を調べたいノードを指定。

戻り値

下記ような位置関係を示す整数値を返す。

数値 意味
2 「$nodeA」は、「$nodeB」より前にある。
4 「$nodeA」は、「$nodeB」より後にある。
8 「$nodeA」は、「$nodeB」を含んでいる。
10 「$nodeA」は、「$nodeB」を含んでおり、「$nodeB」より前にある。 8+2。
16 「$nodeA」は、「$nodeB」に含まれている。
20 「$nodeA」は、「$nodeB」に含まれており、「$nodeB」より後にある。 16+4。

サンプル

  1. 項目
  2. 項目A
  3. 項目
  4. 項目B
  5. 項目

サンプルの動作について

  • 「項目Aは項目Bより前にある」ボタンをクリックすると、ボタンの右横に「2」と表示する。
  • 「項目Bは項目Aより後にある」ボタンをクリックすると、ボタンの右横に「4」と表示する。
  • 「ol要素は項目Aを含んでおり、項目Aより前にある」ボタンをクリックすると、ボタンの右横に「10」と表示する。「10」は、「8+2」を意味している点に注意。
  • 「項目Aはol要素に含まれており、ol要素より後にある」ボタンをクリックすると、ボタンの右横に「20」と表示する。「20」は、「16+4」を意味している点に注意。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function sample( $para1, $para2, $para3 ) {
    var $node1 = document.getElementById( $para1 );
    var $node2 = document.getElementById( $para2 );
    var $sampleOutput = document.getElementById( $para3 );
    $sampleOutput.innerHTML = $node2.compareDocumentPosition( $node1 );
}
</script>

HTML

<ol id="sampleList">
    <li>項目</li>
    <li id="sampleItemA">項目A</li>
    <li>項目</li>
    <li id="sampleItemB">項目B</li>
    <li>項目</li>
</ol>
<p>
    <button onclick="sample( 'sampleItemA', 'sampleItemB', 'sampleOutput1' );">項目Aは項目Bより前にある</button>
    <span id="sampleOutput1" style="margin-left: 10px;"></span>
</p>
<p>
    <button onclick="sample( 'sampleItemB', 'sampleItemA', 'sampleOutput2' );">項目Bは項目Aより後にある</button>
    <span id="sampleOutput2" style="margin-left: 10px;"></span>
</p>
<p>
    <button onclick="sample( 'sampleList', 'sampleItemA', 'sampleOutput3' );">ol要素は項目Aを含んでおり、項目Aより前にある</button>
    <span id="sampleOutput3" style="margin-left: 10px;"></span>
</p>
<p>
    <button onclick="sample( 'sampleItemA', 'sampleList', 'sampleOutput4' );">項目Aはol要素に含まれており、ol要素より後にある</button>
    <span id="sampleOutput4" style="margin-left: 10px;"></span>
</p>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, ノード, メソッド, リファレンス, 逆引き パーマリンク