[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:06.75,Default,,0000,0000,0000,,En el futuro, me van a oír hablar mucho de un cierto acrónimo: DOM.
Dialogue: 0,0:00:06.75,0:00:09.98,Default,,0000,0000,0000,,"Dom, dom, dom, dom".
Dialogue: 0,0:00:09.98,0:00:15.50,Default,,0000,0000,0000,,DOM significa "Document Object Model" (Modelo de Objetos para representar Documentos),
Dialogue: 0,0:00:15.50,0:00:18.91,Default,,0000,0000,0000,,y es la manera en la que los navegadores le permiten a los desarrolladores
Dialogue: 0,0:00:18.91,0:00:21.64,Default,,0000,0000,0000,,manipular páginas web con JavaScript.
Dialogue: 0,0:00:21.64,0:00:26.73,Default,,0000,0000,0000,,Cada vez que un navegador carga una página web, analiza todo el código HTML y CSS,
Dialogue: 0,0:00:26.73,0:00:30.24,Default,,0000,0000,0000,,y convierte el documento en un DOM.
Dialogue: 0,0:00:30.24,0:00:33.54,Default,,0000,0000,0000,,Ese DOM en realidad es un gran objeto de JavaScript,
Dialogue: 0,0:00:33.54,0:00:37.74,Default,,0000,0000,0000,,que contiene todo lo que quisiéramos saber o cambiar sobre una página,
Dialogue: 0,0:00:37.74,0:00:43.20,Default,,0000,0000,0000,,como cada etiqueta, atributo, y estilo para cada etiqueta.
Dialogue: 0,0:00:43.20,0:00:46.98,Default,,0000,0000,0000,,Para acceder al DOM de una página web desde JavaScript,
Dialogue: 0,0:00:46.98,0:00:52.91,Default,,0000,0000,0000,,usamos la variable gobal "document", y entonces podemos usar propiedades,
Dialogue: 0,0:00:52.91,0:00:57.52,Default,,0000,0000,0000,,y llamar funciones que están ligadas a este objeto.
Dialogue: 0,0:00:57.52,0:01:04.23,Default,,0000,0000,0000,,La estrategia general para manipular un DOM tiene dos pasos.
Dialogue: 0,0:01:04.23,0:01:09.31,Default,,0000,0000,0000,,Permítanme hacer aquí una lista de esos pasos.
Dialogue: 0,0:01:09.31,0:01:14.76,Default,,0000,0000,0000,,Aquí vamos, y luego tenemos el segundo paso.
Dialogue: 0,0:01:14.76,0:01:17.82,Default,,0000,0000,0000,,Ahora vamos a revisar cada uno de estos pasos.
Dialogue: 0,0:01:17.82,0:01:23.49,Default,,0000,0000,0000,,El primer paso consiste en encontrar el nodo DOM usando un método de acceso.
Dialogue: 0,0:01:23.49,0:01:28.97,Default,,0000,0000,0000,,Si todo lo que estamos buscando es la etiqueta "", en realidad podemos acceder muy fácilmente,
Dialogue: 0,0:01:28.97,0:01:33.50,Default,,0000,0000,0000,,simplemente escribiendo "document.body".
Dialogue: 0,0:01:33.50,0:01:39.00,Default,,0000,0000,0000,,Y ahora el segundo paso es manipular el nodo DOM que encontramos,
Dialogue: 0,0:01:39.00,0:01:43.39,Default,,0000,0000,0000,,mediante el cambio de sus atributos, estilos, el contenido de HTML,
Dialogue: 0,0:01:43.39,0:01:46.05,Default,,0000,0000,0000,,o añadiendo nuevos nodos.
Dialogue: 0,0:01:46.05,0:01:50.50,Default,,0000,0000,0000,,Así que si lo que queremos es reemplazar el contenido de la etiqueta entera,
Dialogue: 0,0:01:50.50,0:01:53.76,Default,,0000,0000,0000,,entonces podemos usar la propiedad "innerHTML".
Dialogue: 0,0:01:53.76,0:01:59.00,Default,,0000,0000,0000,,Entonces escribimos "document.body.innerHTML = 'Webpage be gone!';" ("La página se ha ido").
Dialogue: 0,0:01:59.00,0:02:01.76,Default,,0000,0000,0000,,¡Tan tan! Lo hice.
Dialogue: 0,0:02:01.76,0:02:05.76,Default,,0000,0000,0000,,El navegador revisa los cambios al objeto "document",
Dialogue: 0,0:02:05.76,0:02:10.18,Default,,0000,0000,0000,,y tan pronto como ve que cambiaste el contenido de HTML de "document.body",
Dialogue: 0,0:02:10.18,0:02:13.45,Default,,0000,0000,0000,,lo refleja de nuevo en el documento actual.
Dialogue: 0,0:02:13.45,0:02:17.78,Default,,0000,0000,0000,,Recuerda, el objeto "document" no es la página web real,
Dialogue: 0,0:02:17.78,0:02:24.03,Default,,0000,0000,0000,,pero el navegador intenta hacer que refleje\Nla página actual tanto como sea posible.
Dialogue: 0,0:02:24.03,0:02:28.61,Default,,0000,0000,0000,,Ahora, hay muchas maneras de hacer el paso uno,
Dialogue: 0,0:02:28.61,0:02:32.79,Default,,0000,0000,0000,,porque generalmente vas a querer encontrar algo más que la etiqueta "".
Dialogue: 0,0:02:32.79,0:02:37.66,Default,,0000,0000,0000,,Tal vez quieres encontrar una etiqueta con un cierto "Id", o todas las etiquetas de un determinado tipo.
Dialogue: 0,0:02:37.66,0:02:41.77,Default,,0000,0000,0000,,De eso vamos a hablar en el tutorial de Métodos de Acceso al DOM.
Dialogue: 0,0:02:41.77,0:02:45.29,Default,,0000,0000,0000,,Hay muchas cosas interesantes que puedes hacer en el paso dos,
Dialogue: 0,0:02:45.29,0:02:49.14,Default,,0000,0000,0000,,como cambiar los atributos o estilos de las etiquetas que encuentres.
Dialogue: 0,0:02:49.14,0:02:52.90,Default,,0000,0000,0000,,Hablaremos de eso en el tutorial de Modificación del DOM.
Dialogue: 0,0:02:52.90,0:02:57.87,Default,,0000,0000,0000,,Una vez que domines el acceso y la manipulación del DOM, vamos a pasar a cosas divertidas
Dialogue: 0,0:02:57.87,0:03:02.74,Default,,0000,0000,0000,,que podemos hacer, como responder a eventos del usuario o hacer animaciones.
Dialogue: 0,0:03:02.74,0:03:06.66,Default,,0000,0000,0000,,Por el momento es un poco tonto que utilicemos JavaScript para hacer
Dialogue: 0,0:03:06.66,0:03:10.25,Default,,0000,0000,0000,,algo que podríamos hacer con HTML en el principio,
Dialogue: 0,0:03:10.25,0:03:14.98,Default,,0000,0000,0000,,pero confía en mí, querrás dominar el acceso al DOM y la modificación del DOM,
Dialogue: 0,0:03:14.98,0:03:18.89,Default,,0000,0000,0000,,hasta que puedas crear grandes experiencias interactivas.
Dialogue: 0,0:03:18.89,0:03:24.67,Default,,0000,0000,0000,,Así que sigue así y nos vemos pronto.