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.

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
Retourne une HTMLCollection dynamique contenant tous les objets de type Element enfants de l’objet DocumentFragment.
ParentNode.firstElementChild Lecture seule
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
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
Retourne un unsigned long indiquant le nomble d’enfants que le DocumentFragment possède.

Constructeur

DocumentFragment()
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

Spécification Statut Commentaire
DOM
La définition de 'DocumentFragment' dans cette spécification.
Standard évolutif Ajouté le constructeur et l’implémentation de ParentNode.
Selectors API Level 1
La définition de 'DocumentFragment' dans cette spécification.
Obsolete Ajouté les méthodes querySelector() et querySelectorAll().
Document Object Model (DOM) Level 3 Core Specification
La définition de 'DocumentFragment' dans cette spécification.
Obsolete Pas de changement depuis Document Object Model (DOM) Level 2 Core Specification
Document Object Model (DOM) Level 2 Core Specification
La définition de 'DocumentFragment' dans cette spécification.
Obsolete Pas de changement depuis Document Object Model (DOM) Level 1 Specification
Document Object Model (DOM) Level 1 Specification
La définition de 'DocumentFragment' dans cette spécification.
Obsolete Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
DocumentFragment() constructor
Expérimentale
Chrome Support complet 28Edge Aucun support NonFirefox Support complet 24IE Aucun support NonOpera Support complet 15Safari Aucun support NonWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 24Opera Android Support complet OuiSafari iOS ? Samsung Internet Android Support complet Oui
querySelectorChrome Support complet 1Edge Support complet OuiFirefox Support complet 3.5IE Support complet 8Opera Support complet 10Safari Support complet 3.2WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 10Safari iOS Support complet 3.2Samsung Internet Android Support complet Oui
querySelectorAllChrome Support complet 1Edge Support complet OuiFirefox Support complet 3.5IE Support complet 8Opera Support complet 10Safari Support complet 3.2WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 10Safari iOS Support complet 3.2Samsung Internet Android Support complet Oui
ParentNode properties
Expérimentale
Chrome Support complet 28Edge Aucun support NonFirefox Support complet 25IE Aucun support NonOpera Support complet 15Safari Aucun support NonWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Support complet 25Opera Android Support complet 5Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
ParentNode methods
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : loella16, Watilin
Dernière mise à jour par : loella16,