HTML DOM compareDocumentPosition() 方法
JavaScript基础 2022-06-08 11:28:46小码哥的IT人生shichen
HTML DOM compareDocumentPosition() 方法
实例
判断一个段落相比较另一个段落的位置：
var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
p1.compareDocumentPosition(p2);
结果：
4
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="p1">This is a paragraph</p>
<p id="p2">This is another paragraph</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: The two nodes do not belong to the same document.<br>
2: p1 is positioned after p2.<br>
4: p1 is positioned before p2.<br>
8: p1 is positioned inside p2.<br>
16: p2 is positioned inside p1.<br>
32: The two nodes has no relationship, or they are two attributes on the same element.
</p>
<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持此方法。</p>
<p><b>注释：</b>返回值可以是值的组合。例如，返回 20 意味着在 p2 在 p1 内部（16），并且 p1 在 p2 之前（4）。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
compareDocumentPosition() 方法比较两个节点，并返回描述它们在文档中位置的整数。
请看上面的例子。返回值可能是：
1：没有关系，两个节点不属于同一个文档。
2：第一节点（P1）位于第二个节点后（P2）。
4：第一节点（P1）定位在第二节点（P2）前。
8：第一节点（P1）位于第二节点内（P2）。
16：第二节点（P2）位于第一节点内（P1）。
32：没有关系，或是两个节点是同一元素的两个属性。
注释：返回值可以是值的组合。例如，返回 20 意味着在 p2 在 p1 内部（16），并且 p1 在 p2 之前（4）。
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有主流浏览器均支持 compareDocumentPosition() 方法。
注释：Internet Explorer 8 以及更早的版本不支持此方法。
语法
node.compareDocumentPosition(node)
参数
| 参数 | 类型 | 描述 |
|---|---|---|
| node | Node 对象 | 必需。规定于当前节点作比较的节点。 |
返回值
| 类型 | 描述 |
|---|---|
| Number |
数值，表示两个节点彼此做比较的位置。 可能的返回值： 1：没有关系，两个节点不属于同一个文档。 2：第一节点（P1）位于第二个节点后（P2）。 4：第一节点（P1）定位在第二节点（P2）前。 8：第一节点（P1）位于第二节点内（P2）。 16：第二节点（P2）位于第一节点内（P1）。 32：没有关系，或是两个节点是同一元素的两个属性。 |
技术细节
| DOM 版本 | Core Level 1 Node Object |
