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 partie 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). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une amélioration des performances.

documentFragment est supporté par 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);
// une liste de navigateurs web bien connus

Compatibilité

Spécification

• DOM Level 2: createDocumentFragment
• DOM Level 3: createDocumentFragment

Voir aussi

• document.implementation.createDocument()
• documentFragment