Categories: DOM对象tips

HTML DOM compareDocumentPosition() 方法 | DOM 对象:HTML DOM 元素对象

返回到:DOM 对象:HTML DOM 元素对象

定义和用法

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)

参数

参数类型描述
nodeNode 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 >
terry

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

4 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

1 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

2 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago