No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

DOM

19/25
Recursos

Todas p谩ginas web est谩n formadas por html,css y JavaScript e independientemente de la cantidad de cada uno de ellos, los navegadores siempre siguen el mismo proceso para conseguir tanto el contenido como la manera en que este se ha de mostrar al usuario:

  • Generar el 谩rbol DOM a partir del html.
  • Generar el CSSOM Tree a partir del css.
  • Generar el Render Tree con la combinaci贸n del DOM y 馃敻 CSSOM
  • Calcular la disposici贸n o layout de todos los nodos.
  • Pintar los nodos del Render Tree.

驴Qu茅 es el DOM?

DOM significa Document Object Model (鈥楳odelo de Objetos del Documento鈥) es una interfaz de plataforma que proporciona un conjunto est谩ndar de objetos para representar documentos HTML, XHTML, un modelo est谩ndar sobre c贸mo pueden combinarse dichos objetos, y una interfaz est谩ndar para acceder a ellos y manipularlos.

A trav茅s del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML, que es para lo que se dise帽贸 principalmente.

Es el 谩rbol de nodos que representa los contenidos de la p谩gina o aplicaci贸n web. Estos contenidos est谩n determinados por el HTML y, aunque se parezca bastante al DOM, no s贸n lo mismo. DOM es un 谩rbol que se genera con la informaci贸n de las etiquetas HTML.
Proporciona una representaci贸n estructural del documento, permitiendo la modificaci贸n de su contenido o su presentaci贸n visual.
Con JS ya podremos generar interactividad a trav茅s del DOM.

驴C贸mo se genera el 谩rbol DOM?

El DOM se genera a partir del fichero con extensi贸n .html y sigue distintos pasos para generarse:

  • Convertir los bytes a caracteres.
  • Pasar de caracteres a tokens.
  • Generar los nodos.
  • Construir el 谩rbol DOM.

En caso de que el navegador detecte un <script> no declarado como as铆ncrono en el <head> de la p谩gina, la creaci贸n del DOM ser谩 bloqueada hasta que el JavaScript sea descargado y ejecutado. Por eso es importante declarar los scripts como as铆ncronos.

Contribuci贸n creada con aportes de: Leonard L, Juan Tambo y Mayra L贸pez.

Aportes 93

Preguntas 10

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

<h3>Los pasos para hacer la transformaci贸n de HTML a DOM</h3>
  1. Transforma el c贸digo en bytes
  2. Transforma a algunos caracteres (UTF-8)
  3. Transforma a tokens (especificaci贸n W3C)
  4. Transformaci贸n a nodos (etiquetas en c铆rculo y contenido en la otra figura)
  5. Transformaci贸n a DOM (pone los elementos en un 谩rbol)

Todas p谩ginas web est谩n formadas por html, css y Javascript e independienemente de la cantidad de cada uno de ellos, los navegadores siempre siguen el mismo proceso para conseguir tanto el contenido como la manera en que 茅ste se ha de mostrar al usuario:

|
馃敻 Generar el 谩rbol DOM a partir del html.
馃敻 Generar el CSSOM Tree a partir del css.
馃敻 Generar el Render Tree con la combinaci贸n del DOM y 馃敻 CSSOM
馃敻 Calcular la disposici贸n o layout de todos los nodos.
馃敻 Pintar los nodos del Render Tree.

|

|
**El DOM **
Es el 谩rbol de nodos que representa los contenidos de la p谩gina o aplicaci贸n web. Estos contenidos est谩n determinados por el HTML y, aunque se parezca bastante al DOM, no s贸n lo mismo.

|
驴C贸mo se genera el 谩rbol DOM?
El DOM se genera a partir del fichero con extensi贸n .html y sigue distintos pasos para generarse:

|
馃敼 Convertir los bytes a car谩cteres.
馃敼 Pasar de car谩cteres a tokens.
馃敼 Generar los nodos.
馃敼 Construir el 谩rbol DOM.

|
En caso de que el navegador detecte un <script> no declarado como as铆ncrono en el <head> de la p谩gina, la creaci贸n del DOM ser谩 bloqueada hasta que el Javascript sea descargado y ejecutado. Por eso es importante declarar los scripts como as铆ncronos.

|

DOM (Document Object Model)



DOM es un 谩rbol que se genera con la informaci贸n de las etiquetas HTML.
Proporciona una representaci贸n estructural del documento, permitiendo la modificaci贸n de su contenido o su presentaci贸n visual.
Con JS ya podremos generar interactividad a trav茅s del DOM.

The Critical Rendering Path

Optimizaci贸n de la ruta de acceso de representaci贸n cr铆tica hace referencia al hecho de priorizar la representaci贸n de contenido relacionado con la acci贸n actual del usuario.

Ofrecer una experiencia web r谩pida implica una alta exigencia para el navegador. Como programadores web no podemos ver la mayor parte de este trabajo: escribimos el lenguaje de marcado y aparece una bonita p谩gina en pantalla. Pero, 驴c贸mo pasa exactamente el navegador de consumir nuestro lenguaje HTML, CSS y JavaScript a p铆xeles representados en la pantalla?

La optimizaci贸n para mejorar el rendimiento se basa en la comprensi贸n de lo que ocurre en estos pasos intermedios entre la recepci贸n de los bytes de HTML, CSS y JavaScript, y el procesamiento necesario para convertirlos en p铆xeles representados; esa es la ruta de acceso de representaci贸n cr铆tica.



Optimizando la ruta de acceso de representaci贸n cr铆tica, podemos mejorar notablemente el tiempo necesario para representar nuestras p谩ginas por primera vez. Adem谩s, comprender la ruta de acceso de representaci贸n cr铆tica tambi茅n sirve como base para crear apps interactivas de buen rendimiento. El proceso de actualizaciones interactivas es el mismo, aunque se realiza en un bucle continuo e, idealmente, a 60 fotogramas por segundo. Pero primero, un panorama sobre la manera en que el navegador muestra una p谩gina simple.

Construcci贸n del modelo de objetos

Para que el navegador pueda representar la p谩gina, debe construir los 谩rboles del DOM y el CSSOM. En consecuencia, debemos asegurarnos de proporcionar lenguaje de marcado HTML y CSS al navegador lo m谩s r谩pido posible.

  • Bytes 鈫 caracteres 鈫 tokens 鈫 nodos 鈫 modelo de objetos.
  • El lenguaje de marcado HTML se transforma en un Document Object Model (DOM) y el lenguaje de marcado CSS se transforma en un CSS Object Model (CSSOM).
  • DOM y CSSOM son estructuras de datos independientes.
  • Timeline de Chrome DevTools nos permite capturar e inspeccionar los costos de construcci贸n y procesamiento del DOM y CSSOM.

    Document Object Model (DOM)
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

Comencemos con el caso m谩s sencillo: una p谩gina HTML est谩ndar, con un poco de texto y una sola imagen. 驴C贸mo el navegador procesa esta p谩gina?

  1. Conversi贸n: el navegador lee los bytes sin procesar del HTML del disco o de la red y los traduce en caracteres individuales seg煤n la codificaci贸n especificada del archivo (por ejemplo, UTF-8).
  2. Conversi贸n en tokens: el navegador convierte cadenas de caracteres en tokens diferentes鈥攅specificados por el est谩ndar W3C HTML5; por ejemplo, 鈥<html>鈥, 鈥<body>鈥濃攜 otras cadenas entre par茅ntesis angulares. Cada token tiene un significado especial y un conjunto de reglas propio.
  3. Lexicalizaci贸n: los tokens emitidos se convierten en 鈥渙bjetos鈥 que definen sus propiedades y reglas.
  4. Construcci贸n del DOM: Por 煤ltimo, debido a que el lenguaje de marcado HTML define relaciones entre etiquetas diferentes (algunas etiquetas est谩n contenidas en otras), los objetos creados se vinculan en una estructura de datos en forma de 谩rbol que tambi茅n captura las relaciones entre objetos primarios y secundarios definidas en el lenguaje de marcado original: el objeto HTML es un elemento primario del objeto body, el objeto body es un elemento primario del objeto paragraph, etc.


El resultado final de todo este proceso es el Document Object Model (DOM) de nuestra p谩gina simple, que el navegador usa para todos los dem谩s procesamientos de la p谩gina.

Cada vez que el navegador procesa el lenguaje de marcado HTML, realiza todos los pasos que se mencionan m谩s arriba: convertir bytes en caracteres, identificar tokens, convertir tokens en nodos y compilar el 谩rbol del DOM. Todo este proceso puede tardar un poco, especialmente si hay mucho HTML para procesar.



Si abres Chrome DevTools y registras una l铆nea de tiempo mientras se carga la p谩gina, puedes ver el tiempo necesario para este paso. En el ejemplo anterior, la conversi贸n de un fragmento de HTML en un 谩rbol del DOM tard贸 ~5 ms. Respecto de una p谩gina m谩s grande, este proceso puede durar mucho m谩s. Cuando creas animaciones fluidas, puede convertirse f谩cilmente en un cuello de botella si el navegador debe procesar grandes cantidades de HTML.

El 谩rbol del DOM captura las propiedades y relaciones del lenguaje de marcado del documento, pero no muestra indicios sobre el aspecto que debe tener el elemento al representarse Esa es tarea del CSSOM.



Website Performance Optimization by Google

DOM
Document Object Model (鈥楳odelo de Objetos del Documento鈥) es una interfaz de plataforma que proporciona un conjunto est谩ndar de objetos para representar documentos HTML, XHTML, un modelo est谩ndar sobre c贸mo pueden combinarse dichos objetos, y una interfaz est谩ndar para acceder a ellos y manipularlos.
A trav茅s del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML, que es para lo que se dise帽贸 principalmente.

驴QU脡 ES UN NODO?

Un nodo es cada uno de los recuadros de las estructuras que vimos en la clase. Los nodos son los elementos b谩sicos de la estructura del DOM. Estos se relacionan unos con otros en una estructura jer谩rquica, de modo que cada nodo tiene un nodo superior del que depende, que es el nodo padre. Cada nodo puede tener 0, 1, 贸 varios nodos dependientes de 茅l, 茅stos ser谩n los nodos hijos. Los nodos que est谩n a un mismo nivel, dependiendo todos ellos del mismo nodo padre, son nodos hermanos. Todo el arbol del DOM depende de un nodo principal a partir del cual se generan todos los dem谩s. Es el nodo Document.

Tambi茅n descubr铆 que hay tipos de NODOS. Se los dejo aqu铆:

Tipos de nodos
Aunque existen 12 tipos de nodos en realidad en las p谩ginas web s贸lo tenemos los 5 siguientes:

Document: nodo raiz del que derivan todos los demas.
Element: Cada una de las etiquetas HTML. Es el unico nodo que puede contener atributos y del que pueden derivar otros nodos.
Attr; Cada atributo de una etiqueta genera un nodo Attr, el cual contiene tambi茅n su valor (como una propiedad). Es hijo del nodo element (etiqueta) que lo contiene.
Text: Contiene el texto encerrado por una etiqueta HTML (hijo del nodo Element).
Comment: Los comentarios incluidos en la pagina HTML tambi茅n generan sus nodos.
Los dem谩s tipos de nodos son: CDATASection, EntityReference, Entity, ProcessingInstruction, DocumentType, DocumentFragment, Notation. Estos se usan en el lenguaje XML, pero en HTML, si se emplean, suelen ser elementos fijos bastante definidos (etiqueta Doctype, caracteres de escape, etc). Veamos cu谩les son estos nodos:

CDatasection : Nodo que puede contener caracteres de escape escritos normalmente.
DocumentType : Declaraci贸n o etiqueta Doctype.
DocumentFragment : Fragmento o porci贸n del arbol del DOM: Aunque no aparece en el documento HTML permite a Javascript (mediante los m茅todos del DOM) seleccionar un trozo del documento.
Entity : Caracter de escape o Entidad en XML.
EntityReference : Referencia a entidad XML.
ProcessingInstrution : Instrucciones de procesamiento.
Notation Anotaciones: parecido a 鈥渃omment鈥, pero puede salir en pantalla en XML.

Las siglas DOM significan Document Object Model, o lo que es lo mismo, la 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铆, que se denomina 谩rbol DOM (o simplemente DOM).

Esta estructura se puede alterar mediante JavaScript para cambiar din谩micamente los contenidos y aspecto de la p谩gina.

![](

El DOM es un modelo de documento que se carga en el navegador web y que representa el documento como un 谩rbol de nodos

19. Mis apuntes sobre: 鈥淒OM鈥

Nosotros generamos el request a trav茅s de HTTP, mediante un [HTTP Request],
cuando se recibe el [HTTP Response], recibe assets/documentos y el navegador genera esto:
Inicia el proceso.
Critical Rendering Path: DOM --> CSSOM --> Render Tree --> Layout --> Paint
鈥欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌楯S鈥欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌欌

-DOM: Conocida como 鈥淒ocument Object Model鈥, es un 谩rbol que se genera con todas las
etiquetas (nodos), y se genera un 谩rbol con todas las etiquetas HTML que forman el contenido
de una p谩gina. Este 谩rbol se le conoce como un DOM.

Pues el 谩rbol si lo queremos ver de manera gr谩fica se ver铆a as铆:

El Critical Rendering Path hace referencia al hecho de priorizar la representaci贸n de contenido relacionado con la acci贸n actual del usuario.

Ofrecer una experiencia web r谩pida implica una alta exigencia para el navegador. Como programadores web no podemos ver la mayor parte de este trabajo: escribimos el lenguaje de marcado y aparece una bonita p谩gina en pantalla. Pero, 驴c贸mo pasa exactamente el navegador de consumir nuestro lenguaje HTML, CSS y JavaScript a p铆xeles representados en la pantalla?

La optimizaci贸n para mejorar el rendimiento se basa en la comprensi贸n de lo que ocurre en estos pasos intermedios entre la recepci贸n de los bytes de HTML, CSS y JavaScript, y el procesamiento necesario para convertirlos en p铆xeles representados; eso es el Critical Rendering Path.

Optimizando el Critical Rendering Path, podemos mejorar notablemente el tiempo necesario para representar nuestras p谩ginas por primera vez. Adem谩s, comprender esto, tambi茅n sirve como base para crear apps interactivas de buen rendimiento.

A lo largo del curso he visto que Diego repite que HTML es un lenguaje de textos, pero creo que eso no dice mucho.
HTML es un lenguaje de marcado de hypertexto, como su nombre lo dice, marcamos el texto, con HTML le podemos decir al navegador que texto es un titulo?, que texto es un parrafo?, que es o donde esta una imagen?, etc, etc. Porque tu perfectamente puedes abrir un archivo .html en el navegador de puro texto plano, y va abrirse sin ningun problema, pero el navegador no sabria que es que cosa, seria incapaz de generar del DOM ya que no tendriamos las etiquetas que marcan cada elemento.



Desde que me naci贸 la curiosidad de crear sitios webs o铆a siempre del DOM, pero gracias a mi ignorancia siempre lo relacionaba con ese juego. Sin embargo, como me parec铆a 鈥渄if铆cil鈥, no me preocupaba por investigar el tema.

La ignorancia es atrevida, pero es m谩s atrevido cuando no se buscan los medios para evitarla.

un peque帽o ejemplo del funcionamiento del DOM:

馃搼 DOM facilita una representaci贸n estructurada del documento y define como los programas pueden acceder, para modificar su estructura, estilo y contenido.

<h1>Esto es una pruba</h1>

Excelente explicaci贸n y muy importante conocer lo que sucede por detr谩s al nosotros visitar un sitio.

DOM

El DOM es el primer paso, es el 谩rbol con nodos en donde se aloja todas las etiquetas con im谩genes p谩rrafos etc

De igual manera si quieren profundizar m谩s sobre el DOM y el CSSOM el curso de frontend developer est谩 genial y muy bien explicado ^^!

Aca les dejo una explicaci贸n del curso de frontend developer Como el navegador entiende nuestro codigo?

驴C贸mo hace el browser para mostrarnos la informaci贸n?



Cuando env铆amos un HTTP request, nos llega del servidor un HTTP response鈥 驴Qu茅 viene en el HTTP response? Viene un conjunto de archivos llamados assets, que estaban guardados en el servidor.
.
En los assets viene toda la informaci贸n para que el navegador pueda mostrar el producto web. 驴Qu茅 debe hacer para lograrlo? Su objetivo es poder renderizar toda la informaci贸n: procesarla, traducirsela a la computadora en c贸digo binario para que esta pueda realizar todos los c谩lculos que le permitan al browser generar un output visual que volcar谩 en su pantalla y que el usuario pueda consumir.
.
驴C贸mo es este proceso de renderizaci贸n? Se lo conoce como Critical Rendering Path y consta de varios pasos:

  • El DOM
  • El CCSOM
  • El render tree
  • Layout
  • Paint
  • Integraci贸n de Javascript con el engine


En esta clase vemos qu茅 es el DOM (Document Object Model)

Para entenderlo, hay que saber que HTML es un lenguaje de marcado que define cu谩l es la informaci贸n que hay en una web y la agrupa en etiquetas, que funcionan como contenedores o cajas. Es de marcado porque adem谩s de definir el contenido, lo marca etiquet谩ndolo diciendo 鈥淓sto es un p谩rrafo鈥, 鈥淓sto es un t铆tulo鈥, 鈥淓sto es un enlace鈥, 鈥淓sto es un contenedor de algo鈥, etc.
.
En esta estructura, con HTML se van agrupando unos elementos dentro de otros, siendo unos elementos contenidos por otros que son contenedores. Y de esa manera se va formando un 谩rbol de jerarqu铆as donde un elemento contiene otros elementos, y esos otros elementos hijo contienen otros elementos y as铆 se va ramificando todo.
.
Este 谩rbol formado con las etiquetas o nodos HTML se lo conoce como DOM, es el Document Object Model.
.
Cuando el browser recibe del servidor los assets, lo primero que hace en el Critical Rendering Path es buscar el documento HTML y ver cu谩l es el 谩rbol de etiquetas.

TOKENS: Es una cadena de caracteres que tiene un significado coherente en cierto lenguaje de programaci贸n Tambi茅n llamado componente l茅xico es una cadena de caracteres que tiene un significado coherente en cierto聽lenguaje de programaci贸n. Ejemplos de tokens, podr铆an ser palabras clave (if, while, int,...),聽identificadores, n煤meros, signos, o un operador de varios caracteres, (por ejemplo,聽:=).

Los archivos que nos llegan deben de ser interpretados por algo, de eso se encarga el navegador, y a esa interpretaci贸n se le conoce como: Critical Rendereing Path.

El Critical Rendenring Path, es la serie de pasos que se ejecutan para ejecutar estos archivos en el proyecto.

Con JS podemos escuchar eventos, lo que significa de manera m谩s simple es que podemos saber lo que el usuario hace con nuestra p谩gina ejemplos:
Scroll down, Scroll Up, click, load, keypress etc. etc.
As铆 cuando un evento de esos pases hacer algo como respuesta, lo que da una gran din谩mica a nuestros sitios.

Resumen


1.) Procesa html y construye el DOM
2.) Procesa Css y Construye el CSSOM
3.)DOM+CSSOM=RENDER TREE
4.)Ejecutar el dise帽o en el RENDER TREE
5.) Pinta el nodo en la Pantalla

El DOM (Document Object Model) es un 谩rbol con todos los elementos de las etiquetas HTML que forman el contenido de la p谩gina.

Con js, ya podemos hacer mucho m谩s, al alterar los nodos del DOM y CSSOM.

Profundizando un poco m谩s sobre el DOM, me tope con este sitio donde hay un Ebook llamado Understanding the DOM, esta super interesante

DOM
.
Cuando el cliente genera un request a trav茅s del protocolo HTTP al servidor, como resultado el servidor devuelve los archivos necesarios para que el navegador realiza una serie de pasos Critical Rendering Path para poder renderizar el proyecto.
.
DOM (Document Object Model) es el primer paso que genera una estructura de 谩rbol con todas las etiquetas, nodos y toda la informaci贸n del proyecto. Que puede interactuar con JavaScript en el HTML.

Wow! clara explicaciones del DOM鈥 adem谩s que es necesario saber que sucede detr谩s

explicacion de aplicacion de la web

Critical Rendering Path by web fundamentals

Entonces, nosotros como desarrolladores web podemos decirle al navegador que es lo m谩s critico, 贸sea lo que cargue primero si o s铆. De ah铆 surgen t茅rminos con el lazy load, donde establecemos que parte de la interface se cargara en el primer momento, mientras que otras partes esperaran a una primera interacci贸n, por ejemplo hacer scroll del contenido de la p谩gina activar铆a la carga de otros partes del interface, y algo importante es que la p谩gina no se actualiza solo es un proceso que ocurre atr谩s fondo.

Por lo que es una muy excelente pr谩ctica para la experiencia del usuario, nosotros mismos no esperamos m谩s de 10 segundos a que cargue una p谩gina, sino que inmediatamente cerramos y vamos a otra. La primera carga debe estar entre los 2,5 segundos para ser considerada buena.
Es bueno conocer tambi茅n standares como los son web vitals para ofrecer un excelente servicio con nuestras p谩ginas web
-Solo para que tengamos en mente este tipo de cosas, m谩s adelante nos seviran y las pondremos en pr谩ctica, claro que s铆.

El DOM es un modelo de objetos de documento
Muy interesante como puede generar una vista general en forma de arbol con todos las etiquetas de html en el !

la peor parte es la del minuto 3:55

La historia del DOM est谩 entrelazada con la historia de 鈥渓a guerra de los navegadores鈥 a finales de la d茅cada de 1990 entre Netscape Navigator y Microsoft Internet Explorer, as铆 como con la de JavaScript y JScript, los primeros lenguajes de scripting que se implementaron ampliamente en los motores JavaScript.

En Javascript, cuando nos referimos al DOM nos referimos a esta estructura, que podemos modificar de forma din谩mica desde Javascript, a帽adiendo nuevas etiquetas, modificando o eliminando otras, cambiando sus atributos HTML, a帽adiendo clases, cambiando el contenido de texto, etc.

El sistema DOM se usa principalmente cuando se desea actualizar un sitio web o construir una interfaz de usuario avanzada. Con este, es posible mover los 铆tems en una p谩gina o crear efectos CSS 鈥 sin siquiera tener que cargar el sitio.

Estructura (o jerarqu铆a) de la interfaz DOM

Trabaja con JS pero NO hace parte del Critical Rendering Path

Critical Rendering Path
Todos los pasos que genera para renderizar la p谩gina

DOM

  • Es un 谩rbol de nodos con todas las etiquetas html
  • Es el documento que contiene a html, luego vienen head y body, etc.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM | </title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</body>
</html>

Critical Render Path:
Se refiere a la secuencia de pasos que el navegador realiza para recibir c贸digo en HTML, CSS y JavaScript y convertirlos en la vista inicial de una p谩gina web.

DOM - CSSOM - Render Tree - Layout -Paint
(En intermedios trabaja con JavaScript)

En el comienzo, JavaScript y el DOM estaban herm茅ticamente enlazados, pero despu茅s se desarrollaron como entidades separadas. El contenido de la p谩gina es almacenado en DOM y el acceso y la manipulaci贸n se hace v铆a JavaScript, podr铆a representarse aproximadamente as铆:

API(web o p谩gina XML) = DOM + JS(lenguaje de script)

Fuente:
https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction#dom_y_javascript

驴El DOM es una api?

Proceso de renderizado en una pagina

Interesante Critical rendering path.

Primero,Conversi贸n: el procesador, lee los byte y los convierte en caracteres, dependiendo del tipo de codificaci贸n.

el navegador, primero empieza leyendo el esqueleto de toda la web, HTML, por lo que es la base de todos las dem谩s tecnolog铆as.

Excelente!!!
Este hombre explica demasiado bieeeennn

ok

Seg煤n entiendo el DOM es el 谩rbol de estructura del sitio web.
En el se visualiza toda la estructura y el contenido t茅cnico de cada una de ellas.
驴Es corecto?

muchisimas gracias!!!

Critical Rendering Path

Document Object Model, lo primero que se genera, es un 谩rbol que se genera de las etiquetas html, nos da una estructura del documento leyendo de arriba a abajo y nos permite modificarlo con JavaScript y generar que se interactivo, por eso la etiqueta script carga hasta el 煤ltimo va hasta el final del body.

<script src=""></script>

(

Explicaci贸n de qu茅 es el DOM por Freddy Vega en el curso de

no puedo compartir mis aportes en imagen :c
saco el link en Imgur. pero al momento de compartirlo en los aportes no sale la imagen 馃槮
驴alguien sabe de alguna otra plataforma?

Segundo, conversi贸n a Tokens:El navegador convierte ese texto plano, en tokens, con un sentido sem谩ntico y conjunto de reglas propios

Tercero,Lexicalizaci贸n:Los tokens son convertidos en objetos.

El aspecto de cada elemento del DOM, es dado por el CSSOM.

Dentro del HTML, el navegador lee de arriba hacia abajo, y a medida que lee interpreta. cada una de las cosas especificadas dentro del documento, que ser铆an las etiquetas.

El CSSOM, es la petici贸n que se pone el head del documento HTML, con la que vamos a tener el estilo de este.

mediante el atributo (attribute) type, especificamos en el renderizado, qu茅 es el archivo que solicitamos leer y para qu茅 lo va utilizar

DE ESTE...Est谩n todos los archivos multimedia, tanto texto como videos e im谩genes.

Primeramente se genera un DOM, el Document Object Model, que es un arbol de nodos, en los que divide su informaci贸n, Se tiene el Document, que contiene el html, luego pasa a ver las peticiones del head, por la que tambi茅n se ver谩 al CSSOM; m谩s abajo est谩 el body y dentro de este

Cuando el server env铆a los archivos se le llama respuesta

El HTTP nos comunica directamente con el navegador, por lo que tenemos los assets a trav茅s de una petici贸n

DOM y CSSOM son estructuras de datos independientes.
Timeline de Chrome DevTools nos permite capturar e inspeccionar los costos de construcci贸n y procesamiento del DOM y CSSOM.

Critical Rendering Path

(

DOM: 谩rbol que se genera con las etiquetas nodos y estructura html de un sitio web

Thanks.

DOM es un arbol con todo lo explicado anteriormente.

DOM

Es el 鈥淎rbol鈥 que se genera con todas las etiquetas y que permite dar una estructura a la p谩gina web de donde debe ir ubicada cada cosa.

DOM: Document Object Model
Es un arbol que se genera con todas las etiquetas (elementos) que forman cada uno de los contenidos que veremos en la pagina
osea todas las palabras todos los parrafos, imagenes, toda la informacion que viene en el proyecto.

DOM = DOCUMENT OBJECT MODEL

DOM

Critical Rendering Path

genial

Se empiezan a juntar todas las piezas en mi cabeza. Ahora todo tiene m谩s sentido, me emociona lo que se viene.

La generaci贸n del 谩rbol de etiquetas es lo que se hace de primero, esto es el DOM y desde all铆 se puede manipular con Javascript al mismo, pero primero debe generarse.

DOM: Identifica y jerarquiza las etiquetas html