¿Qué es el DOM?
Contenido del curso
¿Qué es el DOM?
Contenido del curso
Fernando Quinteros Gutierrez
Andrés Felipe Lopez gomez
Andrés Felipe García Rendón
David Daniel Castillo Nava
Jimmy Buriticá Londoño
Giselle Desiree Boyer Jimenez
Aylin Fernanda Yepez Granados
Carlos Eduardo Gomez García
Andrés González
Helmuth Vásquez Baeza
Marcelo Arias
Profesor
Juan Vásquez
Jonathan 🦑 Alvarez
Profesor
Edgar Lopez Arroyo
Omar García Betanzos
Cristian Caraballo
Rolando Mamani Salas
Ismael Grimaldo Vega
fermin martin
Rolando Mamani Salas
JOSE PABLO MENDOZA JIMENEZ
Irving Juárez
José Antonio Zegarra Medina
Andrés D Amelio
Omar García Betanzos
Deyvi Granados Mandarachi
Jonathan 🦑 Alvarez
Profesor
Kevin Anzola
Jonathan David Olivos
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
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
Excelente resumen
Gracias por compartir tus apuntes, Saludos.
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.
Bien por las definiciones.
Gracias por la definición del CSSOM, hizo falta en el curso
Hola...! Aquí les dejo un resumen del curso
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
¿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/
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
🌳 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.
50 minutos de lanzado el curso y ya hay una persona que lo ha pasado 😅😅😅😅😅
También me sorprendió mucho. mind=blow :D
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
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.
Otro curso de Jonathan!! Siiiiii 🙌
Mi primera ves con este profesor
Esperé ansiosamente por este curso. Gracias team Platzi, gracias Jonathan
😃Me encanta cuando habla en femenino!!
XD
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í:
https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path
¿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
📌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.
¿Qué es el DOM?
Todos los navegadores lo usan para trabajar y renderizar una pagina web. Todo comienza con un proceso conocido como Critical Rendering Path, el cual es un proceso que hacen todos los navegadores para que todo nuestro código HTML, CSS y Javascript se conviertan en pixeles en la pantalla de los usuarios. En este paso el navegador crea dos arboles, el primero de ellos DOM (Document Object Model) y el segundo CSSOM, se les dice árbol porque esa es la estructura de datos que reprenta, donde cada elemento es un nodo. El DOM esta compuesto por nodo, donde cada nodo son etiquetas HTML, y el CSSOM trabaja con el arbol de estilos.
Por tanto, tenemos los siguientes puntos
DOM
Pasar los cursos recién lanzados es el equivalente al "Primer comentario" de Youtube :smile:
Que es un NODO como concepto, como código y si se puede cono hardware. De ante mano, gracias por sus respuestas.
Hola @SirDeyvi
Un Nodo es el término que se utiliza en grafos y estructuras de datos para denotar las aristas que component el grafo.
En el caso de la web hablamos de árboles que son un tipo de grafo.
A lo largo del curso aprenderemos a crear nuevos nodos utilizando JavaScript para agregarlos al árbol (DOM) y desprender otros nodos y sub-árboles de allí!
échale un vistazo al curso de Estructuras de Datos y de Ingeniería para refrescar estos conceptos :D
00_Critical Rendering Path El Critical Rendering Path (CRP) es el proceso que un navegador web utiliza para cargar y renderizar una página web en la pantalla. El objetivo del CRP es cargar y mostrar rápidamente los elementos esenciales de la página, como el contenido principal, los estilos y los scripts, para que el usuario pueda interactuar con la página lo antes posible. El CRP consta de varios pasos que el navegador sigue para renderizar una página web. Estos pasos incluyen:
Obtener el HTML: El navegador recupera el código HTML de la página web a través de una solicitud HTTP.
Construir el DOM: El navegador crea un árbol de objetos que representa la estructura del documento HTML.
Construir el CSSOM: El navegador crea un árbol de objetos que representa la información de estilo de la página web.
Combinar el DOM y el CSSOM para crear el render tree: El navegador combina el árbol de objetos del DOM y el CSSOM para crear un árbol de objetos que representa la página tal como aparecerá en la pantalla.
Realizar el layout: El navegador determina la posición y el tamaño de cada elemento en el render tree.
Pintar la página: El navegador dibuja los elementos de la página en la pantalla.
El objetivo de optimizar el CRP es asegurarse de que los elementos críticos se carguen y se rendericen lo más rápido posible. Esto se puede lograr mediante la optimización del código HTML, el uso eficiente de CSS y JavaScript, la reducción del tamaño de las imágenes y la eliminación de bloqueos de recursos. Al hacerlo, se puede mejorar la velocidad de carga y la experiencia del usuario.
Notes
What is the DOM?
Critical Rendering Path
The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), render tree and layout.
DOM (Document Object Model)
The DOM (Document Object Model) is an API that represents and interacts with any HTML or XML document. The DOM is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g. an element, text string, or comment).
The DOM is one of the most-used APIs on the Web because it allows code running in a browser to access and interact with every node in the document. Nodes can be created, moved and changed. Event listeners can be added to nodes and triggered on occurrence of a given event.
CSSOM (CSS Object Model)
The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.
