W3docs
es
Iniciar sesión

Javascript y el DOM

Aprende a acceder, actualizar y manipular el DOM con JavaScript: selecciona elementos, cambia contenido, estilos y maneja eventos.

Información

Tenemos una sección completa y separada sobre el DOM de JavaScript. Puedes explorarla para ver ejemplos y explicaciones detalladas.

Introducción a JavaScript y el DOM

JavaScript es el lenguaje de scripting que da vida a las páginas web. El Document Object Model (DOM) es el puente que le permite hacerlo: cuando un navegador carga un documento HTML, analiza el marcado y lo convierte en un árbol de objetos vivo en memoria. JavaScript lee y escribe ese árbol, y el navegador redibuja la página al instante para reflejarlo. Así es como un documento estático se vuelve interactivo: los botones responden, el contenido se actualiza y los estilos cambian sin necesidad de recargar.

Esta página cubre los aspectos esenciales: cómo está estructurado el DOM, cómo seleccionar elementos, cómo cambiar su contenido y estilos, y cómo responder a eventos del usuario. Cada tema enlaza a un capítulo más detallado cuando desees profundizar.

Entendiendo el DOM

El DOM es una representación estructurada, en forma de árbol, de tu documento HTML. Cada etiqueta, atributo y fragmento de texto se convierte en un nodo — un objeto que JavaScript puede leer y modificar. Como el árbol es dinámico, modificar un nodo cambia inmediatamente lo que ve el usuario.

Es útil distinguir tres términos que pueden confundirse fácilmente:

  • DOM — el modelo de objetos que el navegador construye a partir de tu HTML. No es el código fuente HTML; es la versión analizada y normalizada que mantiene el navegador.
  • document — el objeto global que es el punto de entrada al árbol del DOM. Toda selección comienza aquí (o desde otro elemento).
  • Node — un punto único en el árbol. Los elementos (<div>, <p>), el texto y los comentarios son todos nodos; los nodos de elemento son los que usualmente se trabajan.

Para un tratamiento más completo de los tipos de nodos y la estructura del árbol, consulta Entendiendo los nodos del DOM y Recorriendo el DOM.

JavaScript ofrece varios métodos para encontrar elementos en el árbol y actuar sobre ellos.

Un árbol DOM que muestra el elemento html ramificándose en los nodos head y body

El árbol a continuación tiene una raíz document, un elemento <html> con hijos <head> y <body>, y nodos de texto dentro de los encabezados y párrafos:

<!DOCTYPE html>
<html>
  <head>
    <title>Text</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Paragraph</p>
  </body>
</html>
Pruébalo tú mismo »

Métodos principales de selección

  • document.getElementById() — devuelve el único elemento con ese id, o null si no existe ninguno.
  • document.getElementsByClassName() — devuelve un HTMLCollection dinámico de elementos con la clase indicada.
  • document.getElementsByTagName() — devuelve un HTMLCollection dinámico de elementos con la etiqueta indicada.
  • document.querySelector() — devuelve el primer elemento que coincida con cualquier selector CSS, o null.
  • document.querySelectorAll() — devuelve un NodeList estático con todos los elementos coincidentes.

¿Cuál deberías usar? En código moderno, querySelector y querySelectorAll cubren casi todos los casos porque aceptan la sintaxis completa de selectores CSS (#id, .class, div > p, [type="text"]). Recurre a getElementById solo cuando necesites la búsqueda más rápida posible por un id conocido.

Dos diferencias son importantes en la práctica:

  • Dinámico vs. estático. Un HTMLCollection dinámico (de getElementsBy*) se actualiza automáticamente cuando cambia el DOM; un NodeList estático (de querySelectorAll) es una instantánea tomada en el momento de la llamada.
  • Iteración. Un NodeList admite forEach directamente; un HTMLCollection no, así que conviértelo primero con Array.from(collection).

Para más información, consulta Selección de elementos del DOM.

Manipulación de elementos del DOM

Una vez que tienes una referencia a un elemento, puedes cambiar su contenido, atributos y apariencia, y la página se actualiza de inmediato.

Operaciones comunes

  • Cambiar contenido: Usa element.innerHTML o element.textContent.
  • Modificar estilos: Accede a la propiedad element.style.
  • Crear elementos: Usa document.createElement().
  • Añadir elementos: Usa parentElement.appendChild(newElement).
  • Eliminar elementos: Usa parentElement.removeChild(existingElement).
Advertencia

innerHTML analiza su string como HTML, por lo que insertar contenido no confiable abre una vulnerabilidad XSS. Usa textContent siempre que insertes texto plano: es más seguro y más rápido.

Consulta Manipulación del DOM y Trabajar con estilos en el DOM para una cobertura más detallada.

Manejo de eventos en JavaScript

Un evento es algo que ocurre en la página: un clic, una pulsación de tecla, el envío de un formulario o la finalización de la carga de la página. JavaScript puede registrar un listener que ejecuta una función cada vez que un evento determinado se dispara en un elemento concreto.

Sintaxis del listener de eventos

element.addEventListener('event', functionToCall);

El primer argumento es el nombre del evento (sin prefijo on — es 'click', no 'onclick'). El segundo es el handler, la función que el navegador llama cuando ocurre el evento.

Eventos clave

  • Eventos de clic: Se disparan con los clics del usuario.
  • Eventos de carga: Se activan cuando los recursos han cargado.
  • Eventos de entrada: Ocurren cuando el usuario interactúa con campos de formulario.

Ejemplo de manejo de eventos

<!DOCTYPE html>
<html>
<head>
    <title>Event Handling</title>
</head>
<body>
    <button id="clickMe">Click Me</button>
    <script>
        document.getElementById('clickMe').addEventListener('click', function() {
            alert('Button Clicked!');
        });
    </script>
</body>
</html>
Pruébalo tú mismo »

Para una visión más amplia del modelo de eventos — propagación, el objeto de evento y la eliminación de listeners — lee Introducción a los eventos del navegador y Manejo de eventos en el DOM.

Manipulaciones avanzadas del DOM

Más allá de las ediciones básicas, JavaScript permite operaciones más complejas como clonar nodos, manejar formularios y alternar clases CSS.

Técnicas

  • Clonación de nodos — element.cloneNode(true) copia un elemento y sus descendientes (false copia solo el elemento en sí).
  • Manejo de formularios — lee input.value, reacciona al evento submit y valida antes de enviar.
  • Manipulación de clases CSS — element.classList.add(), .remove() y .toggle() son más limpios que sobrescribir className.

La API classList es la forma idiomática de activar y desactivar estilos. Este fragmento ejecutable muestra la lógica que sigue toggle:

// classList.toggle removes a class if present, adds it if absent.
// Here we model that behaviour with a plain Set to show the result.
const classes = new Set(['box']);

function toggle(name) {
  if (classes.has(name)) {
    classes.delete(name);
  } else {
    classes.add(name);
  }
  return classes.has(name);
}

console.log(toggle('active')); // true  (added)
console.log(toggle('active')); // false (removed)
console.log([...classes]);     // [ 'box' ]

JavaScript y el DOM: Buenas prácticas

Para usar el DOM de forma eficiente, ten en cuenta lo siguiente:

  • Minimiza el acceso al DOM. Leer y escribir el DOM es mucho más lento que trabajar con valores de JavaScript. Guarda referencias en variables y agrupa tus cambios en lugar de tocar el DOM en un bucle cerrado.
  • Usa delegación de eventos. En lugar de un listener por cada hijo, adjunta un único listener al elemento padre e inspecciona event.target. Esto gestiona automáticamente los hijos añadidos dinámicamente y consume menos memoria.
  • Entiende reflow y repaint. Un reflow recalcula el layout; un repaint redibuja los píxeles. Ambos son costosos, así que agrupa las escrituras de estilos y prefiere DocumentFragment para inserciones masivas. Consulta Optimización del rendimiento del DOM.

Ejemplo de delegación de eventos

En lugar de asociar un handler a cada <li>, asocia uno a la lista y lee qué elemento fue clicado:

document.getElementById('list').addEventListener('click', function (event) {
  // event.target is the actual element the user clicked.
  if (event.target.tagName === 'LI') {
    console.log('You clicked:', event.target.textContent);
  }
});

JavaScript y el DOM: Ejemplos de código

Cambiar contenido

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <div id="content">Original Content</div>
    <script>
        document.getElementById('content').innerHTML = 'Updated Content';
    </script>
</body>
</html>
Pruébalo tú mismo »

Añadir nuevos elementos

<!DOCTYPE html>
<html>
<head>
    <title>Add Elements</title>
</head>
<body>
    <div id="container"></div>
    <script>
        var newElement = document.createElement('p');
        newElement.textContent = 'New Paragraph';
        document.getElementById('container').appendChild(newElement);
    </script>
</body>
</html>
Pruébalo tú mismo »

Recuerda que dominar JavaScript y el DOM es un proceso de aprendizaje continuo. Sigue experimentando, construyendo y perfeccionando tus habilidades para convertirte en un desarrollador JavaScript competente.

Práctica

Práctica
¿Cuál es el papel de JavaScript con el Document Object Model (DOM)?
¿Cuál es el papel de JavaScript con el Document Object Model (DOM)?
Was this page helpful?