« anterior | siguiente »

Home > 2008 > Julio > Martes, 22 de Julio 2008 > DocumentFragments en Javascript
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Mar22Jul2008

DocumentFragments en Javascript

14:45 H (CET)| Temas: Javascript

Nunca se para de aprender, y de John Resig menos. DocumentFragments son contenedores ligeros que pueden almacenar objetos DOM de Javascript. Yo ni había oído hablar de ellos y la verdad es que su uso es sencillo y mucho más potente que trabajar con el DOM normalmente (de 2 a 3 veces más rápido).

El ejemplo que muestra John lo dice todo y muy fácil. Primero creamos unos elementos para luego insertarlos (de forma normal y con DocumentFragments):

var elems = [
  document.createElement("hr"),
  text( document.createElement("b"), "Links:" ),
  document.createTextNode(" "),
  text( document.createElement("a"), "Link A" ),
  document.createTextNode(" | "),
  text( document.createElement("a"), "Link B" ),
  document.createTextNode(" | "),
  text( document.createElement("a"), "Link C" )
];

function text(node, txt){
  node.appendChild( document.createTextNode(txt) );
  return node;
}

Y luego la inserción normal:

var div = document.getElementsByTagName("div");
for ( var i = 0; i < div.length; i++ ) {
  for ( var e = 0; e < elems.length; e++ ) {
    div[i].appendChild( elems[e].cloneNode(true) );
  }
}

Y por último el nuevo método:


var div = document.getElementsByTagName("div");
var fragment = document.createDocumentFragment();
for ( var e = 0; e < elems.length; e++ ) {
  fragment.appendChild( elems[e] );
}
for ( var i = 0; i < div.length; i++ ) {
  div[i].appendChild( fragment.cloneNode(true) );
}

Resumiendo, mucho más eficiente y sencillo de usar. Seguro que para la próxima versión de jQuery nos ofrece esta implementación.






Relacionados

Sin comentar » Formulario

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)