文档:moveBefore() 方法
Document 接口的 moveBefore() 方法将给定的 Node 作为直接子节点,移动到 Document DOM 节点内部,位于给定的参考节点之前。
语法
moveBefore(movedNode, referenceNode)
参数
movedNode-
一个
Node,表示要移动的节点。请注意,这必须是一个Element或CharacterData节点。 referenceNode-
一个
Node,movedNode将被移动到其之前,或为null。如果值为null,则movedNode将被插入到Document的子节点末尾。
返回值
无(undefined)。
异常
HierarchyRequestErrorTypeError-
在以下任何情况下抛出:
- 指定的
movedNode不属于此文档。 - 指定的
movedNode不是Element或CharacterData节点。 - 你正尝试将
movedNode移动到文档的 doctype(由DocumentType对象表示)之前。
- 指定的
NotFoundErrorTypeError-
指定的
referenceNode不是你调用moveBefore()的节点的子节点,也就是说,不是你尝试将movedNode移动到的节点内部的子节点。 TypeErrorTypeError-
未提供第二个参数。
描述
moveBefore() 方法将给定节点移动到 DOM 中的新位置。它提供了与 Node.insertBefore() 方法类似的功能,不同之处在于它不会先删除再重新插入节点。这意味着节点的状态(如果使用 insertBefore() 和类似机制移动,则会被重置)在移动后得以保留。这包括
和 元素的播放状态不包含在上述列表中,因为这些元素在被移除和重新插入时会保留其状态,无论使用何种机制。
当使用 MutationObserver 观察 DOM 变化时,使用 moveBefore() 移动的节点将被记录为 已移除节点 和 已添加节点。
当在 Document 节点上调用 moveBefore() 方法时,其作用不是特别大。它有一些非元素用途,例如,你可以使用 moveBefore() 移动 Document 根目录下的注释节点。然而,你更有可能发现将其应用于单个 DocumentFragment 或 Element 的用途——请参阅 DocumentFragment.moveBefore() 和 Element.moveBefore()。
moveBefore() 约束
使用 moveBefore() 时需要注意一些约束:
- 它只能在同一个文档中移动节点时起作用。
- 如果你尝试将一个未连接到 DOM 的节点移动到一个已经连接的父节点,反之亦然,它将不起作用。
在这种情况下,moveBefore() 将抛出 HierarchyRequestError 异常。如果上述约束是你的特定用例的要求,你应该改用 Node.insertBefore(),或者使用 try...catch 来处理因此类情况引起的错误。
示例
使用 moveBefore() 移动注释节点
在此演示中,我们展示了如何使用 document.moveBefore() 在 DOM 中移动注释节点。
HTML
HTML 是一个最小的模板,其中包含 <body> 内部的一个注释。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>document.moveBefore() example</title>
</head>
<body>
<!-- This comment should be at the end of the document -->
<p>Some content</p>
</body>
</html>
JavaScript
在我们的脚本中,我们遍历 <body> 元素的所有 childNodes。当我们找到一个 nodeType 值为 8(表示注释节点)的节点时,我们将其引用存储在一个名为 commentNode 的变量中。然后我们调用 document.moveBefore(),指定我们要移动注释节点,并指定第二个参数为 null,将我们的注释插入到 Document 的子节点末尾。
let commentNode;
for (node of document.querySelector("body").childNodes) {
if (node.nodeType === 8) {
commentNode = node;
}
}
document.moveBefore(commentNode, null);
结果
渲染后的示例如下所示:
如果你使用浏览器的开发者工具检查该示例,你会注意到注释已移动到文档末尾,在结束的 </html> 标签之后。
规范
| 规范 |
|---|
| DOM # dom-parentnode-movebefore |
浏览器兼容性
加载中…