¿QUÉ ES EL DOM Y POR QUÉ ES FUNDAMENTAL EN JAVASCRIPT?

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.