WEBVTT

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

00:00:06.750 --> 00:00:09.978
"Dom, dom, dom, dom".

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

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

00:00:18.907 --> 00:00:21.637
manipular páginas web con JavaScript.

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

00:00:26.726 --> 00:00:30.236
y convierte el documento en un DOM.

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

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

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

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

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

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

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

00:01:04.226 --> 00:01:09.309
Permítanme hacer aquí una lista de esos pasos.

00:01:09.309 --> 00:01:14.759
Aquí vamos, y luego tenemos el segundo paso.

00:01:14.759 --> 00:01:17.823
Ahora vamos a revisar cada uno de estos pasos.

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

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

00:01:28.969 --> 00:01:33.504
simplemente escribiendo "document.body".

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

00:01:39.000 --> 00:01:43.386
mediante el cambio de sus atributos, estilos, el contenido de HTML,

00:01:43.386 --> 00:01:46.054
o añadiendo nuevos nodos.

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

00:01:50.495 --> 00:01:53.758
entonces podemos usar la propiedad "innerHTML".

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

00:01:59.003 --> 00:02:01.758
¡Tan tan! Lo hice.

00:02:01.758 --> 00:02:05.764
El navegador revisa los cambios al objeto "document",

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

00:02:10.184 --> 00:02:13.450
lo refleja de nuevo en el documento actual.

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

00:02:17.778 --> 00:02:24.029
pero el navegador intenta hacer que refleje
la página actual tanto como sea posible.

00:02:24.029 --> 00:02:28.609
Ahora, hay muchas maneras de hacer el paso uno,

00:02:28.609 --> 00:02:32.794
porque generalmente vas a querer encontrar algo más que la etiqueta "".

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

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

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

00:02:45.290 --> 00:02:49.135
como cambiar los atributos o estilos de las etiquetas que encuentres.

00:02:49.135 --> 00:02:52.901
Hablaremos de eso en el tutorial de Modificación del DOM.

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

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

00:03:02.735 --> 00:03:06.657
Por el momento es un poco tonto que utilicemos JavaScript para hacer

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

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

00:03:14.977 --> 00:03:18.893
hasta que puedas crear grandes experiencias interactivas.

00:03:18.893 --> 00:03:24.667
Así que sigue así y nos vemos pronto.