From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- .../api/document/createdocumentfragment/index.md | 75 +++++++++------------- 1 file changed, 31 insertions(+), 44 deletions(-) (limited to 'files/fr/web/api/document/createdocumentfragment') diff --git a/files/fr/web/api/document/createdocumentfragment/index.md b/files/fr/web/api/document/createdocumentfragment/index.md index 629d26ed27..d4bf794671 100644 --- a/files/fr/web/api/document/createdocumentfragment/index.md +++ b/files/fr/web/api/document/createdocumentfragment/index.md @@ -10,35 +10,37 @@ tags: - Reference translation_of: Web/API/Document/createDocumentFragment --- -
{{ApiRef("DOM")}}
+{{ApiRef("DOM")}} -

Crée un nouvel objet vide de type {{domxref("DocumentFragment")}}.

+Crée un nouvel objet vide de type {{domxref("DocumentFragment")}}. -

Syntaxe

+## Syntaxe -
var fragment = document.createDocumentFragment();
-
+ var fragment = document.createDocumentFragment(); -

fragment est une référence vers un objet vide de type {{domxref("DocumentFragment")}} .

+`fragment` est une référence vers un objet vide de type {{domxref("DocumentFragment")}} . -

Description

+## Description -

Les objets DocumentFragments sont analogues à des nœuds du DOM, mais ne font jamais 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.

+Les objets `DocumentFragments` sont analogues à des nœuds du DOM, mais ne font jamais 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.

+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](http://code.google.com/speed/articles/reflow.html) (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 performance](http://ejohn.org/blog/dom-documentfragments/)s. -

Exemple

+## Exemple -

Cet exemple crée une liste des principaux navigateurs du web.

+Cet exemple crée une liste des principaux navigateurs du web. -

HTML

+### HTML -
<ul id="ul">
-</ul>
+```html + +``` -

JavaScript

+### JavaScript -
var element  = document.getElementById('ul'); // en supposant qu'ul existe
+```js
+var element  = document.getElementById('ul'); // en supposant qu'ul existe
 var fragment = document.createDocumentFragment();
 var browsers = ['Firefox', 'Chrome', 'Opera',
     'Safari', 'Internet Explorer'];
@@ -49,39 +51,24 @@ browsers.forEach(function(browser) {
     fragment.appendChild(li);
 });
 
-element.appendChild(fragment);
+element.appendChild(fragment); +``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Example", 600, 140)}}

+{{EmbedLiveSample("Example", 600, 140)}} -

Spécification

+## Spécification - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}{{Spec2('DOM WHATWG')}}Définition initiale dans la spécification DOM 1.
+| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ | +| {{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale dans la spécification DOM 1. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.Document.createDocumentFragment")}}

+{{Compat("api.Document.createDocumentFragment")}} -

Voir aussi

- +## Voir aussi - +- {{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}} +- {{domxref("documentFragment")}} -- cgit v1.2.3-54-g00ecf