javascript
  2 min. de lectura (aproximado)

¿Qué es el dom y por qué es fundamental en JavaScript?

(2 min. de lectura) El DOM (Document Object Model) representa la estructura de una página web como un árbol de objetos que JavaScript puede leer, modificar y manipular en tiempo real. DOM es la forma en que JavaScript ve y controla el HTML Cuando un navegador carga una página web, toma el código HTML y lo convierte en una estructura jerárquica de objetos llamada DOM.

<html>
  <bodyl>
<h1>Título</h1l>
<pl>Texto</pl>
<buttonl>Clickl</buttonl>
  </bodyl>
</htmll>
//Se transforma en un árbol como este:
document
· html
  · body
  · h1
  · p
  · button

¿Para qué sirve el DOM?

El DOM permite que las páginas web sean interactivas y se puede:
  • Cambiar texto de forma dinámica
  • Agregar o eliminar elementos HTML
  • Escuchar eventos del usuario (clicks, teclas, scrolls, etc.)
  • Modificar estilos CSS en tiempo real
  • Crear interfaces modernas y reactivas
DOM es el puente entre el HTML (estructura) y JavaScript (lógica).

Métodos más usados para manipular el DOM

Los más importantes son:
    querySelector() y querySelectorAll() El método más versátil y recomendado actualmente. Permite seleccionar elementos usando selectores CSS.
  • getElementById: Selecciona un elemento por su ID (muy rápido).
  • innerHTML: Permite leer o modificar el contenido HTML interno de un elemento.
  • textContent: Ideal para cambiar solo el texto plano (más seguro que innerHTML cuando no se necesita HTML).
  • classList: Permite agregar, eliminar o alternar clases CSS fácilmente:.

    elemento.classList.add('active');
elemento.classList.remove('active');
elemento.classList.toggle('active');
  • createElement: Crea nuevos elementos HTML desde JavaScript.

Consejos

  • Es mejor querySelector que métodos antiguos como "getElementsByClassName()".
  • Evitar modificar el DOM excesivamente en bucles ya que afecta el rendimiento. Es mejor hacer cambios en memoria y luego actualizar el DOM una sola vez.
  • Usar event delegation cuando hayan muchos elementos dinámicos.
  • Mantener el código organizado y separar la lógica de manipulación del DOM cuando sea posible.