文件: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 |
瀏覽器相容性
載入中…