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 type Element that are children of the DocumentFragment object.
ParentNode.firstElementChild Read only
Returns the Element that is the first child of the DocumentFragment object, or null if there is none.
ParentNode.lastElementChild Read only
Returns the Element that is the last child of the DocumentFragment object, or null if there is none.
ParentNode.childElementCount Read only
Returns an unsigned long giving the amount of children that the DocumentFragment 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 the DocumentFragment.
DocumentFragment.findAll()
Returns a NodeList of matching Element in the tree of the DocumentFragment.
DocumentFragment.querySelector()
Returns the first Element node within the DocumentFragment, in document order, that matches the specified selectors.
DocumentFragment.querySelectorAll()
Returns a NodeList of all the Element nodes within the DocumentFragment that match the specified selectors.
DocumentFragment.getElementById()
Returns the first Element node within the DocumentFragment, in document order, that matches the specified ID.

規範

Specification Status Comment
DOM
The definition of 'DocumentFragment' in that specification.
Living Standard Added the constructor and the implementation of ParentNode.
Selectors API Level 2
The definition of 'DocumentFragment' in that specification.
Working Draft Added the find() and findAll() methods.
Selectors API Level 1
The definition of 'DocumentFragment' in that specification.
Recommendation Added the querySelector() and querySelectorAll() methods.
Document Object Model (DOM) Level 3 Core Specification
The definition of 'DocumentFragment' in that specification.
Recommendation No change from Document Object Model (DOM) Level 2 Core Specification
Document Object Model (DOM) Level 2 Core Specification
The definition of 'DocumentFragment' in that specification.
Recommendation No change from Document Object Model (DOM) Level 1 Specification
Document Object Model (DOM) Level 1 Specification
The definition of 'DocumentFragment' in that specification.
Recommendation Initial definition

瀏覽器相容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
querySelector() and querySelectorAll() 1.0 (Yes) 3.5 (1.9.1) 8.0 10.0 3.2 (525.3)
findAll() and find() No support No support No support No support No support No support
DocumentFragment() constructor 28.0 (Yes) 24.0 (24.0) No support 15.0 No support
ParentNode properties 28.0 No support 25.0 (25.0) No support 15.0 No support
ParentNode methods No support No support No support No support No support No support
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)
querySelector() and querySelectorAll() 2.1 (Yes) 1.0 (1.0) 8.0 10.0 3.2 (525.3)
findAll() and find() No support No support No support No support No support No support
DocumentFragment() constructor ? (Yes) 24.0 (24.0) No support ? ?
ParentNode properties (Yes) No support 25.0 (25.0) No support 5.0 No support
ParentNode methods No support No support No support No support No support No support

參見

文件標籤與貢獻者

 此頁面的貢獻者: jackblackevo
 最近更新: jackblackevo,