DOM (Document Object Model): qué es y cómo funciona en JavaScript

9min

El DOM o Document Object Model es uno de los conceptos fundamentales en el desarrollo web frontend. Gracias al DOM se puede manipular mediante JavaScript el contenido de una página web, permitiendo dotar de interacción a los usuarios.

Índice

¿Qué es el DOM (Document Object Model)?

Cuando una página carga el navegador web produce toda la estructura de etiquetas en un conjunto de objetos en memoria. Ese conjunto de objetos se denomina Document Object Model (DOM), que es una representación del contenido de un documento HTML. 

Podemos pensar en DOM como el puente que nos permite conectar nuestro código JavaScript con la página web que el navegador está mostrando. De este modo podemos acceder a cada uno de los elementos de la página, recuperar sus propiedades y alterarlas. Así es como somos capaces de interactuar con el contenido y la estructura del documento cuando los usuarios hacen cosas con la página.

Estructura básica del DOM

El DOM, como el propio HTML, se organiza en una estructura jerárquica de nodos. Esta estructura se asemeja a un árbol, donde cada elemento tiene relaciones con padres e hijos. Vamos a detallarla en los siguientes puntos.

Nodos en el DOM: nodos de elementos, texto y atributos

En el DOM, todo elemento se representa como un nodo, que es la pieza fundamental de la estructura del documento. Existen varios tipos:

  • Nodos de elementos: Son los que representan las etiquetas HTML, como «div», «p» o «b».
  • Nodos de texto: Representan el contenido de texto que se encuentra dentro de un elemento.
  • Nodos de atributos: Representan los atributos asociados a los elementos, como class o id.

El árbol DOM: cómo se organizan los elementos en un documento

El DOM está organizado en forma de árbol, lo que establece una jerarquía de elementos. El nodo principal, llamado “raíz”, es el nodo , y de él se derivan los demás nodos de la página, como o , del que a su vez cuelgan todos los elementos de contenido como párrafos, imágenes, enlaces, etc.

Métodos de navegación entre nodos en el DOM

Para navegar por el árbol del DOM, JavaScript ofrece varios métodos y propiedades. Dada la organización en árbol podemos movernos usando relaciones como “padre”, “hijo” y “hermano”. Algunos métodos son:

  • parentNode: Permite acceder al nodo padre.
  • childNodes: Devuelve una lista de nodos hijos.
  • nextSibling y previousSibling: Permiten navegar entre nodos hermanos.

Sin embargo, en la práctica lo más común es acceder a los nodos mediante sus identificadores u otros selectores CSS, lo que resulta mucho más práctico y versátil. Veremos un poco después ejemplos.

Cómo funciona el DOM en JavaScript

La mayor utilidad del DOM se da en el ámbito de la programación en JavaScript. Como hemos dicho, es el mecanismo que nos permite acceder, modificar y reaccionar a las acciones del usuario dentro de la página web. 

Acceso al DOM desde JavaScript: seleccionar elementos y nodos

El lenguaje de programación JavaScript nos ofrece diferentes formas de acceder a los elementos del DOM. Los métodos más utilizados son:

  • getElementById(): Selecciona un elemento por su ID (atributo id de la etiqueta HTML).
  • querySelector() y querySelectorAll(): Seleccionan elementos usando selectores CSS, lo que permite una mayor flexibilidad y potencia de selección.

Estos métodos son esenciales para realizar cualquier manipulación dinámica en el documento. Un ejemplo sería el siguiente:

const elemento = document.getElementById('identificador');

Al ejecutarse este código estaremos almacenando en la constante elemento una referencia al elemento de la página que tiene el id=»identificador».

Modificación del DOM: manipular elementos y atributos

Una vez que hemos seleccionado un nodo, podemos modificarlo con una buena provisión de métodos que nos ofrece el propio DOM. Por ejemplo, es posible cambiar el contenido de texto de un elemento con la propiedad innerText o su código HTML con innerHTML.

elemento.innerText = 'Otro texto para el elemento'

Existen infinidad de propiedades y métodos. Por ejemplo, podemos modificar sus atributos con setAttribute() o la lista de clases CSS de un elemento con classList.

Eventos y el DOM: cómo manejar interacciones con usuarios

Además de la propia manipulación de la página también tenemos la posibilidad de añadir manejadores de eventos en los elementos del documento. Esto nos permite reaccionar a las acciones del usuario mediante código JavaScript.

Para conseguir asociar manejadores de eventos usamos el método addEventListener(),  indicando el tipo de evento y la función que debe ejecutarse cuando se produzca ese evento.

elemento.addEventListener('click', function() {
    console.log('Explicando el DOM en Arsys');
});

El código anterior hará que cuando se haga clic sobre el nodo que hay en la constante elemento, se mande un mensaje a la consola de JavaScript.

Manipulación del DOM con JavaScript: ejemplos prácticos

Ahora vamos a ver unos ejemplos básicos pero representativos de técnicas comunes de acceso y manipulación del DOM, para que veas cómo aplicar estos conceptos en la práctica.

Añadir, eliminar y modificar elementos HTML dinámicamente

JavaScript nos permite crear nuevos elementos con document.createElement() y agregarlos al DOM usando métodos como appendChild() o insertBefore(). Del mismo modo, se pueden eliminar elementos con removeChild(), haciendo que la página cambie conforme a las acciones del usuario.

<div id='container'></div>
<script>
  // Crear un nuevo elemento de párrafo
  const newParagraph = document.createElement('p');
  newParagraph.textContent = 'Este es un nuevo párrafo.';

  // Agregarlo al elemento con id container
  document.getElementById('container').appendChild(newParagraph);
</script>

Ahora vamos a ver un ejemplo sobre cómo podríamos eliminar un nodo:

<div id='container'>
  <p id='paragraphToRemove'>Este es un párrafo que se eliminará.</p>
</div>

<script>
  const paragraph = document.getElementById('paragraphToRemove');
  paragraph.remove(); // Eliminar el elemento del DOM
</script>

Cambiar estilos CSS a través del DOM

El DOM también nos permite modificar los estilos de un elemento. Usando la propiedad style, podemos cambiar atributos CSS como colores, tamaños o posiciones. 

<div id='box' style='width: 100px; height: 100px; background-color: blue;'></div>
<script>
  // Cambiar el color de fondo del div
  const box = document.getElementById('box');
  box.style.backgroundColor = 'red'; // Cambia el color de azul a rojo
  // Cambiar el ancho del div
  box.style.width = '150px';
</script>

Además, se pueden agregar y eliminar clases con classList.add() y classList.remove() para aplicar cambios de maneras más radicales, aplicando clases CSS que tengas en tus hojas de estilos.

<div id='box' class='default-box'>Soy un cuadro</div>
<style>
  .default-box {
    width: 100px;
    height: 100px;
    background-color: lightgray;
    color: black;
    text-align: center;
    line-height: 100px;
  }
  .highlight {
    background-color: yellow;
    color: red;
    border: 2px solid black;
  }
  .hidden {
    display: none;
  }
</style>

<button id='toggleButton'>Destacar / Ocultar</button>
<script>
  const box = document.getElementById('box');
  const button = document.getElementById('toggleButton');
  button.addEventListener('click', () => {
    // Alternar la clase 'highlight'
    box.classList.toggle('highlight');    
    // Si el cuadro tiene la clase 'highlight', eliminar 'hidden'
    if (box.classList.contains('highlight')) {
      box.classList.remove('hidden');
    } else {
      // Si no está destacado, agregar la clase 'hidden' para ocultarlo
      box.classList.add('hidden');
    }
  });
</script>

Manipular formularios y datos de usuario mediante el DOM

Otro ejemplo clásico de desarrollo en el navegador consiste en la manipulación en el diseño de formularios. Mediante JavaScript, podemos acceder a los valores de los campos de formulario, validarlos y realizar acciones diversas en consecuencia.

<form id='myForm'>
  <label for='nameInput'>Nombre:</label>
  <input type='text' id='nameInput' name='name' />
  <button type='button' id='submitButton'>Enviar</button>
</form>

<p id='output'></p>

<script>
  const form = document.getElementById('myForm');
  const input = document.getElementById('nameInput');
  const output = document.getElementById('output');
  const button = document.getElementById('submitButton');

  // Manejar el evento de clic en el botón
  button.addEventListener('click', () => {
    const userName = input.value;
    if (userName) {
      output.textContent = `Hola, ${userName}!`; // Muestra el nombre ingresado
    } else {
      output.textContent = 'Por favor, ingresa un nombre.';
    }
  });

  // Limpiar el campo de entrada
  input.addEventListener('focus', () => {
    input.value = '';
  });
</script>

Mejores prácticas para trabajar con el DOM en JavaScript

Trabajar con el DOM es muy sencillo. En poco tiempo puedes estar haciendo comportamientos dinámicos y mejorando la experiencia de usuario en tu web. Sin embargo, es bueno tener en cuenta algunas recomendaciones.

Optimización de la manipulación del DOM para mejorar el rendimiento

Manipular el DOM de manera excesiva o no hacerlo de manera eficiente puede afectar el rendimiento de una página web. Es cierto que los ordenadores actuales son muy potentes, pero no debemos descuidarnos para no hacer una página lenta o que consuma demasiada batería.

Para mejorar los accesos al DOM es interesante apoyarse en algunas librerías modernas como React o Lit, sobre todo cuando tenemos que hacer muchas reescrituras del DOM, ya que tienen procedimientos pensados para mejorar la rapidez y gastar menos recursos.

Uso de herramientas y librerías para facilitar el trabajo con el DOM

Además de lo que hemos mencionado en el punto anterior sobre la eficiencia de algunas librerías, realizar el trabajo con el DOM con herramientas de manipulación como jQuery será siempre muy útil. No solo nos ofrecen la posibilidad de escribir menos código para hacer lo mismo, sino también nos ayudan en el mantenimiento de las aplicaciones, ya que el código será más sencillo y entendible.

Cuidado con el «Reflow» y «Repaint»: cómo afecta el rendimiento

Algunas prácticas como «Reflow» y el «Repaint» nos pueden castigar especialmente el rendimiento, afectando no solo a la experiencia de usuario, sino incluso al posicionamiento SEO. El «Reflow» ocurre cuando cambia la estructura o el tamaño de los elementos, mientras que el «Repaint» se produce cuando hay cambios visuales como colores. Debes minimizar los cambios que desencadenan estos procesos, si quieres mantener un buen rendimiento de la página y mejorar la experiencia de usuario.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: