DocumentFragment: moveBefore() 方法
moveBefore() 方法是 DocumentFragment 介面的一個方法,它將一個給定的 Node 作為直接子節點,移動到呼叫該方法的 DocumentFragment 中,位於一個給定的參考節點之前。
語法
moveBefore(movedNode, referenceNode)
引數
movedNode-
一個
Node,表示要移動的節點。請注意,這必須是一個Element或CharacterData節點。 referenceNode-
movedNode將被移動到的節點,或者null。如果值為null,則movedNode將被插入到呼叫該方法的DocumentFragment的子節點列表的末尾。
返回值
無(undefined)。
異常
HierarchyRequestErrorTypeError-
在以下任何情況下丟擲:
- 指定的
movedNode已經被新增到 DOM 中,而您正試圖將其移動到一個DocumentFragment中。 - 您正試圖在兩個不同的 document fragments 之間移動
movedNode。 - 指定的
movedNode不是Element或CharacterData節點。
- 指定的
NotFoundErrorTypeError-
指定的
referenceNode不是您呼叫moveBefore()方法的DocumentFragment的子節點,也就是說,您試圖將movedNode移動到其中的 fragment。 TypeErrorTypeError-
未提供第二個引數。
描述
moveBefore() 方法將一個給定的節點移動到 DocumentFragment 中的新位置。它提供了與 Node.insertBefore() 方法類似的功能,但它不會刪除然後重新插入節點。這意味著在移動後,節點的(如果使用 insertBefore() 和類似機制移動,狀態會重置)狀態會被保留。這包括:
和 元素的播放狀態不包含在上述列表中,因為這些元素在被移除和重新插入時會保留其狀態,無論使用何種機制。
當使用 MutationObserver 觀察 DOM 變化時,使用 moveBefore() 移動的節點將被記錄為 已移除節點 和 已新增節點。
moveBefore() 約束
使用 moveBefore() 時需要注意一些約束:
- 它只能在同一個 document fragment 內移動節點時工作。
- 如果您嘗試移動一個已經被新增到 DOM 中的節點到一個
DocumentFragment中,它將無法工作。
在這種情況下,moveBefore() 將丟擲 HierarchyRequestError 異常。如果上述約束是你的特定用例的要求,你應該改用 Node.insertBefore(),或者使用 try...catch 來處理因此類情況引起的錯誤。
示例
moveBefore() 的基本用法
在此演示中,我們將展示 moveBefore() 的基本用法。
HTML
HTML 包含三個 <button> 元素和一個 <article> 元素。我們將使用這些按鈕來控制將 DocumentFragment 例項插入到 <article> 中以及清空它。
<button id="insert1">Insert fragment</button>
<button id="insert2">Insert modified fragment</button>
<button id="clear">Clear</button>
<article id="wrapper"></article>
CSS
我們為之後將作為 JavaScript 生成的 DocumentFragment 子節點插入頁面的元素提供了一些基本的樣式,以增強其外觀和間距。
#section1,
#section2,
#mover {
display: inline-block;
width: 200px;
height: 30px;
border: 5px solid rgb(0 0 0 / 0.25);
margin-top: 10px;
}
#section1,
#section2 {
background-color: hotpink;
}
#mover {
background-color: orange;
}
JavaScript
在我們的指令碼中,我們定義了一個名為 createFragment() 的函式,該函式建立一個 DocumentFragment,其中包含一個 <div> 元素和兩個 <section> 元素作為直接子節點。
然後,我們透過 addEventListener() 為每個 <button> 附加一個點選事件監聽器。
- 第一個按鈕將
DocumentFragment追加到#wrapper<article>元素中,不做任何修改。 - 第二個按鈕將
DocumentFragment追加到#wrapper<article>元素中,但首先使用moveBefore()將<div>移動到DocumentFragment的第二個子節點位置,而不是第一個。 - 第三個按鈕使用
innerHTML來清空#wrapper<article>元素。
const wrapper = document.getElementById("wrapper");
const insertBtn1 = document.getElementById("insert1");
const insertBtn2 = document.getElementById("insert2");
const clearBtn = document.getElementById("clear");
function createFragment() {
const fragment = new DocumentFragment();
const divElem = document.createElement("div");
const section1 = document.createElement("section");
const section2 = document.createElement("section");
divElem.id = "mover";
section1.id = "section1";
section2.id = "section2";
fragment.appendChild(divElem);
fragment.appendChild(section1);
fragment.appendChild(section2);
return fragment;
}
insertBtn1.addEventListener("click", () => {
const fragment = createFragment();
wrapper.appendChild(fragment);
});
insertBtn2.addEventListener("click", () => {
const fragment = createFragment();
fragment.moveBefore(
fragment.querySelector("#mover"),
fragment.querySelector("#section2"),
);
wrapper.appendChild(fragment);
});
clearBtn.addEventListener("click", () => {
wrapper.innerHTML = "";
});
結果
渲染後的示例如下所示:
嘗試點選前兩個按鈕幾次,注意第二個按鈕如何修改 DocumentFragment 的結構。
規範
| 規範 |
|---|
| DOM # dom-parentnode-movebefore |
瀏覽器相容性
載入中…