El uso del DOM desde JavaScript ha mejorado mucho en los últimos años. Librerías como JQuery han facilitado enormemente la tarea del programador a la hora de acceder a los identificadores, clases y etiquetas, y aunque ahora disponemos de nuevas formas de acceso en JavaScript que han hecho olvidar en parte aquella librería, la forma en que trabajamos con el DOM aún se puede mejorar. En esta entrada veremos unas pocas funciones que nos ayudarán en el día a día, y es posible que en el futuro se incorporen otras nuevas funciones a este post.

1. Selección al estilo JQuery

Para empezar, un canto a la nostalgia. Si usabas la famosa librería y echas de menos su forma tan simple de funcionar aquí tienes una aproximación a la selección de elementos del DOM.

function $(el) { return document.querySelector(el); };

o en versión función flecha, como más te guste:

const $ = el => document.querySelector(el);

La función $(el) seleccionará un elemento (el) del DOM que podremos asignar a una variable o con el que podemos usar propiedades, por ejemplo:

$('#aviso').classList.add('rojo');

que añadirá la clase .rojo al elemento con el id aviso.

El uso de querySelector() ha venido a simplificar mucho el acceso a los elementos del DOM, pero con esta función $(), seleccionar elementos es aún más simple, y va a ser de ayuda en las siguientes funciones.

También podemos seleccionar varios elementos con $$() con esta función:

const $$ = el => document.querySelectorAll(el);

2. Crear nuevos elementos y conectarlos al DOM

La creación de nuevos elementos del DOM requiere de varios pasos. Crear el elemento, introducir la información en el elemento si es necesario y conectarlo al elemento padre. ¿Qué tal si lo simplificamos con una función?

function createEl(parent, element, content = null) {
    let newEl = document.createElement(element);
    if (content) newEl.innerHTML = content;
    return parent.appendChild(newEl);
}

Con la función createEl() cubrimos en un sólo paso los tres pasos necesarios para crear, completar y conectar un nuevo elemento, y la función nos devolverá el nuevo elemento para que podamos trabajar con él:

const $titulo = createEl($('body'), 'h1', 'Hola Mundo');

Con esta línea crearemos un elemento H1 dentro del body que contendrá el texto 'Hola Mundo', y la referencia al nuevo elemento está contenida en la variable $titulo.

Nota: el $ de la variable titulo no es necesario (ni que estuviésemos programando en PHP…), pero recordando el uso de JQuery, es una buena forma de identificar aquellas variables que hacen referencia a elementos del DOM para diferenciarlas de las otras.

2.1. Uso práctico: Creación de tablas básicas con createEl()

Esta nueva función es muy potente, y simplifica mucho las líneas de código que tenemos que usar para crear estructuras del DOM complejas con JavaScript. Un ejemplo de ello son las tablas y sus etiquetas anidadas. Veamos cómo sería una función que crease una tabla simple con createEl():

function createTable(parent, id, headers, footers = null) {
    let table, thead, tfoot, tr, th;
    table = createEl(parent, 'table');
    table.setAttribute('id', id);
    thead = createEl(table , 'thead');
    tr    = createEl(thead , 'tr');
    for (const header of headers) {
        th = createEl(tr, 'th', header);
        th.setAttribute('scope', 'col');
    }
    if (footers) {
        tfoot = createEl(table, 'tfoot');
        tr    = createEl(tfoot, 'tr');
        for (const footer of footers) {
            createEl(tr, 'td', footer);
        } 
    }
    return createEl(table, 'tbody');
}

La función createTable() crea una tabla dentro de un elemento padre, le asigna un identificador, y crea las cabeceras y pies que le indiquemos, devolviendo la referencia al elemento tbody de la tabla para que podamos rellenarla con filas y columnas.

Un ejemplo sencillo de uso sería:

$tBody = createTable($('#section'), 'miTabla', ['núm.', 'producto']);

$tBody.innerHTML = '<tr><td>1</td><td>vegetales</td></tr>';

que mostrará la siguiente tabla a la que podemos seguir añadiendo elementos:

núm	producto
1	vegetales

Fácil y cómodo. ¿verdad?

3. Mostrar u ocultar elementos del DOM

Una función que nos aporte una forma simple de hacer visible u ocultar cualquier elemento del DOM, por ejemplo las secciones de una página web de una única página (SPA) sería la siguiente:

function showEl(element, status) {
    element.style.display = status ? 'initial' : 'none';
}

La función showEl() requiere dos parámetros: elemento del DOM con el que vamos a trabajar y si va a estar visible (true) o invisible (false).

Digamos que en una SPA hemos completado un formulario, y ahora queremos mostrar los resultados. con esta función podríamos:

showEl($('#form'), false);
showEl($('#results'), true);

Partimos de la base de que el elemento con identificador results estaba oculto, y el elemento con identificador form visible. De esta forma el formulario se ocultaría y serían visibles los datos derivados de la gestión de formulario.

Nota: Para que showEl() funcione adecuadamente, es preferible que, a la hora de definir los estilos CSS del elemento a mostrar/ocultar, estos estilos no incluyan un display: none; ya que al seleccionar display: initial; dentro de la función, podría no funcionar.

4. Activar o desactivar un botón

Es una buena práctica desactivar un botón cada vez que se dispare n evento asociado a este. Nada más fácil con la siguiente función:

function setInactiveBtn(button, status) {
    button.disabled = status;
    button.setAttribute('aria-disabled', status);
}

Con setInactiveBtn() cambiamos el estatus disabled del botón que indiquemos pasándole los valores true o false. Un ejemplo:

function setInactiveBtn($('#submit'), true);

La función desactivará el botón con el identificador submit (disabled = true). Para volver a activarlo, será suficiente con usar la misma función con el status false.

5. Decodificar entidades HTML

Esta función es innecesaria, y por tanto contraria a la idea de utilidad de las funciones anteriores, porque existen en JavaScript las funciones encodeURIComponent() y decodeURIComponent() (ver info), pero es un buen ejemplo de lo que se puede hacer jugando un poco con el DOM, y por eso se incluye. Esta función es además una mejora de una versión inicial que nos aportó el profesor de apoyo del bootcamp de FSWD que estoy realizando, y que elaboró Gustavo, uno de sus compañeros de estudios.

Cuando la función recibe la información codificada con entidades HTML, por ejemplo a través de una API, y queremos reconducir esa información a, por ejemplo un fichero de logs en texto plano, o tal vez enviarla a consola, la información no se muestra correctamente. Una forma de convertir a un string la información que incluye entidades HTML sería la siguiente:

function decodeHTMLEntities(str) {
    let result = null;
    if(str && typeof str === 'string') {
        let element = document.createElement('div');
        element.innerHTML = str;
        result = element.textContent;
        element.remove();
    }
    return result;
}

La función recibe la cadena a «decodificar» y devuelve la cadena en texto simple. Para ello obliga al DOM a trabajar para nosotros creando un elemento div en el que se incluye el texto «codificado» y del que se lee luego el texto «decodificado» para devolverlo con return. Como se ve, el elemento div nunca llega a conectarse al árbol DOM.

Tomemos el siguiente ejemplo:

let texto = decodeHTMLEntities('Los%20ni%C3%B1os%20com%C3%ADan%20y%20daban%20migajas%20a%20la%20cig%C3%BCe%C3%B1a.');

El valor de texto resultante será: Los niños comían y daban migajas a la cigüeña..

Y con esta curiosidad, cierro esta entrada por ahora, y espero que alguna de estas funciones llegue a serte útil.