HTML DOM compareDocumentPosition() 方法

HTML DOM compareDocumentPosition() 方法用于比较给定节点与任意文档中任意其他节点的位置。此方法的返回类型为整型，用于描述节点在文档中的位置。整型返回值如下: −

1:无关系，两个节点不属于同一文档。
2:第一个节点 (para1) 位于第二个节点 (para2) 之后。
4:第一个节点 (para1) 位于第二个节点 (para2) 之前。
8:第一个节点 (para1) 位于第二个节点 (para2) 内部。
16:第二个节点 (para2) 位于第一个节点 (para1) 内部。
32:无关系，或者两个节点是同一元素上的两个属性。

语法

以下是 HTML DOM compareDocumentPosition() 方法的语法 −

node.compareDocumentPosition(node)

此处，node 的类型为 node 对象，指定了我们要与当前节点进行比较的节点。

示例

让我们来看一个 compareDocumentPosition() 方法的示例 −

<!DOCTYPE html>
<html>
<body>
<p id="para1">This is a paragraph</p>
<p id="para2">This is another paragraph</p>
<p>Click the button to compare the position of the two paragraphs.</p>
<button onclick="docPosition()">POSITION</button>
<p id="Sample"></p>
<script>
   function docPosition() {
      var p1 = document.getElementById("para1").lastChild;
      var p2 = document.getElementById("para2").lastChild;
      var x = p2.compareDocumentPosition(p1);
      document.getElementById("Sample").innerHTML = x;
   }
</script>
</body>
</html>

输出

这将产生以下输出 −

点击 POSITION 按钮 −

在上面的例子中 −

我们首先创建了两个

元素，id 分别为 “para1” 和 “para2”。

<p id="para1">这是一个段落</p>
<p id="para2">这是另一个段落</p>

然后，我们创建了一个按钮 POSTION，当用户点击按钮时，它将执行 docPosition() 方法。

<button onclick="docPosition()">POSITION</button>

docPosition() 方法使用 document 对象的 getElementById() 方法获取 <p> 元素。然后将两个段落的 lastchild 属性值分别赋给变量 p1 和 p2。

然后，我们以 p1 作为参数，在 p2 上调用 compareDocumentPosition() 方法。这意味着我们要比较 p2 相对于 p1 的位置。由于这里 p2 位于 p1 之后，所以返回值为 2 −

function docPosition() {
   var p1 = document.getElementById("para1").lastChild;
   var p2 = document.getElementById("para2").lastChild;
   var x = p2.compareDocumentPosition(p1);
   document.getElementById("Sample").innerHTML = x;
}

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/