DocumentFragment

建構子

DocumentFragment()

建立並回傳一個新的 DocumentFragment 物件。

實例屬性

此介面沒有特定的屬性，但會繼承其父介面 Node 的屬性。

DocumentFragment.childElementCount Read only

回傳 DocumentFragment 中子 Element 的數量。

DocumentFragment.children Read only

回傳一個即時的 HTMLCollection，包含 DocumentFragment 物件中的所有 Element 類型子節點。

DocumentFragment.firstElementChild Read only

回傳作為 DocumentFragment 第一個子 Element，若無則回傳 null。

DocumentFragment.lastElementChild Read only

回傳作為 DocumentFragment 最後一個子 Element，若無則回傳 null。

實例方法

此介面繼承其父介面 Node 的方法。

DocumentFragment.append()

將一組 Node 或字串插入至文件片段的最後一個子節點之後。

DocumentFragment.prepend()

將一組 Node 或字串插入至文件片段的第一個子節點之前。

DocumentFragment.querySelector()

依文件順序回傳第一個符合指定選擇器的 Element 節點。

DocumentFragment.querySelectorAll()

回傳一個包含所有符合指定選擇器的 Element 節點的 NodeList。

DocumentFragment.moveBefore() 實驗性質

將指定的 Node 移動至呼叫者 DocumentFragment 的指定參考節點之前成為其直接子節點，而非先移除再插入。

DocumentFragment.replaceChildren()

以一組指定的新子節點取代 DocumentFragment 中原有的子節點。

DocumentFragment.getElementById()

依文件順序回傳第一個符合指定 ID 的 Element 節點。功能上等同於 Document.getElementById()。

使用說明

DocumentFragment 的常見用途是先建立一個片段，在其中組裝一棵 DOM 子樹，再透過 Node 介面的方法（如 appendChild()、append() 或 insertBefore()）將其附加或插入至 DOM。這樣的操作會將片段中的節點移動到 DOM 中，留下空的 DocumentFragment。

此介面在 Web 組件中特別有用：<template> 元素的 HTMLTemplateElement.content 屬性就包含了一個 DocumentFragment。

可以使用 document.createDocumentFragment() 方法或建構子來建立一個空的 DocumentFragment。

效能

DocumentFragment 的效能優勢經常被誇大。實際上，在某些引擎中，使用 DocumentFragment 甚至比直接用迴圈將元素加入文件還慢，參見此效能比較。然而，這些範例間的效能差異微乎其微，因此建議優先考量可讀性而非效能。

範例

HTML

<ul></ul>

JavaScript

const ul = document.querySelector("ul");
const fruits = ["蘋果", "柳丁", "香蕉", "甜瓜"];

const fragment = new DocumentFragment();

for (const fruit of fruits) {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.append(li);
}

ul.append(fragment);

結果

規範

瀏覽器相容性