document.createDocumentFragment

En résumé

Crée un nouvel objet (vide) de type DocumentFragment.

Syntaxe

var docFragment = document.createDocumentFragment();

docFragment est une référence vers un objet (vide) de type DocumentFragment.

Description

Les objets DocumentFragments sont analogues à des nœuds du DOM, mais ne font pas partis de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants.

Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de reflow (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Partant, l'utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une amélioration des performances.

documentFragment est supporté dans tous les navigateurs, y compris Internet Explorer 6, il n'y a donc pas de raison de s'en passer.

Exemple

var ul = document.getElementsByTagName("ul")[0]; // on suppose que cet élément existe
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];

browserList.forEach(function(e) {
  var li = document.createElement("li");
  li.textContent = e;
  docfrag.appendChild(li);
});

ul.appendChild(docfrag);
// rendu comme une liste de navigateurs web

Compatibilité

Fonctionnalité Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support basique (Oui) (Oui) (Oui) (Oui) (Oui)
Fonctionnalité Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Support basique ? ? ? ? ?

Spécification

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : fscholz, jsx, AshfaqHossain, teoli, jdvauguet
Dernière mise à jour par : jsx,
Masquer la barre latérale