¿Qué es el DOM?

Clase 2 de 15 • Curso de Automatización de Pruebas con Puppeteer

Jorge Luis Bojorges Leyva

student•

El DOM (Document Object Model en español Modelo de Objetos del Documento) es una interfaz/modelo de documento.

Se representa el documento como un árbol de nodos, en donde cada nodo representa una parte del documento (puede tratarse de un elemento, una cadena de texto o un comentario).

Los nodos tienen jerarquía
Estos nodos pueden crearse, moverse o modificarse. -La mejor forma de visualizar los elementos es con las herramientas para desarrolladores de los navegadores. -Inspeccionar te permite incluso seleccionar un elemento en específico.

Javier Fuentes Mora

teacher•

Muchas gracias por el aporte!

Jorge Emilio Granados Guzmán

student•

PHYTON NO

Brayan Torrealba Sáez

student•

Llamamos DOM a la anidación de etiquetas que utilizamos en el documento HTML.

Llamamos CSSOM al árbol de etiquetas que utilizamos en el documento CSS.

Diego Javier Mena Amado

student•

Falto el Accessibility tree o árbol de accesibilidad, que basado en el DOM contiene objetos que representan todos los elementos del sitio web y sus atributos.

Paul urbina

student•

Con velocidad 1.25x, perfecto!

Wilber Peñaloza Mendoza

student•

te quedaste corto, a 1.5x, excelente!

Diego Solis C.

student•

El DOM (Document Object Model) es una interfaz que permite a los lenguajes de programación como JavaScript interactuar con las paginas web.

--> Funcionamiento:

Cuando un navegador carga una página, convierte el código HTML en el DOM.
Este DOM puede ser manipulado dinámicamente con JavaScript para cambiar contenido, estilos, o comportamientos de la pagina sin necesidad de recargarla.

-->Estructura:

Nodo Raíz: Todo comienza con el objeto document, que representa a la pagina web.
Nodos: Cada elemento HTML (Como <div>, <h2>) es un nodo.
Relaciones: Los nodos están conectados como en un árbol:

Padres e Hijos: Un <div> puede tener hijos como <p> o <img>.

Hermanos: Nodos en el mismo nivel, como varios <li> dentro de <ul>.

-->Interacción con el DOM: Con JavaScript, puedes hacer cosas como:

Seleccionar elementos: Usar metodos como document.querySelector o getElementByid.
Cambiar contenido: Modificar texto como innerText o innerHTML.
Cambiar estilos: Alterar el estilo con style.
Escuchar eventos: Responder a interacciones del usuario (clics, teclas, etc.)

Mario Alexander Vargas Celis

student•

DOM significa Document Object Model, en español sería Modelo de Objetos del Documento. Es una interfaz de programación que nos permite crear, cambiar, o remover elementos del documento. También podemos agregar eventos a esos elementos para hacer más dinámica nuestra página

Brayan Torrealba Sáez

student•

DOM significan Document Object Model, o estructura del documento HTML.

Una página HTML está formada por múltiples etiquetas HTML, anidadas una dentro de otra, formando un árbol de etiquetas relacionadas entre sí, es a esto lo que llamamos árbol DOM (o simplemente DOM).

Santiago Ahumada Lozano

student•

Una pregunta: puedo extraer esa estructura de arbol del DOM en lugar del contenido?

Jesus Cuadro

student•

DOM

Modelo de objetos del documento o Document Object Model es la forma en que el navegador por dentro estructura las etiquetas HTML para lograr manipularlas en JS. . El botón es un event listener. . Una página HTML está formada por múltiples etiquetas HTML, anidadas una dentro de otra, formando un árbol de etiquetas relacionadas entre sí, que se denomina árbol DOM (o simplemente DOM). . En resumen el DOM es: . Una representación del HTML . Estructura en forma de árbol de nodos . Un modelo que puede ser modificado .

Critical Rendering Path (Camino Crítico de Renderización):

. Todo comienza desde el Critical Rendering Path. . Es el proceso que se encarga de convertir en pixeles el HTML, CSS y JS. . El DOM arbol para el HTML que contiene toda nuestra estructura HTML .

Estructura en forma de árbol de nodos
Es un modelo que puede ser modificado . El CSSOM es el arbol para el CSS .

RESUMEN: Para mostrar un sitio hay un proceso llamado Critical Render Path en él se crean dos árboles el DOM y el CSSOM. El Dom será aquel que se encargará de tener todo nuestro contenido en una representación de árbol que contendrá nodos.

Saddy Pacheco

student•

¿Qué es el DOM? (Document Object Model) en español Modelo de Objetos del Documento.

Es una especie de Documento / modelo de documento en el se representan loa sitios web.

Saddy Pacheco

student•

¿Qué es el DOM? (Document Object Model) en español Modelo de Objetos del Documento.

Es una especie de Documento / modelo de documento en el se representan loa sitios web.

Mauricio Parada G

student•

Ya sabia que era el DOM y manipularlo por Front, pero interesante clase

¿Qué es el DOM?

Bienvenida al curso: ¿Qué vamos a aprender?

Automatización de pruebas con Puppeteer

Introducción a la Automatización WEB

¿Qué es el DOM?

Atributos y selectores

Introducción a Puppeteer

¿Qué es Puppeteer?

Configuración de nuestro ambiente

Conociendo Puppeteer

Abriendo y cerrando el navegador

Opciones de lanzamiento

Navegación con Puppeteer

Interactuando con los elementos

Esperar por los elementos

Esperando por funciones

Extrayendo información

Timeouts

Hooks

Conclusión del curso

Próximos pasos