Il metodo createDocumentFragment() di Javascript
In javascript il metodo createDocumentFragment() crea un frammento di documento vuoto, un tipo di nodo che posso usare come contenitore temporaneo di altri nodi.
createDocumentFragment()
Questo metodo mi permette di costruire una parte del documento, prima ancora di inserirlo nel DOM (Document Object Model).
In altre parole, crea un oggetto "DocumentFragment" che può contenere più nodi temporanei, come farebbe con qualsiasi altro nodo padre.
Una volta pronto, posso inserirlo nel DOM con un'unica operazione.
Quali sono i vantaggi? Essendo un'unica operazione, migliorano le prestazioni dello script e si riduce il numero di reflow e repaint del documento. In particolar modo se bisogna aggiungere o modificare più elementi contemporaneamente.
Ecco un esempio pratico.
<html>
<body>
<script>
var fragment = document.createDocumentFragment();
var p = document.createElement('p');
p.textContent = 'Questo è un nuovo paragrafo.';
fragment.appendChild(p);
document.body.appendChild(fragment);
</script>
</body>
</html>
In questo script creo un frammento di documento usando createDocumentFragment().
var fragment = document.createDocumentFragment();
Poi creo un nuovo elemento paragrafo <p> con il metodo createElement('p') e lo assegno all'etichetta "p".
var p = document.createElement('p');
Una volta creato il nodo, modifico il suo contenuto testuale tramite la proprietà textContent.
p.textContent = 'Questo è un nuovo paragrafo';
Aggiungo l'elemento p nel frammento tramite appendChild().
fragment.appendChild(p);
Infine, inserisco il frammento nel body del documento.
document.body.appendChild(fragment);
Solo il paragrafo viene aggiunto, non il frammento stesso.
Nella pagina viene visualizzata la stringa.
Questo è un nuovo paragrafo
In questo esempio ho aggiunto un solo elemento. Quindi, lo script è banale ma rende l'idea sul funzionamento.
In realtà, questo metodo è utile soprattutto quando si devono inserire più nodi nel DOM.
E così via.
