DocumentFragment

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'interface DocumentFragment représente un objet document minimal qui n'a pas de parent. Il est utilisé comme une version légère de Document pour stocker un segment de structure de document composé de nœuds, tout comme un document standard. La différence fondamentale est que, comme le fragment de document ne fait pas réellement partie de la structure du DOM, les changements faits au fragment n'affectent pas le document, ne causent pas de Reflow , et ne provoquent pas les éventuels impacts de performance qui peuvent avoir lieu quand des changements sont faits.

Un usage courant de DocumentFragment est de créer un fragment, assembler un sous-arbre DOM au sein de celui-ci, puis ajouter ou insérer le fragment dans le DOM en utilisant les méthodes de l'interface Node (telles que appendChild() ou insertBefore()). En faisant ainsi, on place les nœuds du fragment dans le DOM, en laissant derrière un DocumentFragment vide. Comme tous les nœuds sont insérés dans le document en une seule fois, un seul reflow et un seul rendu sont déclenchés, au lieu de potentiellement un pour chaque nœud inséré s'ils avaient été insérés séparément.

Cette interface est également beaucoup utilisée avec les Web components : les éléments <template> contiennent un DocumentFragment dans leur propriété HTMLTemplateElement.content.

Un DocumentFragment vide peut être créé en utilisant la méthode document.createDocumentFragment() ou le constructeur.

EventTarget Node DocumentFragment

Propriétés

Cette interface n'a pas de propriétés spécifiques, mais hérite de celles de son parent, Node, et implémente celles de l'interface ParentNode.

ParentNode.children Lecture seule Expérimental

Retourne une HTMLCollection dynamique contenant tous les objets de type Element enfants de l'objet DocumentFragment.

ParentNode.firstElementChild Lecture seule Expérimental

Retourne un Element qui est le premier enfant de l'objet DocumentFragment, ou null s'il n'y en a aucun.

ParentNode.lastElementChild Lecture seule Expérimental

Retourne un Element qui est le dernier enfant de l'objet DocumentFragment, ou null s'il n'y en a aucun.

ParentNode.childElementCount Lecture seule Expérimental

Retourne un unsigned long indiquant le nomble d'enfants que le DocumentFragment possède.

Constructeur

DocumentFragment() Expérimental

Retourne un objet DocumentFragment vide.

Méthodes

Cette interface hérite des méthodes de son parent, Node, et implémente celles de l'interface ParentNode.

DocumentFragment.querySelector()

Retourne le premier nœud Element du DocumentFragment, dans l'ordre du document, correspondant aux sélécteurs spécifiés.

DocumentFragment.querySelectorAll()

Retourne une NodeList de tous les nœuds Element du DocumentFragment qui correspondent aux sélecteurs spécifiés.

DocumentFragment.getElementById()

Retourne le premier nœud Element du DocumentFragment, dans l'ordre du document, qui correspond à l'ID spécifié.

Spécifications

Specification
DOM
# interface-documentfragment

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DocumentFragment
DocumentFragment() constructor
append
childElementCount
children
firstElementChild
getElementById
lastElementChild
moveBefore
Experimental
prepend
querySelector
querySelectorAll
replaceChildren

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

Voir aussi