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。 |
サンプル
- 項目
- 項目Ａ
- 項目
- 項目Ｂ
- 項目
サンプルの動作について
- 「項目Ａは項目Ｂより前にある」ボタンをクリックすると、ボタンの右横に「2」と表示する。
- 「項目Ｂは項目Ａより後にある」ボタンをクリックすると、ボタンの右横に「4」と表示する。
- 「ol要素は項目Ａを含んでおり、項目Ａより前にある」ボタンをクリックすると、ボタンの右横に「10」と表示する。「10」は、「8＋2」を意味している点に注意。
- 「項目Ａは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>
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">項目Ａ</li>
<li>項目</li>
<li id="sampleItemB">項目Ｂ</li>
<li>項目</li>
</ol>
<p>
<button onclick="sample( 'sampleItemA', 'sampleItemB', 'sampleOutput1' );">項目Ａは項目Ｂより前にある</button>
<span id="sampleOutput1" style="margin-left: 10px;"></span>
</p>
<p>
<button onclick="sample( 'sampleItemB', 'sampleItemA', 'sampleOutput2' );">項目Ｂは項目Ａより後にある</button>
<span id="sampleOutput2" style="margin-left: 10px;"></span>
</p>
<p>
<button onclick="sample( 'sampleList', 'sampleItemA', 'sampleOutput3' );">ol要素は項目Ａを含んでおり、項目Ａより前にある</button>
<span id="sampleOutput3" style="margin-left: 10px;"></span>
</p>
<p>
<button onclick="sample( 'sampleItemA', 'sampleList', 'sampleOutput4' );">項目Ａはol要素に含まれており、ol要素より後にある</button>
<span id="sampleOutput4" style="margin-left: 10px;"></span>
</p>
<li>項目</li>
<li id="sampleItemA">項目Ａ</li>
<li>項目</li>
<li id="sampleItemB">項目Ｂ</li>
<li>項目</li>
</ol>
<p>
<button onclick="sample( 'sampleItemA', 'sampleItemB', 'sampleOutput1' );">項目Ａは項目Ｂより前にある</button>
<span id="sampleOutput1" style="margin-left: 10px;"></span>
</p>
<p>
<button onclick="sample( 'sampleItemB', 'sampleItemA', 'sampleOutput2' );">項目Ｂは項目Ａより後にある</button>
<span id="sampleOutput2" style="margin-left: 10px;"></span>
</p>
<p>
<button onclick="sample( 'sampleList', 'sampleItemA', 'sampleOutput3' );">ol要素は項目Ａを含んでおり、項目Ａより前にある</button>
<span id="sampleOutput3" style="margin-left: 10px;"></span>
</p>
<p>
<button onclick="sample( 'sampleItemA', 'sampleList', 'sampleOutput4' );">項目Ａはol要素に含まれており、ol要素より後にある</button>
<span id="sampleOutput4" style="margin-left: 10px;"></span>
</p>