定义和用法
compareDocumentPosition() 方法按照文档顺序，比较当前节点与指定节点的文档位置。
查看以上实例，返回值可能是：
1：没有关系，这两个节点不属于同一个文档。
2： 第一节点（P1）位于第二个节点后（P2）。
4：第一节点（P1）定位在第二节点（P2）前。
8： 第一节点（P1）位于第二节点内（P2）。
16： 第二节点（P2）位于第一节点内（P1）。
32:没有关系的，或是两个节点在同一元素的两个属性。
注意： 回值可以是值的组合。例如，返回 20 意味着在 p2 在 p1 内部（16），并且 p1 在 p2 之前（4）。
浏览器支持：
所有主要浏览器都支持 compareDocumentPosition() 方法
注意： Internet Explorer 8 及更早IE版本不支持该方法。
语法
node.compareDocumentPosition(node)参数
| 参数 | 类型 | 描述 |
|---|---|---|
| node | Node object | 必须。你想比较的指定节点。 |
返回值
| 类型 | 描述 |
|---|---|
| Number | 比较当前节点与指定节点的文档位置可能的返回值：查看以上实例，返回值可能是：1：没有关系，这两个节点不属于同一个文档。2： 第一节点（P1）位于第二个节点后（P2）。4：第一节点（P1）定位在第二节点（P2）前。8： 第一节点（P1）位于第二节点内（P2）。16： 第二节点（P2）位于第一节点内（P1）。32:没有关系的，或是两个节点在同一元素的两个属性。 |
技术细节
| DOM 版本 | Core Level 1 Node Object |
|---|
实例
比较当前字段与指定字段的文档位置：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
</head>
<body>
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落；</p>
<p id="demo">单击按钮来比较两个段落的位置。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var p1=document.getElementById("p1").lastChild;
var p2=document.getElementById("p2").lastChild;
var x=document.getElementById("demo");
x.innerHTML=p1.compareDocumentPosition(p2);
}
</script>
<p>
1: 这两个节点不属于同一个文档<br>
2: P1位于P2之后。<br>
4: P1位于P2之前。<br>
8: P1在P2里面。<br>
16:P2在P1里面。<br>
32:这两个节点没有关系，或者它们是同一个元素上的两个属性。</p>
<p><strong>注意:</strong>Internet Explorer 8或者更早的版本不支持comparedocumentposition方法。</p>
<p><strong>注意:</strong> 返回值也可以是值的组合。即返回20意味着P2在P1里面并且P1（16）定位在P2（4）之前。</p>
</body>
</html>作者：terry，如若转载，请注明出处：https://www.web176.com/javascriptbook/domtips/4364.html
支付宝 
微信 