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] [Universitat de Harvard]

3
00:00:04,000 --> 00:00:07,000
[Aquest és CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
En aquest vídeo anem a fer una ullada a la DOM.

5
00:00:10,000 --> 00:00:14,000
Quan un navegador descarrega una pàgina web, necessita ser representat en la memòria d'alguna manera.

6
00:00:14,000 --> 00:00:17,000
El model d'objecte de document, o DOM,

7
00:00:17,000 --> 00:00:20,000
descriu com el navegador representa una pàgina web en la memòria.

8
00:00:20,000 --> 00:00:24,000
En aquest vídeo, anem a fer una ullada a la DOM en el context de JavaScript,

9
00:00:24,000 --> 00:00:26,000
però DOM és un concepte independent del llenguatge.

10
00:00:26,000 --> 00:00:30,000
Per exemple, PHP té la seva pròpia implementació DOM també.

11
00:00:30,000 --> 00:00:32,000
No obstant això, DOM s'utilitza amb freqüència per JavaScript

12
00:00:32,000 --> 00:00:36,000
des de JavaScript ens permet canviar el contingut d'una pàgina web sobre la marxa,

13
00:00:36,000 --> 00:00:39,000
DOM i ens permet accedir a parts d'una pàgina web.

14
00:00:39,000 --> 00:00:43,000
Anem a fer una ullada a la pàgina web d'exemple.

15
00:00:43,000 --> 00:00:48,000
Bé, ara veurem com aquesta pàgina estarà representat en el DOM.

16
00:00:48,000 --> 00:00:51,000
I cada arbre ha de tenir un node arrel en la part superior.

17
00:00:51,000 --> 00:00:54,000
En aquest document, l'element HTML és el node arrel

18
00:00:54,000 --> 00:00:56,000
perquè és el primer element que apareix.

19
00:00:56,000 --> 00:01:00,000
Anem a afegir un node arrel del nostre arbre.

20
00:01:00,000 --> 00:01:03,000
Anem a fer una ullada al document HTML nou.

21
00:01:03,000 --> 00:01:09,000
Observeu que l'etiqueta del cos llisca per l'interior de l'etiqueta HTML.

22
00:01:09,000 --> 00:01:14,000
Això vol dir que el cos és un element secundari de l'element HTML.

23
00:01:14,000 --> 00:01:17,000
Podem representar això en el nostre arbre DOM en fer el cos d'un full

24
00:01:17,000 --> 00:01:20,000
descendent d'HTML.

25
00:01:20,000 --> 00:01:22,000
Farem això.

26
00:01:22,000 --> 00:01:24,000
Tenim cos sota HTML.

27
00:01:24,000 --> 00:01:28,000
Ara podem veure que el cos té 2 fills de la seva pròpia,

28
00:01:28,000 --> 00:01:31,000
l'element h1 i l'element ul.

29
00:01:31,000 --> 00:01:34,000
Això significa que podem connectar aquests dos elements

30
00:01:34,000 --> 00:01:36,000
per l'element del cos, per la qual cosa farem això.

31
00:01:36,000 --> 00:01:40,000
Tenim un h1 i ul.

32
00:01:40,000 --> 00:01:43,000
Finalment, l'element ul té 3 fills més,

33
00:01:43,000 --> 00:01:50,000
i això completarà nostre arbre DOM, així que anem a afegir li, li, li.

34
00:01:50,000 --> 00:01:56,000
Això completa el nostre arbre DOM, i és així com el navegador és l'emmagatzematge de la seva pàgina web.

35
00:01:56,000 --> 00:02:02,000
Ara donem una ullada a com podem recórrer aquest arbre amb JavaScript.

36
00:02:02,000 --> 00:02:10,000
Podem accedir a aquest arbre utilitzant una variable especial anomenada JavaScript document.

37
00:02:10,000 --> 00:02:13,000
Una de les propietats d'aquest objecte document

38
00:02:13,000 --> 00:02:16,000
és propietat del cos, i aquest objecte representa

39
00:02:16,000 --> 00:02:19,000
l'element del cos en el nostre exemple pàgina web.

40
00:02:19,000 --> 00:02:23,000
Si volguéssim obtenir tots els elements secundaris de l'element del cos,

41
00:02:23,000 --> 00:02:26,000
que si recorda és que l'etiqueta h1 i l'etiqueta ul,

42
00:02:26,000 --> 00:02:37,000
podem dir document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
I això ens va a tornar una matriu que conté tant l'element h1

44
00:02:41,000 --> 00:02:46,000
i l'element ul ja que tots dos són fills directes del cos.

45
00:02:46,000 --> 00:02:50,000
Si volem crear una variable que representa l'element ul

46
00:02:50,000 --> 00:02:57,000
podem dir VRR ul = llavors el codi aquí dalt,

47
00:02:57,000 --> 00:03:00,000
i ara ja childNodes és simplement un conjunt

48
00:03:00,000 --> 00:03:07,000
que pot indexar-hi amb [1] per obtenir el segon element d'aquesta matriu.

49
00:03:07,000 --> 00:03:13,000
Amb aquest nou objecte ul podem accedir a diverses propietats de l'element com el seu ID.

50
00:03:13,000 --> 00:03:17,000
Si diem ul.id que serà igual a la llista de cadenes

51
00:03:17,000 --> 00:03:20,000
perquè això és el que tenim a la nostra pàgina HTML.

52
00:03:20,000 --> 00:03:24,000
També podem obtenir la seva tagName, que en aquest cas serà

53
00:03:24,000 --> 00:03:32,000
quin tipus d'element que és, en aquest cas, un ul.

54
00:03:32,000 --> 00:03:36,000
També podem obtenir el seu pare o el node per sobre d'ella, que en aquest cas

55
00:03:36,000 --> 00:03:38,000
serà l'element del cos.

56
00:03:38,000 --> 00:03:43,000
Si diem. ParentNode, que serà el mateix que document.body.

57
00:03:43,000 --> 00:03:46,000
Per descomptat, aquesta ul té fills de la seva pròpia,

58
00:03:46,000 --> 00:03:50,000
pel que encara es pot dir. childNodes en aquest element,

59
00:03:50,000 --> 00:03:55,000
i aquest conjunt ara ha de tenir la longitud 3, perquè hi ha 3 elements de la llista.

60
00:03:55,000 --> 00:04:02,000
Finalment, potser la característica més útil serà. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
i aquest serà el contingut real de la llista, que en la nostra pàgina d'exemple

62
00:04:06,000 --> 00:04:08,000
eren eixos 3 etiquetes li.

63
00:04:08,000 --> 00:04:11,000
Per descomptat, si tenim un document de gran grandària, l'accés als elements

64
00:04:11,000 --> 00:04:14,000
d'aquesta manera serà molt complicat perquè

65
00:04:14,000 --> 00:04:17,000
finalment anem a haver de dir coses com document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
Suport d'alguna cosa. ChildNodes suport una mica més,

67
00:04:21,000 --> 00:04:23,000
i que serà realment complicat.

68
00:04:23,000 --> 00:04:27,000
En canvi, el que realment volem fer és ser capaç de consultar el document,

69
00:04:27,000 --> 00:04:30,000
Així que igual busquem coses a Internet amb les paraules clau

70
00:04:30,000 --> 00:04:33,000
Realment necessitem alguna manera de buscar aquest document succint

71
00:04:33,000 --> 00:04:37,000
tornar només els elements que ens interessen sense travessar

72
00:04:37,000 --> 00:04:39,000
tota la part superior de l'arbre cap avall.

73
00:04:39,000 --> 00:04:42,000
Per sort, els navegadors moderns ens permeten fer aquest

74
00:04:42,000 --> 00:04:47,000
amb una cosa anomenada querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
i aquesta funció pren un sol argument

76
00:04:49,000 --> 00:04:53,000
que és un selector CSS, i va a tornar amb nosaltres

77
00:04:53,000 --> 00:04:56,000
tots els elements que responen a aquest selector.

78
00:04:56,000 --> 00:04:59,000
Això vol dir que vostè no ha d'aprendre una sintaxi completament nou per a la consulta de la DOM.

79
00:04:59,000 --> 00:05:02,000
En el seu lloc es pot aplicar el coneixement que vostè ja sap

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

81
00:05:04,000 --> 00:05:07,000
Fem una ullada a alguns exemples de consulta del document.

82
00:05:07,000 --> 00:05:13,000
Si diem querySelectorAll i passem aquest string # foo

83
00:05:13,000 --> 00:05:18,000
que ens va a tornar l'element amb l'ID foo.

84
00:05:18,000 --> 00:05:23,000
També es pot dir document.getElementById

85
00:05:23,000 --> 00:05:28,000
i passar la cadena foo sense aquest hashtag.

86
00:05:28,000 --> 00:05:31,000
Esteu tornar exactament el mateix objecte.

87
00:05:31,000 --> 00:05:37,000
Si per contra es passa la cadena. Bar de document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
anem a tornar tots els elements amb la barra de classe.

89
00:05:42,000 --> 00:05:45,000
També podem combinar selectors CSS.

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

91
00:05:51,000 --> 00:05:54,000
que ens va a retornar tots els elements d'imatge

92
00:05:54,000 --> 00:05:58,000
que són fills de l'element amb l'identificador foo.

93
00:05:58,000 --> 00:06:03,000
Com es pot veure, pels selectors combinen tenim alguns molt potents capacitats de cerca.

94
00:06:03,000 --> 00:06:06,000
Però sota el capó, el DOM és realment només un arbre,

95
00:06:06,000 --> 00:06:10,000
i aquests selectors permeten abstracta que fos fins a cert punt

96
00:06:10,000 --> 00:06:14,000
perquè no sempre ens preocupem per tota l'estructura de l'arbre DOM.

97
00:06:14,000 --> 00:06:18,000
Aquesta va ser una visió ràpida de la DOM, i gràcies per acompanyar-nos.

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