DocumentFragment
DocumentFragment
介面表示了一個沒有父節點的最小化文件物件。DocumentFragment
被當作一種輕量化的 Document
,用如同標準文件一般的方式保存片段的文件結構(由節點組成)。關鍵的區別在於文件片段不是真實的 DOM 結構,文件片段的變動並不會影響目前的網頁文件,也不會導致回流(reflow)或引起任何影響效能的情況發生。
一般的用法是建立一個 DocumentFragment
物件,在此物件中組織一個 DOM 的子樹。再使用 Node
介面定義的方法,如 appendChild()
或 insertBefore()
將這個文件片段加入或插入目前頁面的 DOM 當中。執行這個將文件片段中的節點置入 DOM 的動作之後,會留下一個空的 DocumentFragment
物件(只會插入物件中的節點,DocumentFragment
物件本身不會被插入)。由於文件片段中的所有節點是一次性的被插入目前頁面文件當中,故回流及頁面渲染只會被觸發一次,所以可用插入 DocumentFragment
物件的方式取代傳統分別插入多個節點至 DOM(將節點一個一個分次進行插入)的操作方式。
此介面也適合與 Web components 搭配使用:<template>
元素在其 HTMLTemplateElement.content
屬性中便包含了一個 DocumentFragment
物件。
可使用 document.createDocumentFragment()
方法或 DocumentFragment
的建構式來建立一個空的 DocumentFragment
物件。
屬性
This interface has no specific properties, but inherits those of its parent, Node
, and implements those of the ParentNode
interface.
ParentNode.children
Read only 實驗性質-
Returns a live
HTMLCollection
containing all objects of typeElement
that are children of theDocumentFragment
object. ParentNode.firstElementChild
Read only 實驗性質-
Returns the
Element
that is the first child of theDocumentFragment
object, ornull
if there is none. ParentNode.lastElementChild
Read only 實驗性質-
Returns the
Element
that is the last child of theDocumentFragment
object, ornull
if there is none. ParentNode.childElementCount
Read only 實驗性質-
Returns an
unsigned long
giving the amount of children that theDocumentFragment
has.
建構式
DocumentFragment()
實驗性質-
Returns an empty
DocumentFragment
object.
方法
This interface inherits the methods of its parent, Node
, and implements those of the ParentNode
interface.
DocumentFragment.find()
實驗性質-
Returns the first matching
Element
in the tree of theDocumentFragment
. DocumentFragment.findAll()
實驗性質-
Returns a
NodeList
of matchingElement
in the tree of theDocumentFragment
. DocumentFragment.querySelector()
-
Returns the first
Element
node within theDocumentFragment
, in document order, that matches the specified selectors. DocumentFragment.querySelectorAll()
-
Returns a
NodeList
of all theElement
nodes within theDocumentFragment
that match the specified selectors. DocumentFragment.getElementById()
-
Returns the first
Element
node within theDocumentFragment
, in document order, that matches the specified ID.
規範
Specification |
---|
DOM Standard # interface-documentfragment |
瀏覽器相容性
BCD tables only load in the browser