Tutorial Vanilla JS - Manipulación del DOM

En este tutorial aprenderemos cómo manipular el DOM utilizando JavaScript. Veremos desde conceptos básicos hasta buenas prácticas para asegurar un código eficiente y mantenible.

¿Qué es el DOM?

El Document Object Model (DOM) es una representación estructurada del documento HTML en un formato que puede ser manipulado por lenguajes de programación como JavaScript. El DOM representa el documento como una jerarquía de nodos y objetos, lo que permite a los desarrolladores acceder, modificar y eliminar elementos y sus atributos.

Accediendo a Elementos del DOM

Para manipular el DOM, primero debemos acceder a los elementos que queremos cambiar. JavaScript ofrece varias maneras de hacer esto:

  • document.getElementById(id): selecciona un elemento por su id.
  • document.getElementsByClassName(className): selecciona todos los elementos con una clase específica.
  • document.getElementsByTagName(tagName): selecciona todos los elementos con un nombre de etiqueta específico.
  • document.querySelector(selector): selecciona el primer elemento que coincida con el selector CSS especificado.
  • document.querySelectorAll(selector): selecciona todos los elementos que coincidan con el selector CSS especificado.

Ejemplo:

<script>
const elementById = document.getElementById('mi-id');
const elementsByClass = document.getElementsByClassName('mi-clase');
const elementsByTag = document.getElementsByTagName('div');
const firstElementByQuery = document.querySelector('.mi-clase');
const allElementsByQuery = document.querySelectorAll('.mi-clase');
</script>

Modificando Elementos del DOM

Una vez que hemos accedido a los elementos del DOM, podemos modificar sus propiedades, atributos y contenido. Aquí hay algunos métodos comunes:

  • element.innerHTML: establece o obtiene el contenido HTML de un elemento.
  • element.style.property: cambia el estilo CSS de un elemento.
  • element.setAttribute(attr, value): establece un nuevo atributo o cambia el valor de un atributo existente.
  • element.classList.add(className): añade una clase a un elemento.
  • element.classList.remove(className): elimina una clase de un elemento.

Ejemplo:

<script>
const miElemento = document.getElementById('mi-id');
miElemento.innerHTML = 'Nuevo contenido';
miElemento.style.backgroundColor = 'blue';
miElemento.setAttribute('data-example', 'value');
miElemento.classList.add('nueva-clase');
miElemento.classList.remove('mi-clase');
</script>

Manejo de Eventos

Los eventos son acciones que ocurren en el navegador, como clics de mouse, teclas presionadas, o la carga de una página. Para hacer que nuestro sitio web sea interactivo, podemos usar JavaScript para escuchar y responder a estos eventos.

Ejemplo de evento de clic:

<script>
const boton = document.getElementById('mi-boton');
boton.addEventListener('click', () => {
  alert('Botón clicado!');
});
</script>

Buenas Prácticas para la Manipulación del DOM

  • Utiliza selectores específicos: ayuda a mejorar el rendimiento.
  • Minimiza las manipulaciones directas del DOM: realiza los cambios necesarios en una sola operación.
  • Usa la delegación de eventos: añade un solo listener a un elemento padre en lugar de múltiples listeners a varios elementos hijos.

Ejemplo de delegación de eventos:

<script>
document.getElementById('padre').addEventListener('click', (event) => {
  if (event.target.classList.contains('hijo')) {
    alert('Elemento hijo clicado!');
  }
});
</script>

Rendimiento en la Manipulación del DOM

El rendimiento es crucial en la manipulación del DOM. Aquí hay algunos consejos para mantener un rendimiento óptimo:

  • Evita accesos repetidos al DOM: almacena referencias en variables.
  • Limita el uso de innerHTML si es posible: es menos eficiente en comparación con otros métodos.
  • Utiliza DocumentFragment para añadir múltiples elementos: permite insertar varios elementos en el DOM en una sola operación, reduciendo repaints y reflows.

Ejemplo de DocumentFragment:

<script>
const fragment = document.createDocumentFragment();
for (let i = 0; i < 5; i++) {
  const newDiv = document.createElement('div');
  newDiv.textContent = 'Elemento ' + i;
  fragment.appendChild(newDiv);
}
document.body.appendChild(fragment);
</script>