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] [Harvard Unibertsitateko]

3
00:00:04,000 --> 00:00:07,000
[Hau da CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
Bideo honetan DOM begirada bat hartu behar dugu.

5
00:00:10,000 --> 00:00:14,000
Noiz nabigatzaile bat web orri bat deskargatzen du, memoria egin behar nolabait irudikatzen du.

6
00:00:14,000 --> 00:00:17,000
Dokumentuaren objektu-eredua, edo DOM,

7
00:00:17,000 --> 00:00:20,000
nola nabigatzailea memorian web orrialde bat adierazten du.

8
00:00:20,000 --> 00:00:24,000
Bideo honetan, DOM begirada bat hartuko dugu Javascript testuinguruan,

9
00:00:24,000 --> 00:00:26,000
baina DOM hizkuntza-independentea kontzeptu bat da.

10
00:00:26,000 --> 00:00:30,000
Adibidez, PHP bere DOM ezartzeko ditu baita ere.

11
00:00:30,000 --> 00:00:32,000
Hala ere, maiz DOM Ikusteko Javascript-a erabiltzen

12
00:00:32,000 --> 00:00:36,000
Ikusteko Javascript-a esker, web orri baten edukia aldatzeko gurekin hegan geroztik,

13
00:00:36,000 --> 00:00:39,000
DOM eta aukera ematen du web-orri baten zatiak sartzeko aukera ematen digu.

14
00:00:39,000 --> 00:00:43,000
Ikus dezagun, adibidez web orri bat ikustea.

15
00:00:43,000 --> 00:00:48,000
Ongi da, orain nola utzi orri hau DOM egingo den irudikatzen en ikusi.

16
00:00:48,000 --> 00:00:51,000
Eta zuhaitz bakoitzak erro nodo bat dute goialdean.

17
00:00:51,000 --> 00:00:54,000
Dokumentu honetan, HTML elementu erroko nodoa da

18
00:00:54,000 --> 00:00:56,000
delako lehenengo elementu bat agertuko da.

19
00:00:56,000 --> 00:01:00,000
Dezagun gehitu erro nodo bat gure zuhaitza.

20
00:01:00,000 --> 00:01:03,000
Ikus dezagun HTML dokumentu begirada bat berriro.

21
00:01:03,000 --> 00:01:09,000
Iragarki gorputza etiketa hori HTML etiketa baten barruan habiaratu.

22
00:01:09,000 --> 00:01:14,000
Horrek esan nahi du gorputza elementu hori HTML elementu haur bat da.

23
00:01:14,000 --> 00:01:17,000
Honek adierazten dezakegu gure DOM zuhaitz gorputz hosto bat eginda

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

25
00:01:20,000 --> 00:01:22,000
Dezagun hori.

26
00:01:22,000 --> 00:01:24,000
Gorputza daukagu ​​HTML azpian.

27
00:01:24,000 --> 00:01:28,000
Orain ikusiko gorputza 2 ditu bere seme-alabak ahal izango dugu,

28
00:01:28,000 --> 00:01:31,000
du H1 elementu eta ul elementua.

29
00:01:31,000 --> 00:01:34,000
Horrek esan nahi du elementu horiek biak dugun konektatu ahal

30
00:01:34,000 --> 00:01:36,000
gorputzaren elementu, beraz, utzi egin dutela.

31
00:01:36,000 --> 00:01:40,000
H1 eta ul bat daukagu.

32
00:01:40,000 --> 00:01:43,000
Azkenik, ul elementu ditu 3 seme-alaba,

33
00:01:43,000 --> 00:01:50,000
eta hau gure DOM zuhaitz osatuko du, eta, beraz dezagun gehitu li, li, li.

34
00:01:50,000 --> 00:01:56,000
Hau da gure DOM zuhaitz osatzen du, eta hau da, nola nabigatzailea zure web da gordetzeko.

35
00:01:56,000 --> 00:02:02,000
Orain dezagun nola Zuhaitz hau JavaScript erabiliz zeharkatzeko aukera izango dugu begirada bat.

36
00:02:02,000 --> 00:02:10,000
Zuhaitz berezia da hau JavaScript aldagai izeneko dokumentua erabiliz sartu ahal izango dugu.

37
00:02:10,000 --> 00:02:13,000
Objektu bat dokumentu honen jabetza

38
00:02:13,000 --> 00:02:16,000
gorputzaren jabetza da, eta objektu honek adierazten

39
00:02:16,000 --> 00:02:19,000
Adibidez, gure web-orrian elementu gorputza.

40
00:02:19,000 --> 00:02:23,000
Nahi izan dugu, gorputza elementu ume guztiak lortu nahi izanez gero,

41
00:02:23,000 --> 00:02:26,000
horrek gogoratu baduzu h1 etiketa eta ul-etiketa da,

42
00:02:26,000 --> 00:02:37,000
document.body.childNodes esan dezakegu.

43
00:02:37,000 --> 00:02:41,000
Eta honetan gurekin emango array bat itzuli bai H1 elementu dauzkan

44
00:02:41,000 --> 00:02:46,000
eta ul elementu Oraindik baitute gorputzaren zuzeneko bi seme-alaba.

45
00:02:46,000 --> 00:02:50,000
Nahi izan dugu aldagai bat ul elementu ordezkari sortzeko bada

46
00:02:50,000 --> 00:02:57,000
esan vrr ul = ondoren, kode hau ezin dugu hemen,

47
00:02:57,000 --> 00:03:00,000
eta orain childNodes da, besterik gabe, delako array bat

48
00:03:00,000 --> 00:03:07,000
sartu indizea [1] array batera duten elementu bigarren lortzeko. dezakegu

49
00:03:07,000 --> 00:03:13,000
Hau ul berriak objektu hainbat elementu ezaugarri bere identifikazio bezala sartu ahal izango dugu.

50
00:03:13,000 --> 00:03:17,000
Esaten dugu ul.id hori kate zerrenda berdina izango bada

51
00:03:17,000 --> 00:03:20,000
hori da gure orria HTML dugulako.

52
00:03:20,000 --> 00:03:24,000
Era berean, ezin dugu lortu bere tagName, kasu honetan izango da

53
00:03:24,000 --> 00:03:32,000
zer elementu mota da, kasu honetan, ul batean.

54
00:03:32,000 --> 00:03:36,000
Era berean, ezin dugu lortu bere guraso edo gainean nodo, kasu honetan

55
00:03:36,000 --> 00:03:38,000
gorputz elementua izango da.

56
00:03:38,000 --> 00:03:43,000
Esaten dugu. ParentNode, hori document.body gisa berdina izango bada.

57
00:03:43,000 --> 00:03:46,000
Jakina, ul honek bere seme-alabak,

58
00:03:46,000 --> 00:03:50,000
beraz, oraindik ere esan dezakegu. childNodes elementu honen gainean,

59
00:03:50,000 --> 00:03:55,000
eta array behar dute luzera 3 daude, 3, gure zerrendako elementuak direlako.

60
00:03:55,000 --> 00:04:02,000
Azkenik, agian erabilgarria jabetza da izango. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
eta zerrenda honen edukia egiazkoa izango da, adibidez, gure orria

62
00:04:06,000 --> 00:04:08,000
ziren 3 li tags.

63
00:04:08,000 --> 00:04:11,000
Jakina, izan badugu handi dokumentu bat, elementu sartzean

64
00:04:11,000 --> 00:04:14,000
era honetan benetan astuna izango delako

65
00:04:14,000 --> 00:04:17,000
azkenean izan document.body.childNodes bezalako gauzak esaten dugu

66
00:04:17,000 --> 00:04:21,000
parentesi zerbait. parentesi beste zerbait childNodes,

67
00:04:21,000 --> 00:04:23,000
astuna eta benetan iritsi da joan.

68
00:04:23,000 --> 00:04:27,000
Horren ordez, zer nahi dugun egin ahal izango da dokumentu galdetzeko,

69
00:04:27,000 --> 00:04:30,000
beraz, besterik gabe, gustuko gauzak bilatuko dugu Interneteko gako-hitzen bidez

70
00:04:30,000 --> 00:04:33,000
benetan behar dugu dokumentu hau bilatzen succinctly modu batzuk

71
00:04:33,000 --> 00:04:37,000
itzuli bakarrik elementuak zaintzeko dugun zeharkatu gabe

72
00:04:37,000 --> 00:04:39,000
zuhaitz osoa goitik behera.

73
00:04:39,000 --> 00:04:42,000
Zorionez, nabigatzaile moderno hau egiteko aukera ematen digu

74
00:04:42,000 --> 00:04:47,000
funtzio berezi bat deitu querySelectorAll batera,

75
00:04:47,000 --> 00:04:49,000
eta funtzio honek argumentu soil bat hartzen du

76
00:04:49,000 --> 00:04:53,000
duten CSS hautatzailea da, eta gurekin itzuliko da joan

77
00:04:53,000 --> 00:04:56,000
elementu bat datozen hautatzaileak duten guztiak.

78
00:04:56,000 --> 00:04:59,000
Horrek esan nahi du, ez duzu berri oso bat sintaxia ikasteko DOM du kontsulta egiteko.

79
00:04:59,000 --> 00:05:02,000
Horren ordez, ezagutza jakin jadanik eska dezakezu

80
00:05:02,000 --> 00:05:04,000
CSS Selectors buruz.

81
00:05:04,000 --> 00:05:07,000
Ikus dezagun dokumentua kontsulta adibide batzuk begirada bat.

82
00:05:07,000 --> 00:05:13,000
Esaten dugu querySelectorAll bada, eta pasatzen da hau kate # foo

83
00:05:13,000 --> 00:05:18,000
hori gurekin itzuli ID foo duen elementua dugu.

84
00:05:18,000 --> 00:05:23,000
Dezakezu ere esan document.getElementByID

85
00:05:23,000 --> 00:05:28,000
eta pasatu da hashtag hori gabe foo katea.

86
00:05:28,000 --> 00:05:31,000
Itzuli berean zehatza objektu duzu.

87
00:05:31,000 --> 00:05:37,000
Ordez document.querySelectorAll bar katea. Pasatzeko badugu

88
00:05:37,000 --> 00:05:42,000
itzuli klase barra elementu guztiak ditugu.

89
00:05:42,000 --> 00:05:45,000
Era berean, ezin dugu konbinatu CSS Selectors.

90
00:05:45,000 --> 00:05:51,000
Katea # foo img gara pasatzen bada

91
00:05:51,000 --> 00:05:54,000
hori gurekin itzuli irudiaren elementu guztiak joan

92
00:05:54,000 --> 00:05:58,000
duten ID foo elementu ume daude.

93
00:05:58,000 --> 00:06:03,000
Ikusten duzun bezala, Selectors konbinatuz batzuk benetan indartsu bilaketa gaitasunak ditugu.

94
00:06:03,000 --> 00:06:06,000
Baina kanpaia azpian, DOM benetan besterik zuhaitz bat,

95
00:06:06,000 --> 00:06:10,000
eta Selectors onartzen abstraktu gurekin urruntzen duten neurri batzuk

96
00:06:10,000 --> 00:06:14,000
ez delako beti DOM zuhaitzaren egitura osoa zaintzeko.

97
00:06:14,000 --> 00:06:18,000
DOM duten ikuspegi orokor bat, eta gurekin atxikitzeko esker izan da.

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