Al construir un sitio web, a menudo encontrarás el término DOM, que significa Modelo de Objetos del Documento. El DOM es una interfaz de programación que representa una página web como un árbol estructurado de nodos, con cada nodo correlacionado con un elemento HTML (como una etiqueta de encabezado, párrafo y enlace). Esto permite acceso programático para navegar y modificar contenido en una página dinámicamente.
¿Qué es el DOM?
Cuando tu navegador carga el código HTML, lo analiza y construye un árbol de objetos hechos de elementos en la página. El elemento en la parte superior sería la raíz del árbol, y debajo encontrarías los nodos y , y dentro de ellos sus objetos hijos. El DOM a menudo se describe como una API estandarizada para contenido HTML. Si un programa necesita actualizar el contenido de tu página, se comunicaría con el DOM.
También es importante mencionar que el DOM en sí es neutral al lenguaje. No es parte de JavaScript, pero JavaScript resulta ser la mejor manera de interactuar con él.
DOM Detrás de Escena
Cuando un navegador carga un sitio web, el HTML se analiza en un árbol DOM y el CSS en el CSSOM (Modelo de Objetos CSS), que representa todas las reglas de estilo de tus objetos. Una vez completo, el navegador combina el DOM y CSSOM para determinar cómo deberían verse los nodos y dónde deberían aparecer, calculando la posición exacta y el tamaño de cada elemento DOM.
El DOM es una estructura viva y dinámica, por lo que JavaScript y otro código pueden cambiar nodos después de que se carga una página, con el sitio actualizándose instantáneamente sin necesidad de una recarga.
Interactuar con el DOM
El navegador expone el DOM a través del objeto `document`, que JavaScript puede usar para interactuar con él. Usando la API DOM, puedes realizar una variedad de acciones para hacer que una página estática sea más dinámica e interactiva. Algunas cosas incluyen:
- Seleccionar elementos haciendo `document.getElementById`, que devuelve el botón o elemento para ese ID
- Leer o modificar contenido en una página cambiando `element.textContent` o `element.innerHTML`.
- Aplicar o alterar dinámicamente el CSS para un elemento cambiando las propiedades de estilo (por ejemplo, hacer `element.style.backgroundColor = “yellow”` para establecer algo en amarillo)
- Agregar o eliminar elementos en una página haciendo `document.createElement` o `element.removeChild`
Por qué el DOM importa
¡Sin el DOM, los sitios web como los conocemos no existirían! El DOM potencia todo, desde un script web simple hasta aplicaciones complejas al permitir contenido dinámico, y verdaderamente es el puente entre HTML simple y JavaScript. Al entender qué es el DOM y cómo funciona, los desarrolladores pueden usarlo en sus propios sitios para construir funciones atractivas para sus usuarios.
