1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
---
title: Document.createDocumentFragment()
slug: Web/API/Document/createDocumentFragment
translation_of: Web/API/Document/createDocumentFragment
---
<div>{{ ApiRef("DOM") }}</div>
<div></div>
<p>Crea un nuevo <code><a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment">DocumentFragment</a></code> vacio, dentro del cual un nodo del DOM puede ser adicionado para construir un nuevo arbol DOM fuera de pantalla.</p>
<h2 id="Syntax" name="Syntax">Sintaxis</h2>
<pre class="syntaxbox notranslate">var fragment = document.createDocumentFragment();
</pre>
<p>Se crea un objeto<a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment"> DocumentFragment</a> vacio, el cual queda listo para que pueda insertarseles nodos en el.</p>
<h2 id="Notas_de_uso">Notas de uso</h2>
<p><a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment"><code>DocumentFragment</code></a> son Nodos del DOM que nunca forman parte del arbol DOM. El caso de uso mas comun es crear un <em>document fragment</em>, agregar elementos al <em>document fragment</em> y luego agregar dicho <em>document fragment</em> al arbol del DOM. En el arbol del DOM, el <em>document fragment</em> es remplazado por todos sus hijos.</p>
<p>Dado que el <em>document fragment </em>es generado en memoria y no como parte del arbol del DOM, agregar elementos al mismo no causan <a href="http://code.google.com/speed/articles/reflow.html">reflow</a> (computo de la posicion y geometria de los elementos) en la pagina. Como consecuencia, usar <em>document fragments</em> usualmente resultan en <a href="http://ejohn.org/blog/dom-documentfragments/">mejor performance</a>.</p>
<p>Tambien puede utilizarse el constructor {{domxref("documentFragment")}} para crear un nuevo fragmento:</p>
<pre class="syntaxbox notranslate">let fragment = new DocumentFragment();</pre>
<h2 id="Example" name="Example">Ejemplo</h2>
<p>Este ejemplo crea una lista de los principales navegadores web en un <em>DocumentFragment</em>, y luego adiciona el nuevo subarbol DOM al document para ser mostrado.</p>
<p>HTML</p>
<pre class="notranslate"><ul id="ul">
</ul></pre>
<p>JavaScript</p>
<pre class="notranslate">var element = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
'Safari', 'Internet Explorer'];
browsers.forEach(function(browser) {
var li = document.createElement('li');
li.textContent = browser;
fragment.appendChild(li);
});
element.appendChild(fragment);</pre>
<p>Resultado</p>
<p>{{EmbedLiveSample("Example", 600, 140)}}</p>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte Basico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte Basico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Specification" name="Specification">Especificaciónes</h2>
<ul>
<li>DOM Level 2: <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-35CB04B5">createDocumentFragment</a></li>
<li>DOM Level 3: <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-35CB04B5">createDocumentFragment</a></li>
</ul>
<h2 id="See_also" name="See_also">Vea También</h2>
<ul>
<li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
<li>{{domxref("documentFragment")}}</li>
</ul>
|
