files/zh-cn/web/api/node/comparedocumentposition/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

---
title: Node.compareDocumentPosition
slug: Web/API/Node/compareDocumentPosition
tags:
  - API
  - DOM
  - Method
  - Node
  - Position
  - Reference
  - 比较文档位置
translation_of: Web/API/Node/compareDocumentPosition
---
<div>{{ ApiRef("DOM") }}</div>

<p><code><strong>Node.compareDocumentPosition()</strong></code> 可以比较当前节点与任意文档中的另一个节点的位置关系。</p>

<p>返回值是一个具有以下值的位掩码：</p>

<table>
 <thead>
  <tr>
   <th scope="col">常量名</th>
   <th scope="col">十进制值</th>
   <th scope="col">含义</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td>
   <td>1</td>
   <td>不在同一文档中</td>
  </tr>
  <tr>
   <td><code>DOCUMENT_POSITION_PRECEDING</code></td>
   <td>2</td>
   <td>otherNode在node之前</td>
  </tr>
  <tr>
   <td><code>DOCUMENT_POSITION_FOLLOWING</code></td>
   <td>4</td>
   <td>otherNode在node之后</td>
  </tr>
  <tr>
   <td><code>DOCUMENT_POSITION_CONTAINS</code></td>
   <td>8</td>
   <td>otherNode包含node</td>
  </tr>
  <tr>
   <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td>
   <td>16</td>
   <td>otherNode被node包含</td>
  </tr>
  <tr>
   <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td>
   <td>32</td>
   <td>待定</td>
  </tr>
 </tbody>
</table>

<h2 id="语法">语法</h2>

<pre><em>compareMask</em> = node.compareDocumentPosition( otherNode )
</pre>

<h3 id="参数">参数</h3>

<dl>
 <dt><code>otherNode</code></dt>
 <dd>用于比较位置的 <code>Node</code> 。</dd>
</dl>

<h3 id="返回值">返回值</h3>

<p>一个表示 <code>Node</code> 和 <code>otherNode </code>在 {{domxref("Document")}} 中关系的整数值。在一些场景下，可能设置了不止一位比特值。比如 <code>otherNode</code> 在文档中是靠前的且包含了 <code>Node</code>, 那么<code>DOCUMENT_POSITION_CONTAINS</code> 和 <code>DOCUMENT_POSITION_PRECEDING</code> 位都会设置，所以结果会是 0x0A 即十进制下的 10。</p>

<h2 id="Example" name="Example">例子</h2>

<pre class="brush:js">var head = document.getElementsByTagName('head').item(0);
if (head.compareDocumentPosition(document.body) &amp; Node.DOCUMENT_POSITION_FOLLOWING) {
  console.log("well-formed document");
} else {
  console.log("&lt;head&gt; is not before &lt;body&gt;");
}
</pre>

<div class="note">
<p><strong>注:</strong> 因为<code>compareDocumentPosition</code>返回的是一个位掩码,所以必须再使用<a href="/zh-CN/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="/zh-CN/docs/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators">按位与运算符</a>才能得到有意义的值.</p>
</div>

<p>注意第一条语句使用了带有参数 0 的 {{domxref("NodeList.item()")}} 方法，它和 getElementsByTagName('head')[0] 是一样的。</p>

<h2 id="规范">规范</h2>

<table>
 <tbody>
  <tr>
   <td>规范</td>
   <td>状态</td>
   <td>注释</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}}</td>
   <td>{{Spec2('DOM3 Core')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>


<p>{{Compat("api.Node.compareDocumentPosition")}}</p>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li><code><a href="/zh-CN/docs/DOM/Node.contains" title="/zh-CN/docs/DOM/Node.contains">Node.contains</a></code></li>
 <li><a href="http://ejohn.org/blog/comparing-document-position/" title="http://ejohn.org/blog/comparing-document-position/">John Resig - Comparing Document Position</a></li>
</ul>