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

2
00:00:06,750 --> 00:00:09,978
"Dom, dom, dom, dom".

3
00:00:09,978 --> 00:00:15,502
DOM significa "Document Object Model" (Modelo de Objetos para representar Documentos),

4
00:00:15,502 --> 00:00:18,907
y es la manera en la que los navegadores le permiten a los desarrolladores

5
00:00:18,907 --> 00:00:21,637
manipular páginas web con JavaScript.

6
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,

7
00:00:26,726 --> 00:00:30,236
y convierte el documento en un DOM.

8
00:00:30,236 --> 00:00:33,538
Ese DOM en realidad es un gran objeto de JavaScript,

9
00:00:33,538 --> 00:00:37,739
que contiene todo lo que quisiéramos saber o cambiar sobre una página,

10
00:00:37,739 --> 00:00:43,201
como cada etiqueta, atributo, y estilo para cada etiqueta.

11
00:00:43,201 --> 00:00:46,980
Para acceder al DOM de una página web desde JavaScript,

12
00:00:46,980 --> 00:00:52,913
usamos la variable gobal "document", y entonces podemos usar propiedades,

13
00:00:52,913 --> 00:00:57,520
y llamar funciones que están ligadas a este objeto.

14
00:00:57,520 --> 00:01:04,226
La estrategia general para manipular un DOM tiene dos pasos.

15
00:01:04,226 --> 00:01:09,309
Permítanme hacer aquí una lista de esos pasos.

16
00:01:09,309 --> 00:01:14,759
Aquí vamos, y luego tenemos el segundo paso.

17
00:01:14,759 --> 00:01:17,823
Ahora vamos a revisar cada uno de estos pasos.

18
00:01:17,823 --> 00:01:23,493
El primer paso consiste en encontrar el nodo DOM usando un método de acceso.

19
00:01:23,493 --> 00:01:28,969
Si todo lo que estamos buscando es la etiqueta "", en realidad podemos acceder muy fácilmente,

20
00:01:28,969 --> 00:01:33,504
simplemente escribiendo "document.body".

21
00:01:33,504 --> 00:01:39,000
Y ahora el segundo paso es manipular el nodo DOM que encontramos,

22
00:01:39,000 --> 00:01:43,386
mediante el cambio de sus atributos, estilos, el contenido de HTML,

23
00:01:43,386 --> 00:01:46,054
o añadiendo nuevos nodos.

24
00:01:46,054 --> 00:01:50,495
Así que si lo que queremos es reemplazar el contenido de la etiqueta entera,

25
00:01:50,495 --> 00:01:53,758
entonces podemos usar la propiedad "innerHTML".

26
00:01:53,758 --> 00:01:59,003
Entonces escribimos "document.body.innerHTML = 'Webpage be gone!';" ("La página se ha ido").

27
00:01:59,003 --> 00:02:01,758
¡Tan tan! Lo hice.

28
00:02:01,758 --> 00:02:05,764
El navegador revisa los cambios al objeto "document",

29
00:02:05,764 --> 00:02:10,184
y tan pronto como ve que cambiaste el contenido de HTML de "document.body",

30
00:02:10,184 --> 00:02:13,450
lo refleja de nuevo en el documento actual.

31
00:02:13,450 --> 00:02:17,778
Recuerda, el objeto "document" no es la página web real,

32
00:02:17,778 --> 00:02:24,029
pero el navegador intenta hacer que refleje
la página actual tanto como sea posible.

33
00:02:24,029 --> 00:02:28,609
Ahora, hay muchas maneras de hacer el paso uno,

34
00:02:28,609 --> 00:02:32,794
porque generalmente vas a querer encontrar algo más que la etiqueta "".

35
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.

36
00:02:37,663 --> 00:02:41,772
De eso vamos a hablar en el tutorial de Métodos de Acceso al DOM.

37
00:02:41,772 --> 00:02:45,290
Hay muchas cosas interesantes que puedes hacer en el paso dos,

38
00:02:45,290 --> 00:02:49,135
como cambiar los atributos o estilos de las etiquetas que encuentres.

39
00:02:49,135 --> 00:02:52,901
Hablaremos de eso en el tutorial de Modificación del DOM.

40
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

41
00:02:57,871 --> 00:03:02,735
que podemos hacer, como responder a eventos del usuario o hacer animaciones.

42
00:03:02,735 --> 00:03:06,657
Por el momento es un poco tonto que utilicemos JavaScript para hacer

43
00:03:06,657 --> 00:03:10,253
algo que podríamos hacer con HTML en el principio,

44
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,

45
00:03:14,977 --> 00:03:18,893
hasta que puedas crear grandes experiencias interactivas.

46
00:03:18,893 --> 00:03:24,667
Así que sigue así y nos vemos pronto.