Resumen: qué es el DOM
- El DOM (Document Object Model) es la representación viva y estructurada que el navegador hace de una página web, en forma de árbol de objetos que JavaScript puede leer y modificar.
- Por defecto, cada script que carga tu página (paquetes propios, gestores de etiquetas, analítica, chat, ad-tech) tiene acceso completo de lectura y escritura al mismo DOM. Por eso un script de terceros comprometido puede leer un formulario de login o un campo de checkout.
- La seguridad client-side monitoriza lo que los scripts realmente hacen con el DOM en sesiones reales de usuarios, que es el único lugar donde se puede validar de verdad el inventario de scripts de PCI DSS 4.0.1 §6.4.3 y la detección de manipulaciones de §11.6.1.
Al construir un sitio web, a menudo te encontrarás con el término DOM, que significa Document Object Model (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, donde cada nodo corresponde a un elemento HTML (como una etiqueta de encabezado, un párrafo o un enlace). Esto permite el acceso programático para navegar y modificar el contenido de una página de forma dinámica.
¿Qué es el DOM?
Cuando tu navegador carga el código HTML, lo analiza y construye un árbol de objetos formado por los elementos de 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 es una API estandarizada para el contenido HTML. Si un programa necesita actualizar el contenido de tu página, interactuaría con el DOM.
El DOM en sí es neutral respecto al lenguaje. No forma parte de JavaScript, aunque JavaScript resulta ser la mejor manera de interactuar con él.
Míralo en tu propio sitio
Si te importa lo que realmente se ejecuta en el navegador (no solo lo que envió tu servidor), necesitas visibilidad sobre cada mutación del DOM que hacen tus scripts de terceros. cside monitoriza el comportamiento de los scripts client-side en cada sesión de visitante en tiempo real. El nivel gratuito cubre lo básico.
El DOM entre bastidores
Cuando un navegador carga un sitio web, el HTML se analiza en un árbol DOM y el CSS en el CSSOM (CSS Object Model), que representa todas las reglas de estilo de tus objetos. Una vez completado, el navegador combina el DOM y el CSSOM para determinar cómo deben verse los nodos, dónde deben aparecer, y su posición y tamaño exactos.
El DOM es una estructura viva y dinámica, por lo que JavaScript y otro código pueden cambiar los nodos después de que la página se ha cargado. El sitio se actualiza al instante, sin necesidad de recargar.
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 del DOM, puedes realizar diversas acciones para hacer que una página estática sea más dinámica e interactiva. Algunas de ellas son:
- Seleccionar elementos con `document.getElementById`, que devuelve el botón o elemento correspondiente a ese ID
- Leer o modificar contenido de una página cambiando `element.textContent` o `element.innerHTML`.
- Aplicar o alterar dinámicamente el CSS de un elemento cambiando las propiedades de estilo (por ejemplo, haciendo `element.style.backgroundColor = “yellow”` para poner algo en amarillo)
- Añadir o eliminar elementos de una página con `document.createElement` o `element.removeChild`
Por qué importa el DOM
Sin el DOM, los sitios web dinámicos no serían posibles. Permite que todo, desde un script sencillo hasta una aplicación compleja, lea y cambie el contenido de la página, y es la principal interfaz entre HTML y JavaScript.
