HTML DOM compareDocumentPosition() 方法比较文档位置-html教程-PHP中文网

语法

示例

输出

首页

web前端

html教程

HTML DOM compareDocumentPosition() 方法比较文档位置

Sep 14, 2023 pm 07:21 PM

HTML DOM CompareDocumentPosition() 方法用于将给定节点位置与任何文档中的任何其他节点进行比较。该方法的返回类型是整数类型，用于描述它们在文档中的位置。整数返回值如指定 -

1: No relationship, the two nodes do not belong to the same document.
2: The first node (para1) is positioned after the second node (para2).
4: The first node (para1) is positioned before the second node (para2).
8: The first node (para1) is positioned inside the second node (para2).
16: The second node (para2) is positioned inside the first node (para1).
32: No relationship, or the two nodes are two attributes on the same element.

登录后复制

语法

以下是 HTML DOM CompareDocumentPosition() 方法的语法 -

node.compareDocumentPosition(node)

登录后复制

这里的节点是节点对象类型，指定我们要与当前节点进行比较的节点。

示例

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

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

登录后复制

输出

这将产生以下输出 -

HTML DOM compareDocumentPosition() 方法

比较文档位置

单击“位置”按钮时 -

HTML DOM compareDocumentPosition() 方法

比较文档位置

在上面的示例中 -

我们首先创建了两个 id 为“para1”和“的元素

第2段”。

&lt;p id=&quot;para1&quot;&gt;This is a paragraph&lt;/p&gt;
&lt;p id=&quot;para2&quot;&gt;This is another paragraph&lt;/p&gt;

登录后复制

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

&lt;button onclick=&quot;docPosition()&quot;&gt;POSITION&lt;/button&gt;

登录后复制

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

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

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

登录后复制

以上是HTML DOM compareDocumentPosition() 方法比较文档位置的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn