duduromeroa.com

#Javascript, #documentFragment(), #webinteractiva, #Interfaces, #duduromeroa, #Guayaquil

Javascript | document interfaz

Programación para web con Javascript: uso del constuctor documentFragment() para manipular el DOM en HTML


JS, eventos, escuchas de eventos, DOM. www.duduromeroa.com

Por Eduardo Romero
| Guayaquil

Contacto duduromeroa@gmail.com

#Javascript #API

Aclaraciones
Contenido para quienes ya comprenden y practican HTML, CSS y JS. Adjunto bibliografía al final de esta página.



Método de la interfaz de document: createDocumentFragment()

Genera un contenedor vacío (en forma de objeto) al que se le pueden añadir más subeelementos, o nodos HTML, pero que no serán parte del DOM interno inicial de la página. En otras palabras, una vez creado el DocumentFragment este será parte de los datos recuperables del navegador (en memoria) pero no del DOM.

Por lo tanto, cargar los elementos contenidos en el documentFragment() no crea demoras al mostrarlos en el navegador. Ya que DocumentFragment libera al navegador de carga excesiva de procesos, es considerado como eficiente para mostrar contenido.

En el ejemplo siguiente, los elementos debajo del botón negro son nodos fragmentos que no son parte de la estructura DOM. El contenedor document.createDocumentFragment(); es quién agrupa esos elementos.

Finalmente, el .addEventListener("click", function(){}); activa la vinculación y la exposición de los elementos mediante un blucle while, que inserta debajo de un nodo dado (en este caso, el botón negro), a los nodos 'fragmento'. Y en donde fragmentoo.firstChild representa cada elemento del contenedor createDocumentFragment();

En Javascript

botn.addEventListener("click", function(){  
    // Cada nodo debe ser insertado uno a uno desde WHILE
    // MIENTRAS 'fragmentoo.firstChild' = true .... ejecute bucle
    while (fragmentoo.firstChild) {
        botn.insertAdjacentElement('afterend', fragmentoo.firstChild);}
        // Bucle se cancela cuando sea false (ya no hayan nodos)

        // Se añaden clases de estilos CSS para elementos creados
        parrafito.classList.add('estiloPrueba1');
        span.classList.add('estiloPrueba2');
    });

Click para mostrar nodos

BIBLIOGRAFÍA:
    3ra edición. 2018. Marijn Haverbeke. No starch press.
    Mozilla Foundation.
    David Flanagan (2020). Editorial O'Reilly.
    Ved Antani, Stoyan Stefanov (2017). Packt Publishing.
    Editorial Packt.
    Information and Computation. Elsevier.
    ACM SIGCSE BulletinVolume 19Issue 1Feb.