YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Spanish, Mexican subtitles

← 02-02 Convertir HTML en el DOM

02-02 Convertir HTML en el DOM

Get Embed Code
6 Languages

Showing Revision 8 created 09/29/2014 by Fran Ontanaya.

  1. Al solicitar una URL y pulsar Enter,
  2. el navegador envía una solicitud
    al servidor.
  3. Por ejemplo, podemos simular esto
    en la misma línea de comandos.
  4. Cuando el navegador recibe respuesta,
    este HTML de aquí,
  5. debe convertir todos los markup
  6. en algo que se vea en esta pantalla.
  7. ¿Se han preguntado cómo ocurre?
  8. Bueno, ahora que lo dices,
    parece arte de magia.
  9. No es magia. El buscador sigue
    una serie de pasos bien definidos
  10. que empiezan con el procesamiento
    del HTML y la construcción del DOM.
  11. La especificación HTML contiene
    unas reglas para procesar los datos.
  12. Por ejemplo, el texto que aparece
    entre paréntesis angulares
  13. tiene un significado especial en HTML
    y su función es de etiqueta.
  14. Así, cuando encontramos una etiqueta,
    el buscador genera un identificador.
  15. Aquí, es el identificador etiqueta
    de entrada HTML.
  16. Luego, tomaríamos el identificador
    principal StartTag y así sucesivamente.
  17. Todo este proceso lo hace
    el generador de identificadores,
  18. y mientras hace su trabajo,
    hay otro proceso
  19. que consume identificadores
    y los convierte en objetos nodo.
  20. Por ejemplo, convertimos
    el primer identificador HTML
  21. y creamos el nodo HTML.
  22. Luego consumimos el próximo identificador
    y creamos ese nodo.
  23. ¿Hay alguna relación entre los nodos?
  24. Sí, nota que el generador
    emite identificadores de entrada
  25. y de salida, lo que indica la relación
    entre los nodos.
  26. El identificador de entrada principal
    aparece antes que el identificador
  27. HTML EndTag, lo cual nos indica
    que el identificador principal
  28. se deriva del HTML.
  29. Del mismo modo, los nodos meta
    y link se derivan del nodo principal
  30. y así sucesivamente.
  31. Al final, consumidos los identificadores,
  32. se llega al Document Object Model,
    DOM, que es una estructura en árbol
  33. que captura el contenido y propiedades
  34. del HTML y todas las relaciones
    entre nodos.
  35. Qué bien. Así que hemos convertido
    el HTML en Document Object Model.
  36. Es bastante fácil ver por qué
    se llama árbol DOM.
  37. Sí, también ten en cuenta
    que estos objetos
  38. contienen todas sus propiedades.
  39. Por ejemplo, el nodo imagen
    tiene un atributo fuente
  40. y este nodo de aquí tendría
    esa misma propiedad.
  41. El DOM es la presentación íntegra
    del markup HTML.
  42. Vale, hemos descargado todo el HTML
  43. y construido el DOM.
  44. ¿Qué viene ahora?
  45. En realidad, el buscador
    construye el DOM paso a paso
  46. y se puede aprovechar para
    acelerar la renderización de páginas.
  47. Esto es algo que las páginas
    del buscador Google
  48. hacen muy pero que muy bien.
  49. Déjame mostrártelo.