Elementos DOM

En Javascript, si queremos modificar un documento HTML y sus etiquetas, en primer lugar debemos conocer la estructura de la página, y en segundo lugar, conocer con que propiedades, métodos y objetos trabajar para crear, modificar y eliminar nuevas etiquetas HTML en una página mediante Javascript.

Elementos

En Javascript, los elementos HTML están incluidos en el interior de una variable llamada document, que representa a toda la página HTML donde nos encontramos. En su interior pueden existir varios tipos de elementos, pero principalmente serán de dos tipos:

  • Por un lado, tenemos Element, que no es más que la representación genérica de un elemento HTML. Puede tratarse de un HTMLDivElement si es un <div>, de un HTMLSpanElement si es un <span>, de un HTMLImageElement si es un <img>, etc...

  • Por otro lado, tenemos Node, que son la representación genérica de un nodo. Un nodo puede ser un Element o puede ser un elemento que, por ejemplo, contiene texto y no es un elemento HTML. Se trata de una unidad más básica que Element.

OJO: Aunque en esta documentación se hace referencia a Array, realmente los métodos de búsqueda generalmente devuelven un tipo de dato HTMLCollection o NodeList, que aunque actúan de forma muy similar a un Array, no son arrays, y por lo tanto pueden carecer de algunos métodos, como por ejemplo .forEach().

Seleccionar elementos

Si nos encontramos en nuestro código Javascript y queremos hacer modificaciones en un elemento de la página HTML, lo primero que debemos hacer es buscar dicho elemento. Para ello, se suele intentar identificar el elemento a través de alguno de sus atributos más utilizados, generalmente el id o la clase.

Métodos tradicionales

Existen varios métodos, los más clásicos y tradicionales para realizar búsquedas de elementos en el documento. Observa que si lo que buscas es un elemento específico, lo mejor sería utilizar getElementById(), en caso contrario, si utilizamos uno de los 3 siguientes métodos, nos devolverá un Array donde tendremos que elegir el elemento en cuestión posteriormente:

Métodos de búsqueda Descripción
Element getElementById(id) Busca el elemento HTML con id id. Si no, devuelve null.
Array getElementsByClassName(class) Busca elementos con la clase class. Si no, devuelve [].
Array getElementsByName(name) Busca elementos con atributo name name. Si no, devuelve [].
Array getElementsByTagName(tag) Busca elementos tag. Si no encuentra ninguno, devuelve [].

El primero método, getElementById(id) busca un elemento HTML con el texto de id indicado por parámetro. En principio, un documento HTML bien construído no debería tener más de un elemento con el mismo id, por lo tanto, este método devolverá siempre un solo elemento. En el caso de no encontrar el elemento indicado, devuelve null.

Por otro lado, tenemos los métodos getElementsByClassName(class), getElementsByName(name) y getElementsByTagName(tag), que se encargan de buscar elementos HTML por su clase, su atributo name o su propia etiqueta de elemento HTML respectivamente. Recuerda que estos métodos devuelven siempre un array con todos los elementos encontrados que encajen con el criterio, y en el caso de no encontrar ninguno, devolverán un Array vacío.

Veamos algunos ejemplos:

var elem = document.getElementById('page');             // Elemento con id="page"

var elems = document.getElementsByClassName('info');    // Elementos con class="info"
var elems = document.getElementsByName('nickname');     // Elementos con name="nickname"
var elems = document.getElementsByTagName('div');       // Elementos <div>

Observa que el primer método tiene getElement en singular y el resto getElements en plural. Ten en cuenta ese detalle para no olvidarte que uno devuelve un sólo elemento y el resto una lista de ellos.

Métodos modernos

Actualmente, existen algunos métodos de búsqueda de elementos que son mucho más cómodos y prácticos si conocemos y dominamos los selectores CSS. Es el caso de los métodos querySelector() y querySelectorAll():

Método de búsqueda Descripción
Element querySelector(sel) Busca el primer elemento que coincide con el selector CSS sel. Si no, null.
Array querySelectorAll(sel) Busca todos los elementos que coinciden con el selector CSS sel. Si no, [].

Con estos dos métodos se puede hacer todo lo que podemos hacer con los métodos tradicionales (y más aún) ya que son muy flexibles y potentes gracias a los selectores CSS. El primero, querySelector() devuelve el primer elemento que encuentra que encaja con el selector CSS, mientras que el segundo, querySelectorAll() devuelve un Array con todos los elementos que coinciden con el selector CSS.

Veamos algunos ejemplos:

var elem = document.querySelector('#page');        // Elemento con id="page"
var elem = document.querySelector('.main .info');  // Elemento class="info" en class="main"

var elems = document.querySelectorAll('.info');               // Todos con class="info"
var elems = document.querySelectorAll('[name="nickname"]');   // Elementos name="nickname"
var elems = document.querySelectorAll('div');                 // Elementos <div>

Ten en cuenta que al realizar una búsqueda de elementos y guardarlos en una variable, podemos realizar la búsqueda posteriormente sobre esa variable en lugar de hacerla sobre document. Esto permite realizar búsquedas acotadas por zonas (si sabemos que están en secciones concretas y la página es muy grande), en lugar de realizarlo siempre sobre document, que buscará en todo el documento HTML.

Contenido de elementos

Al obtener un Element, es posible acceder a su contenido. Tenemos varias propiedades interesantes para esto, veamos algunas de ellas:

Propiedades Descripción
String nodeName Devuelve el nombre del nodo (etiqueta si es un elemento HTML). Sólo lectura.
String textContent Devuelve el contenido de texto del elemento. Se puede asignar para modificar.
String innerHTML Devuelve el contenido HTML del elemento. Se puede usar asignar para modificar.
String outerHTML Idem a innerHTML pero incluyendo el HTML del propio elemento HTML.
String innerText Versión no estándar de textContent de Internet Explorer con diferencias. Evitar.
String outerText Versión no estándar de textContent/outerHTML de Internet Explorer. Evitar.

La propiedad nodeName nos devuelve el nombre del todo, que en elementos HTML es interesante puesto que nos devuelve el nombre de la etiqueta en mayúsculas.

La propiedad textContent nos devuelve el contenido de texto de un elemento HTML. Es útil para obtener (o cambiar) sólo el texto dentro de un elemento, obviando etiquetas HTML. Por otro lado, la propiedad innerHTML nos permite hacer lo mismo, pero interpretando el código HTML y renderizando sus elementos:

var div = document.querySelector('.info');      // Elemento HTML con class="info"

div.textContent = 'Hola a todos';     // Modifica o añade texto dentro del elemento
div.textContent;                      // 'Hola a todos'

div.innerHTML = '<strong>Importante</strong>';    // Interpreta el HTML
div.innerHTML;                        // '<strong>Importante</strong>'
div.textContent;                      // 'Importante'

OJO: La propiedad innerHTML revisa, comprueba y parsea el etiquetado escrito al utilizar la asignación. Por ejemplo, si en el ejemplo anterior nos olvidamos de escribir el cierre </strong> de la etiqueta, innerHTML automáticamente lo cerrará. Esto puede provocar algunas incongruencias si el código es incorrecto o una disminución de rendimiento en textos muy grandes que hay que preprocesar.

Por otro lado, la propiedad outerHTML es muy similar a innerHTML. Mientras que innerHTML devuelve el código HTML del interior de un elemento HTML, outerHTML devuelve también el código HTML del propio elemento en cuestión. Esto puede ser muy útil para reemplazar un elemento HTML combinándolo con innerHTML.

var data = document.querySelector('.data');

data.innerHTML = '<h1>Tema 1</h1>';
data.textContent; // 'Tema 1'
data.innerHTML;   // '<h1>Tema 1</h1>'
data.outerHTML;   // '<div class="data"><h1>Tema 1</h1></div>'

Por último, las propiedades innerText y outerText son propiedades no estándar de Internet Explorer. Se recomienda sólo utilizarlas con motivos de fallbacks o para dar soporte a versiones antiguas de Internet Explorer.

Crear elementos

A pesar de que con los métodos anteriores que hemos visto ya seríamos capaces de crear elementos y estructuras HTML complejas, los métodos del apartado anterior sólo son aconsejables para pequeños fragmentos de código o texto, ya que en estructuras complejas con muchos elementos HTML la legibilidad del código sería menor y además, el rendimiento del programa podría reducirse.

Existe una serie de elementos para crear de forma eficiente elementos HTML y nodos, de modo que sea sencillo crear estructuras dinámicas, con bucles o estructuras definidas:

Métodos Descripción
Element createElement(tag, options) Crea y devuelve un elemento HTML tag.
Node createComment(text) Crea y devuelve un nodo de comentarios HTML con el texto text.
Node createTextNode(text) Crea y devuelve un nodo HTML con el texto text.
Node cloneNode(deep) Clona el nodo HTML y devuelve una copia.
Boolean isConnected Indica si el nodo HTML está conectado con el documento HTML.

El primero de ellos, createElement(), nos permite crear un Element (a priori, aislado de la página HTML) para modificar e insertar más tarde en una posición determinada. Su funcionamiento básico es pasarle el nombre de la etiqueta tag a utilizar:

var div = document.createElement('div');    // <div></div>
var span = document.createElement('span');  // <span></span>
var img = document.createElement('img');    // <img>

var c = document.createComment('Comentario');   // <!--Comentario-->
var c = document.createTextNode('Hola');        // 'hola'

De la misma forma, podemos crear comentarios HTML con createComment() o nodos de texto sin etiqueta con createTextNode(), pasándole a ambos un String con el texto en cuestión. En ambos, se devuelve un Node que podremos utilizar luego para insertar en el documento HTML.

Nota: El método createElement() tiene un parámetro opcional denominado options. Si se indica, será un objeto con una propiedad is para definir un elemento personalizado. Se verá más adelante en el apartado de Web Components.

Hay que tener mucho cuidado al crear y duplicar elementos HTML. Un error común es asignar a una variable un elemento que tenemos en otra:

var div = document.createElement('div');
div.textContent = 'Elemento 1';

var div2 = div;   // NO se está haciendo una copia
div2.textContent = 'Elemento 2';

div.textContent;      // 'Elemento 2'

Con esto, quizás pueda parecer que estamos duplicando un elemento para crearlo a imagen y semejanza de otro. Sin embargo, lo que se hace es una referencia al elemento original, de modo que si se modifica el div2, también se modifica el elemento original. Para evitar esto, lo ideal es utilizar el método cloneNode():

var div = document.createElement('div');
div.textContent = 'Elemento 1';

var div2 = div.cloneNode();   // Ahora si estamos clonando
div2.textContent = 'Elemento 2';

div.textContent;      // 'Elemento 1'

El método cloneNode(deep) acepta un parámetro Boolean deep opcional por defecto para indicar el tipo de clonación. En el caso de establecerlo a true, clonará también sus hijos, lo que se conoce como una clonación profunda (Deep Clone). En caso contrario, no clonará sus hijos, lo que se conoce como una clonación superficial (Shallow clone).

Por último, la propiedad isConnected nos indica si el nodo en cuestión está conectado con el documento HTML. Hasta ahora, hemos creado elementos que no lo están. En el apartado Insertar elementos veremos como conectarlo con el documento HTML para que aparezca en la página.

Atributos de un elemento

Hasta ahora, hemos visto como crear elementos HTML con Javascript, pero no hemos visto como modificar sus atributos. En general, una vez tenemos un elemento sobre el que vamos a crear algunos atributos, lo más sencillo es asignarle valores como propiedades de objetos:

var div = document.createElement('div');
div.id = 'page';
div.className = 'data';       // Ojo, class es una palabra reservada de Javascript
div.style = 'color: red';

Sin embargo, en algunos casos esto se puede complicar, ya que por ejemplo la palabra class (para crear clases) o la palabra for (para bucles) son palabras reservadas de Javascript y no se podrían utilizar para crear atributos. Por ejemplo, si queremos establecer una clase, se debe utilizar la propiedad className.

Truco: Es posible asignar a la propiedad className varias clases en un String separadas por espacio. De esta forma se asignarán múltiples clases. Aún así, recomendamos utilizar la propiedad classList que explicaremos más adelante.

No obstante, tenemos algunos métodos para utilizar en un elemento HTML y referirnos a sus atributos:

Métodos Descripción
Boolean hasAttribute(attr) Indica si el elemento tiene el atributo attr.
Boolean hasAttributes() Indica si el elemento tiene atributos.
Array getAttributeNames() Devuelve un array con los atributos del elemento.
String getAttribute(attr) Devuelve el valor del atributo attr del elemento o null si no existe.
Undefined removeAttribute(attr) Elimina el atributo attr del elemento.
Undefined setAttribute(attr, value) Añade o cambia el atributo attr al valor value.
Node getAttributeNode(attr) Idem a getAttribute() pero devuelve el atributo como nodo.
Node removeAttributeNode(attr) Idem a removeAttribute() pero devuelve el atributo como nodo.
Node setAttributeNode(attr, value) Idem a setAttribute() pero devuelve el atributo como nodo.

Estos métodos son bastante autoexplicativos y fáciles de entender. Los métodos hasAttribute() y hasAttributes() sirven para comprobar si existen atributos o un atributo específico en un elemento, los métodos getAttributeNames() y getAttribute() sirve para obtener los atributos que tiene un elemento o el valor específico de uno, y los métodos removeAttribute() y setAttribute() sirven para eliminar atributos o añadir/modificar los valores de un atributo específico, respectivamente:

// <div id="page" class="info data dark" data-number="5"></div>
var div = document.querySelector('#page');

div.hasAttribute('data-number');    // true
div.hasAttributes();                // true (tiene 3)

div.getAttributeNames();            // ['id', 'data-number', 'class']
div.getAttribute('id');             // 'page'
div.removeAttribute('id');          // Elimina el atributo id. No devuelve nada.
div.setAttribute('id', 'page');     // Vuelve a añadirlo.

Los tres últimos métodos, getAttributeNode(), removeAttributeNode() y setAttributeNode() son versiones idénticas a las anteriores, sólo que devuelven el Node afectado, útil si queremos guardarlo en una variable y seguir trabajando con él.

Clases de un elemento

Al margen de tener que utilizar className en lugar de class, lo que puede dar lugar a confusiones y equivocaciones, trabajar con clases utilizando atributos puede ser poco apropiado, ya que recordemos que un elemento HTML puede tener varias clases. En el caso de sobreescribir con una asignación una clase, eliminaríamos las anteriores.

Para trabajar más cómodamente, existe un sistema muy interesante para trabajar con clases: el objeto propiedad classList, que devuelve la lista de clases del elemento. Además, incorpora una serie de métodos especiales que nos harán muy sencillo trabajar con clases:

Método Descripción
Array classList Devuelve la lista de clases del elemento HTML.
String classList.item(n) Devuelve la clase número n del elemento HTML.
Undefined classList.add(c1, c2, ...) Añade las clases c1, c2... al elemento HTML.
Undefined classList.remove(c1, c2, ...) Elimina las clases c1, c2... del elemento HTML.
Boolean classList.contains(clase) Indica si la clase existe en el elemento HTML.
Boolean classList.toggle(clase) Si la clase no existe, la añade. Si no, la elimina.
Boolean classList.toggle(clase, expr) Si expr es true, añade clase. Si no, la elimina.
Boolean classList.replace(old, new) Reemplaza la clase old por la clase new.

Los métodos classList.add() y classList.remove() permiten indicar una o múltiples clases. El método classList.toggle() devuelve true si añade la clase y false si la elimina. Por otro lado, el método classList.replace() devuelve true si realiza el cambio con éxito.

Veamos algunos ejemplos:

// <div id="page" class="info data dark" data-number="5"></div>
var div = document.querySelector('#page');

div.classList;                            // ['info', 'data', 'dark']
div.classList.add('uno', 'dos');          // No devuelve nada. Añadimos 'uno' y 'dos'
div.classList.remove('uno', 'dos');       // No devuelve nada. Eliminamos 'uno' y 'dos'
div.classList.item(1);                    // 'data'
div.classList.contains('info');           // Devuelve `true` (existe la clase)
div.classList.toggle('info');             // Devuelve `true` (elimina 'info')
div.classList.toggle('info');             // Devuelve `false` (no existía, añade 'info')
div.classList.replace('dark', 'light');   // Devuelve `true` (se hizo el cambio)

OJO: Recuerda que la propiedad classList aunque parece un Array no es un array, sino un elemento que actúa como un array, por lo que puede carecer de algunos métodos o propiedades concretos.

Insertar elementos

Hemos aprendido a crear elementos HTML y sus atributos, pero aún no hemos visto como añadirlos al documento HTML actual, operación que se puede realizar de diferentes formas mediante los siguientes métodos disponibles:

Métodos Descripción
Node appendChild(node) Añade como hijo el nodo node. Devuelve el nodo insertado.
Element insertAdjacentElement(pos, elem) Inserta el elemento elem en la posición pos. Si falla, null.
Undefined insertAdjacentHTML(pos, str) Inserta el código HTML str en la posición pos.
Undefined insertAdjacentText(pos, text) Inserta el texto text en la posición pos.
Node insertBefore(new, node) Inserta el nodo new antes de node y como hijo del nodo actual.

Uno de los métodos más comunes para añadir un elemento HTML creado con Javascript es appendChild(). Como su propio nombre indica, este método realiza un «append», es decir, inserta el elemento como un hijo y al final de todos los elementos hijos que existan. Es importante tener clara esta particularidad, porque aunque es lo más común, no siempre querremos insertar el elemento en esa posición:

var div = document.createElement('div');
div.textContent = 'Esto es un div insertado con JS.';

var app = document.querySelector('#app');   // <div id="app"></div>
app.appendChild(div);

Los métodos de la familia insertAdjacent son bastante más versátiles. Tenemos tres versiones diferentes: insertAdjacentElement() donde insertamos un objeto Element, insertAdjacentHTML() donde insertamos el código HTML directamente (similar a como lo hacemos con innerHTML) y por último insertAdjacentText() donde no insertamos elementos HTML sino un texto específico. En las tres versiones, debemos indicar un String pos como primer parámetro para indicar en que posición vamos a insertar el contenido:

  • beforebegin: El elemento se inserta antes de la etiqueta HTML de apertura.
  • afterbegin: El elemento se inserta dentro de la etiqueta HTML, antes de su primer hijo.
  • beforeend: El elemento se inserta dentro de la etiqueta HTML, después de su último hijo. Es el equivalente a usar appendChild().
  • afterend: El elemento se inserta después de la etiqueta HTML de cierre.

Veamos algunos ejemplo:

var div = document.createElement('div');
div.textContent = 'Ejemplo';

var app = document.querySelector('#app');       // <div id="app">App</div>

// Opción #1 Antes del elemento:
app.insertAdjacentElement('beforebegin', div);
// <div>Ejemplo</div> <div id="app">App</div>

// Opción #2 Antes del primer hijo:
app.insertAdjacentElement('afterbegin', div);
// <div id="app"> <div>Ejemplo</div> App</div>

// Opción #3 Después del último hijo:
app.insertAdjacentElement('beforeend', div);
// <div id="app">App <div>Ejemplo</div> </div>

// Opción #4 Después del elemento:
app.insertAdjacentElement('afterend', div);
// <div id="app">App</div> <div>Ejemplo</div>

Por otro lado, la diferencia entre las versiones de los métodos es la que podemos ver a continuación:

// Inserta el elemento HTML div creado con createElement
app.insertAdjacentElement('beforebegin', div);

// Inserta el código HTML pasado por parámetro
app.insertAdjacentHTML('beforebegin', '<div id="app"></div>');

// Inserta un nodo con el texto pasado por parámetro
app.insertAdjacentText('beforebegin', 'Hola a todos');

Por último, el método insertBefore(new, node) es un método más específico y menos utilizado en el que se puede especificar exactamente el lugar a insertar un nodo. El parámetro new es el nodo a insertar, mientras que node puede ser:

  • null; insertando new después del último nodo hijo.
  • un Node de referencia; insertando new antes de dicho node de referencia.

Eliminar o reemplazar elementos

Probablemente, la forma más sencilla de eliminar nodos o elementos HTML es utilizando el método remove(). Dicho método simplemente elimina el nodo o etiqueta. No devuelve nada:

var div = document.querySelector('.deleteme');
div.remove();

Sin embargo, existen algunos métodos más para eliminar o reemplazar elementos:

Métodos Descripción
Undefined remove() Elimina el propio nodo de su elemento padre.
Node removeChild(node) Elimina y devuelve el nodo hijo node.
Node replaceChild(new, old) Reemplaza el nodo hijo old por new. Devuelve old.

En algunos casos, nos puede interesar eliminar un nodo hijo de un elemento. Para esas situaciones, podemos utilizar el método removeChild(node) donde node es el nodo hijo que queremos eliminar. De la misma forma, el método replaceChild(new, old) nos permite cambiar un nodo hijo old por un nuevo nodo hijo new. En ambos casos, el método nos devuelve el nodo reemplazado.

Elementos relacionados

En algunas ocasiones en las que conocemos y controlamos perfectamente la estructura del código HTML de la página, nos puede resultar más cómodo tener a nuestra disposición una serie de propiedades para navegar por la jerarquía de elementos HTML relacionados.

Las propiedades que vemos a continuación devuelven información de otros elementos relacionados con el elemento en cuestión. Observa que hay dos grupos principales, el primero, que son las propiedades para cuando vamos a trabajar con elementos HTML, y el segundo, que son las propiedades equivalentes a las anteriores, pero para trabajar con nodos HTML:

Propiedades Descripción
Array children Devuelve una lista de elementos HTML hijos.
Element parentElement Devuelve el padre del elemento o null si no tiene.
Element firstElementChild Devuelve el primer elemento hijo.
Element lastElementChild Devuelve el último elemento hijo.
Element previousElementSibling Devuelve el elemento hermano anterior o null si no tiene.
Element nextElementSibling Devuelve el elemento hermano siguiente o null si no tiene.
Array childNodes Devuelve una lista de nodos hijos. Incluye nodos de texto y comentarios.
Node parentNode Devuelve el nodo padre del nodo o null si no tiene.
Node firstChild Devuelve el primer nodo hijo.
Node lastChild Devuelve el primer nodo hijo.
Node previousSibling Devuelve el nodo hermano anterior o null si no tiene.
Node nextSibling Devuelve el nodo hermano siguiente o null si no tiene.

En primer lugar, tenemos la propiedad children que nos ofrece un Array con una lista de elementos HTML hijos. Podríamos acceder a cualquier hijo utilizando los corchetes de array y seguir utilizando otras propiedades en el hijo seleccionado. Observa que, firstElementChild sería un acceso rápido equivalente a children[0], mientras que lastElementChild sería un acceso rápido al último elemento hijo.

Por último, tenemos las propiedades previousElementSibling y nextElementSibling que nos devuelven los elementos hermanos anteriores o posteriores, respectivamente. La propiedad parentElement nos devolvería el padre del elemento en cuestión. En el caso de no existir alguno de estos elementos, nos devolvería null.

Consideremos el siguiente documento HTML:

<html>
<body>
  <div id="app">
    <div class="header">
      <h1>Titular</h1>
    </div>
    <p>Párrafo de descripción</p>
    <a href="/">Enlace</a>
  </div>
</body>
</html>

Si trabajamos bajo este documento HTML, y utilizamos el siguiente código Javascript, podremos «navegar» por la jerarquía de elementos, moviéndonos entre elementos padre, hijo o hermanos:

document.body.children.length;   // 1
document.body.children;          // [div#app]
document.body.parentElement;     // <html>

var app = document.querySelector('#app');

app.children;                    // [div.header, p, a]
app.firstElementChild;           // <div class="header">
app.lastElementChild;            // <a href="...">

var a = app.querySelector('a');

a.previousElementSibling;        // <p>
a.nextElementSibling;            // null

Ten en cuenta que las propiedades utilizas hasta aquí son teniendo en cuenta elementos HTML, que suele ser lo más habitual a la hora de trabajar. No obstante, el resto de propiedades, son las propiedades equivalentes pero trabajando a nivel de nodos HTML, donde incluso los textos (¡y espacios en blanco entre elementos HTML!) influyen:

document.body.childNodes.length; // 3
document.body.childNodes;        // [text, div#app, text]
document.body.parentNode;        // <html>

var app = document.querySelector('#app');

app.childNodes;                  // [text, div.header, text, p, text, a, text]
app.firstChild.textContent;      // '                             '
app.lastChild.textContent;       // '                             '

var a = app.querySelector('a');

a.previousSibling;               // #text
a.nextSibling;                   // #text

Con todo esto, ya tenemos suficientes herramientas para trabajar a bajo nivel con las etiquetas y nodos HTML de un documento HTML desde Javascript.

Librerías de terceros

En muchos casos, el rendimiento no es tan importante como para trabajar a tan bajo nivel, por lo que podemos utilizar algunas librerías de terceros que nos facilitan el trabajo, nos permiten programar más rápidamente y la perdida de rendimiento es aceptable en comparación con el trabajo que podría llevar.

Librería Descripción GitHub
SuperDOM Manipulando DOM como si estuvieras en 2018 @szaranger/superdom
Voyeur.js Pequeña librería para manipular el DOM @adriancooney/voyeur.js
HtmlJs Motor de renderización de HTML y data binding (MVVM) @nhanfu/htmljs
RE:DOM Librería para crear interfaces de usuario, basada en DOM. @redom/redom
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.