1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [DOM]

2
00:00:02,000 --> 00:00:04,000
[Tommy MacWilliams] [Universidad de Harvard]

3
00:00:04,000 --> 00:00:07,000
[Este es CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
En este video vamos a echar un vistazo a la DOM.

5
00:00:10,000 --> 00:00:14,000
Cuando un navegador descarga una página web, necesita ser representado en la memoria de alguna manera.

6
00:00:14,000 --> 00:00:17,000
El modelo de objeto de documento, o DOM,

7
00:00:17,000 --> 00:00:20,000
describe cómo el navegador representa una página web en la memoria.

8
00:00:20,000 --> 00:00:24,000
En este video, vamos a echar un vistazo a la DOM en el contexto de JavaScript,

9
00:00:24,000 --> 00:00:26,000
pero DOM es un concepto independiente del lenguaje.

10
00:00:26,000 --> 00:00:30,000
Por ejemplo, PHP tiene su propia implementación DOM también.

11
00:00:30,000 --> 00:00:32,000
Sin embargo, DOM se utiliza con frecuencia por JavaScript

12
00:00:32,000 --> 00:00:36,000
desde JavaScript nos permite cambiar el contenido de una página web sobre la marcha,

13
00:00:36,000 --> 00:00:39,000
DOM y nos permite acceder a partes de una página web.

14
00:00:39,000 --> 00:00:43,000
Vamos a echar un vistazo a la página web de ejemplo.

15
00:00:43,000 --> 00:00:48,000
Bien, ahora vamos a ver cómo esta página estará representado en el DOM.

16
00:00:48,000 --> 00:00:51,000
Y cada árbol debe tener un nodo raíz en la parte superior.

17
00:00:51,000 --> 00:00:54,000
En este documento, el elemento HTML es el nodo raíz

18
00:00:54,000 --> 00:00:56,000
porque es el primer elemento que aparece.

19
00:00:56,000 --> 00:01:00,000
Vamos a añadir un nodo raíz de nuestro árbol.

20
00:01:00,000 --> 00:01:03,000
Vamos a echar un vistazo al documento HTML nuevo.

21
00:01:03,000 --> 00:01:09,000
Observe que la etiqueta del cuerpo se desliza por el interior de la etiqueta HTML.

22
00:01:09,000 --> 00:01:14,000
Esto significa que el cuerpo es un elemento secundario del elemento HTML.

23
00:01:14,000 --> 00:01:17,000
Podemos representar esto en nuestro árbol DOM al hacer el cuerpo de una hoja

24
00:01:17,000 --> 00:01:20,000
descendente de HTML.

25
00:01:20,000 --> 00:01:22,000
Vamos a hacer eso.

26
00:01:22,000 --> 00:01:24,000
Tenemos cuerpo debajo HTML.

27
00:01:24,000 --> 00:01:28,000
Ahora podemos ver que el cuerpo tiene 2 hijos de su propia,

28
00:01:28,000 --> 00:01:31,000
el elemento h1 y el elemento ul.

29
00:01:31,000 --> 00:01:34,000
Esto significa que podemos conectar estos dos elementos

30
00:01:34,000 --> 00:01:36,000
para el elemento del cuerpo, por lo que vamos a hacer eso.

31
00:01:36,000 --> 00:01:40,000
Tenemos un h1 y ul.

32
00:01:40,000 --> 00:01:43,000
Finalmente, el elemento ul tiene 3 hijos más,

33
00:01:43,000 --> 00:01:50,000
y esto completará nuestro árbol DOM, por lo que vamos a añadir li, li, li.

34
00:01:50,000 --> 00:01:56,000
Esto completa nuestro árbol DOM, y es así como el navegador es el almacenamiento de su página web.

35
00:01:56,000 --> 00:02:02,000
Ahora echemos un vistazo a cómo podemos recorrer este árbol con JavaScript.

36
00:02:02,000 --> 00:02:10,000
Podemos acceder a este árbol usando una variable especial llamada JavaScript documento.

37
00:02:10,000 --> 00:02:13,000
Una de las propiedades de este objeto documento

38
00:02:13,000 --> 00:02:16,000
es propiedad del cuerpo, y este objeto representa

39
00:02:16,000 --> 00:02:19,000
el elemento del cuerpo en nuestro ejemplo página web.

40
00:02:19,000 --> 00:02:23,000
Si quisiéramos obtener todos los elementos secundarios del elemento del cuerpo,

41
00:02:23,000 --> 00:02:26,000
que si recuerda es que la etiqueta h1 y la etiqueta ul,

42
00:02:26,000 --> 00:02:37,000
podemos decir document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Y esto nos va a devolver una matriz que contiene tanto el elemento h1

44
00:02:41,000 --> 00:02:46,000
y el elemento ul ya que ambos son hijos directos del cuerpo.

45
00:02:46,000 --> 00:02:50,000
Si queremos crear una variable que representa el elemento ul

46
00:02:50,000 --> 00:02:57,000
podemos decir vrr ul = entonces el código aquí arriba,

47
00:02:57,000 --> 00:03:00,000
y ahora ya childNodes es simplemente un conjunto

48
00:03:00,000 --> 00:03:07,000
que puede indexar en ella con [1] para obtener el segundo elemento de esa matriz.

49
00:03:07,000 --> 00:03:13,000
Con este nuevo objeto ul podemos acceder a diversas propiedades del elemento como su ID.

50
00:03:13,000 --> 00:03:17,000
Si decimos ul.id que va a ser igual a la lista de cadenas

51
00:03:17,000 --> 00:03:20,000
porque eso es lo que tenemos en nuestra página HTML.

52
00:03:20,000 --> 00:03:24,000
También podemos obtener su tagName, que en este caso va a ser

53
00:03:24,000 --> 00:03:32,000
qué tipo de elemento que es, en este caso, un ul.

54
00:03:32,000 --> 00:03:36,000
También podemos obtener su padre o el nodo por encima de ella, que en este caso

55
00:03:36,000 --> 00:03:38,000
va a ser el elemento del cuerpo.

56
00:03:38,000 --> 00:03:43,000
Si decimos. ParentNode, que va a ser el mismo que document.body.

57
00:03:43,000 --> 00:03:46,000
Por supuesto, esta ul tiene hijos de su propia,

58
00:03:46,000 --> 00:03:50,000
por lo que todavía se puede decir. childNodes en este elemento,

59
00:03:50,000 --> 00:03:55,000
y este conjunto ahora debe tener la longitud 3, porque hay 3 elementos de la lista.

60
00:03:55,000 --> 00:04:02,000
Por último, tal vez la característica más útil va a ser. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
y este será el contenido real de la lista, que en nuestra página de ejemplo

62
00:04:06,000 --> 00:04:08,000
eran esos 3 etiquetas li.

63
00:04:08,000 --> 00:04:11,000
Por supuesto, si tenemos un documento de gran tamaño, el acceso a los elementos

64
00:04:11,000 --> 00:04:14,000
de esta manera va a ser muy complicado porque

65
00:04:14,000 --> 00:04:17,000
finalmente vamos a tener que decir cosas como document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
Soporte de algo. ChildNodes soporte algo más,

67
00:04:21,000 --> 00:04:23,000
y que va a ser realmente complicado.

68
00:04:23,000 --> 00:04:27,000
En cambio, lo que realmente queremos hacer es ser capaz de consultar el documento,

69
00:04:27,000 --> 00:04:30,000
Así que al igual buscamos cosas en Internet con las palabras clave

70
00:04:30,000 --> 00:04:33,000
Realmente necesitamos alguna manera de buscar este documento sucinto

71
00:04:33,000 --> 00:04:37,000
volver sólo los elementos que nos interesan sin atravesar

72
00:04:37,000 --> 00:04:39,000
toda la parte superior del árbol hacia abajo.

73
00:04:39,000 --> 00:04:42,000
Por suerte, los navegadores modernos nos permiten hacer este

74
00:04:42,000 --> 00:04:47,000
con una función especial llamada querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
y esta función toma un solo argumento

76
00:04:49,000 --> 00:04:53,000
que es un selector CSS, y va a regresar con nosotros

77
00:04:53,000 --> 00:04:56,000
todos los elementos que responden a dicho selector.

78
00:04:56,000 --> 00:04:59,000
Eso significa que usted no tiene que aprender una sintaxis completamente nuevo para la consulta de la DOM.

79
00:04:59,000 --> 00:05:02,000
En su lugar se puede aplicar el conocimiento que usted ya sabe

80
00:05:02,000 --> 00:05:04,000
sobre selectores CSS.

81
00:05:04,000 --> 00:05:07,000
Echemos un vistazo a algunos ejemplos de consulta del documento.

82
00:05:07,000 --> 00:05:13,000
Si decimos querySelectorAll y pasamos este string # foo

83
00:05:13,000 --> 00:05:18,000
que nos va a devolver el elemento con el ID foo.

84
00:05:18,000 --> 00:05:23,000
También se puede decir document.getElementById

85
00:05:23,000 --> 00:05:28,000
y pasar la cadena foo sin ese hashtag.

86
00:05:28,000 --> 00:05:31,000
Vas a volver exactamente el mismo objeto.

87
00:05:31,000 --> 00:05:37,000
Si por el contrario se pasa la cadena. Bar de document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
vamos a volver todos los elementos con la barra de clase.

89
00:05:42,000 --> 00:05:45,000
También podemos combinar selectores CSS.

90
00:05:45,000 --> 00:05:51,000
Si pasamos de la cadena # foo img

91
00:05:51,000 --> 00:05:54,000
que nos va a devolver todos los elementos de imagen

92
00:05:54,000 --> 00:05:58,000
que son hijos del elemento con el ID foo.

93
00:05:58,000 --> 00:06:03,000
Como se puede ver, por los selectores combinan tenemos algunos muy potentes capacidades de búsqueda.

94
00:06:03,000 --> 00:06:06,000
Pero bajo el capó, el DOM es realmente sólo un árbol,

95
00:06:06,000 --> 00:06:10,000
y estos selectores permiten abstracta que fuera hasta cierto punto

96
00:06:10,000 --> 00:06:14,000
porque no siempre nos preocupamos por toda la estructura del árbol DOM.

97
00:06:14,000 --> 00:06:18,000
Esa fue una visión rápida de la DOM, y gracias por acompañarnos.

98
00:06:18,000 --> 00:06:20,000
[CS50.TV]