¿Qué es el DOM (Document Object Model) en una página web?

¿Sabes lo importante que es entender el DOM y su lugar en la programación web?Esto es importante porque conocer sus propiedades, métodos y eventos es esencial para construir un sitio web correctamente. Simplemente diga “Hola mundo” en el cuerpo del documento cada vez que su programa interactúe con su programa. El modelo de documento creado por los navegadores web según el modelo OOP (Programación Orientada a Objetos) se denomina DOM. Contiene API que le permiten modificar la estructura, el comportamiento, el estilo y el contenido de los documentos HTML o XML.

Estructura del DOM

El objeto #document, nombre que se le asigna al objeto raíz de una web, encierra en su interior todo el contenido que estás visualizando en el navegador incluyendo una representación en tiempo real del DOM. Para acceder a este objeto basta con escribir la palabra document en la consola del navegador, otra forma de verlo es acceder a las herramientas para desarrolladores de tu ordenador Ctrl+Shift+i y desde la pestaña ¨Elements¨ se ve.

El DOM puede ser representado de manera gráfica lo que facilita su entendimiento. Veamos un ejemplo.

<!DOCTYPE HTML>
<html>
<head>
  <title>El DOM</title>
  <!--My comentario -->
</head>
<body>
 Aprendiendo lo que es el DOM.

</body>
</html>

Representación estructural del DOM

Esta simple representación es suficiente para cubrir todas las combinaciones estructurales posibles. La ventaja es que se puede acceder a cada elemento o botón a través de la interfaz disponible. Este es un estándar internacional. Básicamente, el DOM tiene elementos reconocibles. Los elementos DOM provienen de la estructura HTML y se pueden anidar jerárquicamente.

Tipos de elementos

  1. document – el “punto de entrada” en el DOM.
  2. nodos de elementos – Etiquetas-HTML, los bloques de construcción del árbol.
  3. nodos de texto – contienen texto.
  4. comentarios – a veces podemos colocar información allí, no se mostrará, pero JS puede leerla desde el DOM.
  5. Otros (actualmente hay doce pero son menos utilizados).

Interfáz del DOM

Una interfaz es una aplicación de alto nivel que permite el entendimiento entre hombre-ordenador. En el caso del DOM nos va a permitir total control sobre él mismo mediante eventos, selectores, modificadores y métodos en general, estos interactúan directamente en él. Por ejemplo, el método document.getElementsByTagName('body') nos devuelve una colección de elementos y propiedades del cuerpo de la página, los cuales pueden ser accedidos y modificados usando JS. El eventoDOMContentLoadedd es un evento especifico del DOM y el mismo es disparado cuando todos los elementos del mismo han sido tokenizados (convertidos en etiquetas HTML), aún no se encuentran en su lugar, pero si están listos para ser accedidos y reconocidos por los estilos CSS y el JS. Otro ejemplo de operaciones mediante la interfaz del DOM es la posibilidad de cambiar el estilos de los elementos directamente sobre estos, la instrucción document.body.style.color="red" establece el color rojo para los textos dentro de la etiqueta <body> en una página web.

Conclusión
Si eres nuevo en la programación y ya tienes experiencia en HTML, CSS y JS, mi consejo es que entiendas todo sobre el DOM. Esto se debe a su importancia y su impacto en el buen uso de las aplicaciones web. Comprenderlo es como poder inspeccionar cada parte del esqueleto con una radiografía y optimizar cada detalle de la estructura. Lo que debe comprender es que los fundamentos y las herramientas para modificar aplicaciones web están estrechamente vinculados al DOM. Es importante saber que cada elemento Node tiene su propia interfaz con métodos y propiedades para facilitar su trabajo. Este es el caso de otros tipos de botones. En términos no técnicos, usando JS y finalmente diseñando usando CSS, se accede a las subsecciones a través de métodos proporcionados por esa interfaz (HTMLcolecciones, NodeList, DOMTokenList, Elemento, Funciones, propiedades y atributos).

Con ayuda de :https://www.elitecnologica.com/que-es-el-dom-document-object-model-en-una-pagina-web/

2 respuestas a «¿Qué es el DOM (Document Object Model) en una página web?»

Deja una respuesta

Tu dirección de correo electrónico no será publicada.