Tabla de contenidos
El Modelo de objetos de documento, DOM para abreviar, hace que las estructuras de los documentos HTML y XML sean accesibles para los desarrolladores de una manera estandarizada. Existe una interfaz uniforme a través de la cual se puede manipular el contenido de estos documentos.
Es un estándar de desarrollo web. DOM proporciona una interfaz uniforme para que los programadores accedan a la estructura de una página web, independientemente del lenguaje de programación o plataforma.
Todos los elementos de un documento HTML se asignan en una estructura de árbol, lo que los hace accesibles para los desarrolladores de manera uniforme. DOM también puede hacer que las estructuras de un documento XML sean legibles y manipulables de la misma manera.
¿Por qué se inventó DOM?
Al principio, los sitios web aún eran estáticos. Se definió una estructura usando HTML, en la cual se debería organizar el contenido. Esta estructura era inmutable, por lo que no podía acceder a los elementos de la página después y cambiarlos, por ejemplo, resaltar u ocultar bajo ciertas condiciones.
Un documento de página web era esencialmente poco más que texto con instrucciones sobre cómo debería formatearse cuando se visualiza en un navegador. Luego, la tecnología evolucionó y los sitios web se volvieron dinámicos. El lenguaje de secuencias de comandos JavaScript, por ejemplo, permitió que el documento que alguna vez fue estático de un sitio web se cambiara en tiempo de ejecución.
Hoy en día es bastante normal que las secciones individuales de un sitio web puedan cambiar en cualquier momento, por ejemplo, recargando contenido o reaccionando a la entrada del usuario. Incluso las aplicaciones complejas, como el software de contabilidad, se pueden mostrar en el navegador. Esto requiere que los desarrolladores puedan acceder de manera precisa y confiable a los elementos que componen el sitio web.
Después de todo, estos elementos deben manipularse para poder cambiar algo después de que se haya cargado una página web. Al principio todavía era complicado controlar las diversas tecnologías en todos los navegadores de tal manera que siempre entregaran el resultado deseado. Por lo tanto, en 1998, el World Wide Web Consortium (W3C) creó el primer borrador del DOM, una interfaz de programación universal para documentos HTML y XML.
¿Cómo se estructura un árbol DOM?
DOM hace marcado, por ejemplo, HTML o XML, una estructura de árbol, el árbol DOM. En este árbol, todos los elementos del documento se almacenan en forma jerárquica como nodos, por ejemplo, todas las etiquetas HTML de un documento HTML. De esta manera, no solo se representan los elementos individuales, sino también su relación entre sí.
Es una ocurrencia regular en documentos HTML y XML que algunos elementos estén subordinados a otros componentes. En muchos casos, cuando el desarrollador accede al elemento principal, también desea afectar toda la información secundaria. Por lo tanto, es esencial que se mantenga este orden jerárquico.
En un documento HTML, la estructura básica se ve así:
- La raíz del árbol es la etiqueta HTML, porque un documento HTML comienza con ella.
- Al menos los dos nodos HEAD y BODY se ramifican desde la raíz.
- Información como el título del documento, metainformación o componentes integrados como scripts u hojas de estilo están subordinados al nodo HEAD.
- Todos los nodos que reflejan el contenido de la página, por ejemplo, varios encabezados, párrafos o contenedores.
Para un documento XML, el DOM proporciona una representación de la estructura de árbol XML. También se puede utilizar para leer, procesar, eliminar, crear y manipular elementos XML.
¿Cómo se usa DOM hoy?
El objetivo principal sigue siendo para lo que se creó originalmente el DOM, es decir, como una interfaz de programación para la visualización uniforme de sitios web. Los navegadores usan DOM, por ejemplo, para mostrar el contenido de una página web renderizada de acuerdo con el estándar actual.
Entonces, un desarrollador puede crear una página web y asumir que cualquier navegador que entienda correctamente el DOM puede mostrar los elementos como desee. Además, puedes confiar en el hecho de que tienes acceso a los componentes individuales del documento a través del DOM cuando el sitio web está en funcionamiento, por ejemplo, para adaptar la información mostrada visualmente o en términos de contenido, para eliminar elementos que ya no son necesarios o para agregar elementos completamente nuevos en un punto predeterminado.
¿Qué es Shadow DOM?
En 2012, W3C introdujo el Shadow DOM como una de las partes fundamentales de los Componentes Web. Los navegadores modernos tratan estas construcciones como DOM tradicional. La característica especial es que Shadow DOM no es accesible para todo el proyecto, sino que solo se puede manipular en un contexto previamente definido, por ejemplo, solo dentro de cierto componente.
Los proyectos web cada vez más complejos con más y más componentes deberían volverse más robustos. Puedes aislar mejor los elementos individuales y programarlos independientemente del resto del sitio web. Entre otras cosas, Shadow DOM se puede usar para evitar el acceso no intencional a un componente. El acceso desde el exterior se puede permitir o prohibir deliberadamente.