0:00:00.000,0:00:06.750
En el futuro, me van a oír hablar mucho de un cierto acrónimo: DOM.

0:00:06.750,0:00:09.978
"Dom, dom, dom, dom".

0:00:09.978,0:00:15.502
DOM significa "Document Object Model" (Modelo de Objetos para representar Documentos),

0:00:15.502,0:00:18.907
y es la manera en la que los navegadores le permiten a los desarrolladores

0:00:18.907,0:00:21.637
manipular páginas web con JavaScript.

0:00:21.637,0:00:26.726
Cada vez que un navegador carga una página web, analiza todo el código HTML y CSS,

0:00:26.726,0:00:30.236
y convierte el documento en un DOM.

0:00:30.236,0:00:33.538
Ese DOM en realidad es un gran objeto de JavaScript,

0:00:33.538,0:00:37.739
que contiene todo lo que quisiéramos saber o cambiar sobre una página,

0:00:37.739,0:00:43.201
como cada etiqueta, atributo, y estilo para cada etiqueta.

0:00:43.201,0:00:46.980
Para acceder al DOM de una página web desde JavaScript,

0:00:46.980,0:00:52.913
usamos la variable gobal "document", y entonces podemos usar propiedades,

0:00:52.913,0:00:57.520
y llamar funciones que están ligadas a este objeto.

0:00:57.520,0:01:04.226
La estrategia general para manipular un DOM tiene dos pasos.

0:01:04.226,0:01:09.309
Permítanme hacer aquí una lista de esos pasos.

0:01:09.309,0:01:14.759
Aquí vamos, y luego tenemos el segundo paso.

0:01:14.759,0:01:17.823
Ahora vamos a revisar cada uno de estos pasos.

0:01:17.823,0:01:23.493
El primer paso consiste en encontrar el nodo DOM usando un método de acceso.

0:01:23.493,0:01:28.969
Si todo lo que estamos buscando es la etiqueta "", en realidad podemos acceder muy fácilmente,

0:01:28.969,0:01:33.504
simplemente escribiendo "document.body".

0:01:33.504,0:01:39.000
Y ahora el segundo paso es manipular el nodo DOM que encontramos,

0:01:39.000,0:01:43.386
mediante el cambio de sus atributos, estilos, el contenido de HTML,

0:01:43.386,0:01:46.054
o añadiendo nuevos nodos.

0:01:46.054,0:01:50.495
Así que si lo que queremos es reemplazar el contenido de la etiqueta entera,

0:01:50.495,0:01:53.758
entonces podemos usar la propiedad "innerHTML".

0:01:53.758,0:01:59.003
Entonces escribimos "document.body.innerHTML = 'Webpage be gone!';" ("La página se ha ido").

0:01:59.003,0:02:01.758
¡Tan tan! Lo hice.

0:02:01.758,0:02:05.764
El navegador revisa los cambios al objeto "document",

0:02:05.764,0:02:10.184
y tan pronto como ve que cambiaste el contenido de HTML de "document.body",

0:02:10.184,0:02:13.450
lo refleja de nuevo en el documento actual.

0:02:13.450,0:02:17.778
Recuerda, el objeto "document" no es la página web real,

0:02:17.778,0:02:24.029
pero el navegador intenta hacer que refleje[br]la página actual tanto como sea posible.

0:02:24.029,0:02:28.609
Ahora, hay muchas maneras de hacer el paso uno,

0:02:28.609,0:02:32.794
porque generalmente vas a querer encontrar algo más que la etiqueta "".

0:02:32.794,0:02:37.663
Tal vez quieres encontrar una etiqueta con un cierto "Id", o todas las etiquetas de un determinado tipo.

0:02:37.663,0:02:41.772
De eso vamos a hablar en el tutorial de Métodos de Acceso al DOM.

0:02:41.772,0:02:45.290
Hay muchas cosas interesantes que puedes hacer en el paso dos,

0:02:45.290,0:02:49.135
como cambiar los atributos o estilos de las etiquetas que encuentres.

0:02:49.135,0:02:52.901
Hablaremos de eso en el tutorial de Modificación del DOM.

0:02:52.901,0:02:57.871
Una vez que domines el acceso y la manipulación del DOM, vamos a pasar a cosas divertidas

0:02:57.871,0:03:02.735
que podemos hacer, como responder a eventos del usuario o hacer animaciones.

0:03:02.735,0:03:06.657
Por el momento es un poco tonto que utilicemos JavaScript para hacer

0:03:06.657,0:03:10.253
algo que podríamos hacer con HTML en el principio,

0:03:10.253,0:03:14.977
pero confía en mí, querrás dominar el acceso al DOM y la modificación del DOM,

0:03:14.977,0:03:18.893
hasta que puedas crear grandes experiencias interactivas.

0:03:18.893,0:03:24.667
Así que sigue así y nos vemos pronto.