Document Object Model para niños
El Document Object Model o DOM (que significa 'Modelo de Objetos del Documento') es como un mapa o un plano especial para los documentos de la web, como las páginas HTML que ves en tu navegador. Imagina que una página web es un edificio; el DOM es el plano que muestra dónde está cada pared, cada ventana y cada puerta.
Este "mapa" permite que los programas de computadora, como los que usan JavaScript, puedan "leer" y "cambiar" lo que hay en una página web. Pueden, por ejemplo, añadir texto nuevo, cambiar el color de un botón o hacer que algo se mueva cuando haces clic. El DOM es una herramienta muy importante para crear páginas web interactivas y dinámicas.
El World Wide Web Consortium (W3C), una organización que crea estándares para la web, es la encargada de asegurarse de que el DOM funcione de la misma manera en todos los navegadores y programas.
Contenido
¿Cómo surgió el DOM?
El DOM empezó a desarrollarse en la década de 1990, cuando las páginas web empezaron a ser más populares. Al principio, los navegadores como Netscape Navigator querían que las páginas fueran más interactivas. Para lograrlo, crearon una forma de que JavaScript pudiera interactuar con el contenido de la página. A esta primera versión se le llamó DOM Nivel 0.
En esos años, diferentes navegadores web, como Netscape Navigator y Internet Explorer, tenían sus propias formas de hacer que las páginas fueran dinámicas (lo que se conocía como HTML dinámico o DHTML). Esto significaba que los creadores de páginas web tenían que hacer versiones diferentes de sus sitios para que funcionaran bien en cada navegador. ¡Era un trabajo muy complicado!
Para solucionar este problema, el W3C decidió crear un estándar, es decir, una forma única y oficial de cómo debía funcionar el DOM. Así, los desarrolladores solo tendrían que escribir el código una vez y funcionaría en cualquier navegador que siguiera ese estándar. Esto fue un gran avance y ayudó a que la web fuera más fácil de usar y desarrollar.
Con el tiempo, el DOM ha seguido evolucionando. Hoy en día, el DOM (nivel 4) es una parte fundamental del estándar HTML 5, que es la versión más reciente del lenguaje para crear páginas web. Gracias a esta estandarización, los problemas de compatibilidad entre navegadores son mucho menores.
¿Qué son los objetos y sus propiedades en el DOM?
En el mundo de la programación, un "objeto" es como una cosa que tiene características y puede hacer acciones. Piensa en un objeto de la vida real, como una bicicleta. Una bicicleta tiene propiedades (características) como su color, su tamaño o el número de ruedas. También puede hacer acciones, como "avanzar" o "frenar".
En una página web, cada parte es un objeto para el DOM: un párrafo, una imagen, un botón, o incluso la página entera. Cada uno de estos objetos tiene sus propias propiedades. Por ejemplo, un objeto "botón" puede tener propiedades como su texto, su color o su tamaño.
Los programadores pueden cambiar estas propiedades usando código. Por ejemplo, si tienes un botón llamado "miBoton", podrías cambiar su color a azul con una línea de código como esta:
miBoton.color = "azul";Además de propiedades, los objetos también tienen "funciones" (o métodos), que son como las acciones que pueden realizar. Por ejemplo, un objeto "imagen" podría tener una función para "ocultarse" o "mostrarse". Los programadores también pueden crear sus propias funciones para que los objetos hagan cosas específicas.
¿Cómo funcionan los eventos en el DOM?
Un "evento" en el DOM es algo que ocurre en la página web, generalmente por la interacción del usuario. Por ejemplo, cuando haces clic en un botón, mueves el ratón, escribes en un teclado o cuando la página termina de cargarse, ¡todo eso son eventos!
Cuando ocurre un evento, la página web puede "reaccionar". Para que esto suceda, los programadores usan algo llamado "manejadores de eventos" (o event handlers). Estos son como pequeños programas que están "escuchando" lo que pasa en la página y, cuando detectan un evento específico, hacen que algo suceda.
Por ejemplo, si quieres que un mensaje aparezca cuando alguien haga clic en un botón, puedes decirle al DOM: "Cuando el usuario haga clic en este botón, ejecuta esta función".
Una forma común de añadir un manejador de eventos en JavaScript es así:
objeto.addEventListener("nombreDelEvento", funcionARealizar);
//Por ejemplo:
document.getElementById("miBoton").addEventListener("click", mostrarMensaje);En este ejemplo, cuando se hace "clic" en el elemento con el ID "miBoton", se ejecutará la función llamada "mostrarMensaje".
Los eventos tienen un camino que siguen dentro del DOM. Imagina que un clic en un botón es como una onda que se propaga. Primero, la onda va desde la ventana del navegador hacia el elemento específico donde ocurrió el clic (esto se llama etapa de "captura"). Luego, llega al elemento exacto (etapa de "blanco"). Finalmente, la onda "regresa" desde ese elemento hacia la ventana (etapa de "burbujeo"). Los programadores pueden elegir en qué momento de este camino quieren que se active su función.
Galería de imágenes
-
Jerarquía de DOM.
Véase también
En inglés: Document Object Model Facts for Kids
