¿Qué es el DOM?

Clase 3 de 29 • Curso de Manipulación del DOM

Clase anteriorSiguiente clase

Fernando Quinteros Gutierrez

student•

Ideas/conceptos claves

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

El CSSOM es el arbol para el CSS

Apuntes

Todos los navegadores los utilizan para trabajar en un sitio web
Todo comienza con el proceso llamado "Critical Rendering Path"
- Se puede dividir en 5 partes
- A lo largo del proceso el navegador crea dos arboles
  - DOM
    - Es una representación del HTML
    - Estructura en forma de árbol de nodos
    - Es un modelo que puede ser modificado
  - CSSOM

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 sera aquel que se encargará de tener todo nuestro contenido en una representación de arbol que contendrá nodos

Andrés Felipe Lopez gomez

student•

Excelente resumen

Andrés Felipe García Rendón

student•

Gracias por compartir tus apuntes, Saludos.

David Daniel Castillo Nava

student•

DOM(Document Object Model): no es mas que un árbol de nodos en el cual esta representado cada una de las etiquetas HTML que nosotros colocamos en nuestro proyecto.
CSSOM(CSS Object Model): es un conjunto de APIs que permite manipular CSS desde JavaScript. Así como el DOM (Document Object Model) es para HTML, el CSSOM (CSS Object Model) es para CSS. Permite leer y modificar el estilo de CSS de forma dinámica.
Para llegar al dom y cssom ocurre un proceso que se llama El Camino Crítico de Renderización(Critical Rendering Path) es la secuencia de pasos que el navegador realiza para convertir el HTML, CSS y JavaScript en píxeles en la pantalla.

Jimmy Buriticá Londoño

student•

Bien por las definiciones.

Giselle Desiree Boyer Jimenez

student•

Gracias por la definición del CSSOM, hizo falta en el curso

Aylin Fernanda Yepez Granados

student•

Hola...! Aquí les dejo un resumen del curso

Carlos Eduardo Gomez García

teacher•

DOM: Document Object Model . Inicia en el Critical Rendering Path, es un proceso que el navegador hace para traducir todo el código HTML, CSS y JavaScript a cosas que el usuario pueda ver. . Esto genera 2 árboles, se les llama así porque es la estructura de datos que representan:

DOM: Árbol que representa al HTML

. CSSOM: Árbol CSS (CSS Object Model)

Andrés González

student•

¿Qué sucede por detrás cuando Google Chrome renderiza nuestra página? Aquí un excelente gráfico sacado de Chrome Developers https://developer.chrome.com/blog/renderingng-architecture/

Helmuth Vásquez Baeza

student•

Este es el proceso de un Critical Render Path (CRP) o Ruta de acceso de representación crítica:

Conversión
Tokenización
Lexing
Construcción del DOM

Fuente: https://vanessamarely.medium.com/crp-critical-render-path-o-ruta-de-acceso-de-representaci%C3%B3n-cr%C3%ADtica-1f2ca78d2645

Marcelo Arias

teacher•

🌳 DOM: Árbol para HTML -> Permite acceder y modificar las etiquetas <head>, <p>, <footer>, etc.

🎨 CSSOM: Árbol para CSS -> Permite acceder y modificar estilos CSS.

💻 BOM: Árbol para navegador. Permite acceder y modificar las propiedades de las ventanas del propio navegador.

🔩 Critical Rendering Path (CRP): Ruta de instrucciones que el navegador ejecuta para convertir HTML, CSS y JavaScript en píxeles.

Juan Vásquez

student•

50 minutos de lanzado el curso y ya hay una persona que lo ha pasado 😅😅😅😅😅

Jonathan 🦑 Alvarez

teacher•

También me sorprendió mucho. mind=blow :D

Edgar Lopez Arroyo

student•

Probablemente ya lo sabia todo y paso directo al examen. Yo lo hice una vez en un curso de álgebra solo para probar como andaba, si lo pase pero también tome con calma el curso. :D

Omar García Betanzos

student•

El DOM es un concepto maravilloso de todos los navegadores utilizan para renderizar y trabajar sobre una pagina web. . Primero. Todo empieza en proceso conocido como el Critical Rendering Path, este es un proceso que los navegadores hacen para que todo el código se convierta en pixeles en la pantalla de nuestros usuarios. . Segundo. Como parte de ese proceso el navegador crea dos arboles: uno llamado DOM (Document Object Model) corresponde al árbol de HTML y el CSSOM (CSS Object Model) por su parte corresponde al árbol para el CSS. . DOM :arrow_forward: Es una representación del HTML. :arrow_forward: Estructura en forma de árbol de nodos. :arrow_forward: Es un modelo que puede ser modificado.

Cristian Caraballo

student•

Otro curso de Jonathan!! Siiiiii 🙌

Rolando Mamani Salas

student•

Mi primera ves con este profesor

Ismael Grimaldo Vega

student•

Esperé ansiosamente por este curso. Gracias team Platzi, gracias Jonathan

fermin martin

student•

😃Me encanta cuando habla en femenino!!

Rolando Mamani Salas

student•

JOSE PABLO MENDOZA JIMENEZ

student•

Critical Rendering Path: Proceso para que el código se convierta en pixeles en la pantalla de nuestros usuarios. Critical Rendering Path: -DOM: Document Object Model, representación de html -CSSOM: CSS Object Model

De acuerdo con la documentacion sobre el CRP, el proceso es masomenos así:

El navegador hace una petición del HTML
El servidor nos contesta con un HTML.
El navegador parsea el HTML, convirtiendo los bytes recibidos en el árbol DOM.
El navegador hace peticiones cada que encuentra referencias a recursos externos como imágenes, scripts, hojas de estilo.
Repite el proceso para construir el CSSOM. 6.Finalmente construye el Render tree con el cuál se podrá visualizar nuestra web en la pantalla

https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path

Irving Juárez

student•

¿Cómo acceder al DOM desde JS?

Como el DOM es el Modelo de Objeto del Documento, nosotros podemos acceder a el con document, así que si queremos acceder a el body, solo hacemos document.body

José Antonio Zegarra Medina

student•

📌Critical Rendering Path es un proceso que corre el navegador, mediante el cual el HTML, CSS y JS se convierten en pixeles que se pintan en pantalla. 📌Durante el Critical Rendering Path* se crean los arboles de estrutura HTML y de estilos CSS: Document Object Model (DOM) y el CSS Object Model(CSSOM), respectivamente.