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 University]

3
00:00:04,000 --> 00:00:07,000
[Ito ay CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
Sa video na ito kami ay pagpunta sa tumingin sa mga DOM.

5
00:00:10,000 --> 00:00:14,000
Kapag ang isang browser Dina-download ang isang webpage, ito ay kinakailangan na kinakatawan sa memory kahit papaano.

6
00:00:14,000 --> 00:00:17,000
Ang dokumento object modelo, o DOM,

7
00:00:17,000 --> 00:00:20,000
naglalarawan kung paano browser ang kumakatawan sa isang webpage sa memorya.

8
00:00:20,000 --> 00:00:24,000
Sa video na ito, isasaalang-alang namin tumingin sa ang DOM sa konteksto ng JavaScript,

9
00:00:24,000 --> 00:00:26,000
ngunit DOM ay isang wika-malayang konsepto.

10
00:00:26,000 --> 00:00:30,000
Halimbawa, PHP ay may sarili nitong DOM pagpapatupad pati na rin.

11
00:00:30,000 --> 00:00:32,000
Gayunpaman, DOM ay madalas na ginagamit ng JavaScript

12
00:00:32,000 --> 00:00:36,000
dahil ang JavaScript ay nagbibigay-daan sa amin upang baguhin ang mga nilalaman ng isang webpage sa mabilisang,

13
00:00:36,000 --> 00:00:39,000
DOM at nagbibigay-daan sa amin upang ma-access ang mga bahagi ng isang webpage.

14
00:00:39,000 --> 00:00:43,000
Ating tingnan ang isang halimbawa webpage.

15
00:00:43,000 --> 00:00:48,000
Okay, ngayon sabihin makita kung paano ang pahina na ito ay kakatawanin sa DOM.

16
00:00:48,000 --> 00:00:51,000
At puno bawat pangangailangan upang magkaroon ng isang ugat na node sa tuktok.

17
00:00:51,000 --> 00:00:54,000
Para sa mga dokumentong ito, ang mga HTML element ay ang root node

18
00:00:54,000 --> 00:00:56,000
dahil ito ang unang elemento na lilitaw.

19
00:00:56,000 --> 00:01:00,000
Sabihin magdagdag ng isang root node sa aming tree.

20
00:01:00,000 --> 00:01:03,000
Ating tingnan ang dokumentong HTML muli.

21
00:01:03,000 --> 00:01:09,000
Mapapansin na ang body tag ay nested sa loob ng tag na HTML.

22
00:01:09,000 --> 00:01:14,000
Nangangahulugan ito na ang mga elemento ng katawan ay isang anak ng HTML element.

23
00:01:14,000 --> 00:01:17,000
Maaari naming kumakatawan ito sa aming DOM puno sa pamamagitan ng paggawa ng katawan ng isang dahon

24
00:01:17,000 --> 00:01:20,000
pababang mula sa HTML.

25
00:01:20,000 --> 00:01:22,000
Tayo'y gawin iyon.

26
00:01:22,000 --> 00:01:24,000
Mayroon kaming mga katawan sa ilalim HTML.

27
00:01:24,000 --> 00:01:28,000
Ngayon ay maaari naming makita ang katawan na ito ay may 2 anak ng sarili nitong,

28
00:01:28,000 --> 00:01:31,000
ang h1 elemento at ang ul elemento.

29
00:01:31,000 --> 00:01:34,000
Nangangahulugan ito na maaari naming ikonekta ang parehong mga elemento

30
00:01:34,000 --> 00:01:36,000
sa mga elemento katawan, kaya natin gawin iyon.

31
00:01:36,000 --> 00:01:40,000
Mayroon kaming isang h1 at isang ul.

32
00:01:40,000 --> 00:01:43,000
Sa wakas, ang ul elemento ay may 3 mga bata pa,

33
00:01:43,000 --> 00:01:50,000
at ito ay makumpleto ang aming DOM tree, kaya natin idagdag li, li, li.

34
00:01:50,000 --> 00:01:56,000
Ito makumpleto ng aming DOM tree, at ito ay kung paano browser ang pag-iimbak ng iyong webpage.

35
00:01:56,000 --> 00:02:02,000
Ngayon sabihin tumingin sa kung paano namin maaaring tumawid ito puno gamit ang JavaScript.

36
00:02:02,000 --> 00:02:10,000
Maaari naming i-access ang puno ng paggamit ng isang espesyal na variable JavaScript tinatawag na dokumento.

37
00:02:10,000 --> 00:02:13,000
One-aari ng sa bagay na ito dokumento

38
00:02:13,000 --> 00:02:16,000
ay ang katawan ari-arian, at mga bagay na ito ay kumakatawan

39
00:02:16,000 --> 00:02:19,000
ang katawan sangkap sa aming halimbawa webpage.

40
00:02:19,000 --> 00:02:23,000
Kung gusto naming upang makakuha ng lahat ng mga anak ng mga elemento ng katawan,

41
00:02:23,000 --> 00:02:26,000
na kung tandaan mo na ang h1 tag at ang ul tag,

42
00:02:26,000 --> 00:02:37,000
maaari naming sabihin document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
At ito ay magbibigay sa amin pabalik isang array na naglalaman ng parehong mga elemento h1

44
00:02:41,000 --> 00:02:46,000
at ang ul elemento dahil ang mga ito ay parehong mga direktang mga bata ng katawan.

45
00:02:46,000 --> 00:02:50,000
Kung gusto naming lumikha ng isang variable na kumakatawan sa mga elemento ul

46
00:02:50,000 --> 00:02:57,000
maaari naming sabihin vrr ul = pagkatapos ay ang code na ito up dito,

47
00:02:57,000 --> 00:03:00,000
at ngayon dahil childNodes ay lamang ng isang array

48
00:03:00,000 --> 00:03:07,000
kaya namin sa index ito sa [1] upang makuha ang pangalawang elemento ng array na.

49
00:03:07,000 --> 00:03:13,000
Gamit ang bagong bagay ul maaari naming ma-access ang iba't-ibang mga katangian ng mga elemento tulad nito ID.

50
00:03:13,000 --> 00:03:17,000
Kung sabihin namin ul.id na pupuntahan magiging katumbas ng listahan string

51
00:03:17,000 --> 00:03:20,000
dahil iyon ang kung ano ang mayroon kami sa aming mga pahina ng HTML.

52
00:03:20,000 --> 00:03:24,000
Maaari din naming kumuha nito tagName, na sa kasong ito ay magiging

53
00:03:24,000 --> 00:03:32,000
kung anong uri ng elemento ito ay, sa kasong ito, ang isang ul.

54
00:03:32,000 --> 00:03:36,000
Maaari din naming kumuha nito magulang o ang node sa itaas nito, na sa kasong ito

55
00:03:36,000 --> 00:03:38,000
ay pagpunta sa maging sa katawan elemento.

56
00:03:38,000 --> 00:03:43,000
Kung sabihin namin. ParentNode, na nangyayari na maging kapareho ng document.body.

57
00:03:43,000 --> 00:03:46,000
Siyempre, ul na ito ay may mga anak ng kanyang sarili,

58
00:03:46,000 --> 00:03:50,000
sa gayon ay maaari pa rin namin sasabihin. childNodes ito sa elemento,

59
00:03:50,000 --> 00:03:55,000
at array na ito ay dapat na ngayon ay may haba 3 dahil mayroong 3 mga item sa aming listahan.

60
00:03:55,000 --> 00:04:02,000
Sa wakas, marahil ang pinaka-kapaki-pakinabang na ari-arian ay magiging. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
at ito ay ang aktwal na nilalaman ng mga listahan, na sa aming halimbawang pahina

62
00:04:06,000 --> 00:04:08,000
ay mga 3 li tag.

63
00:04:08,000 --> 00:04:11,000
Siyempre, kung kami ay may isang malaking dokumento, pag-access sa mga elemento

64
00:04:11,000 --> 00:04:14,000
sa ganitong paraan ay magiging talagang pahirap dahil

65
00:04:14,000 --> 00:04:17,000
malaon gagamitin namin sasabihin ng mga bagay tulad ng document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
bracket ng isang bagay. childNodes bracket ibang bagay,

67
00:04:21,000 --> 00:04:23,000
at ito ay pagpunta upang makakuha ng talagang mahirap.

68
00:04:23,000 --> 00:04:27,000
Sa halip kung ano ang aming talagang gusto lang gawin ay magagawang i-query ang dokumento,

69
00:04:27,000 --> 00:04:30,000
kaya lang i naghanap kami para sa mga bagay sa internet gamit ang mga keyword

70
00:04:30,000 --> 00:04:33,000
namin talagang kailangan ang ilang mga paraan ng paghahanap ng dokumentong ito upang succinctly

71
00:04:33,000 --> 00:04:37,000
bumalik lamang ang mga elemento pinapahalagahan namin ang tungkol sa walang traversing

72
00:04:37,000 --> 00:04:39,000
ang buong tuktok puno hanggang ibaba.

73
00:04:39,000 --> 00:04:42,000
Sa kabutihang-palad, modernong mga browser daan sa amin upang gawin ito

74
00:04:42,000 --> 00:04:47,000
na may isang espesyal na function na tinatawag na querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
at pag-andar na ito ay tumatagal ng isang solong argument

76
00:04:49,000 --> 00:04:53,000
iyon ay isang CSS selector, at ito ay pagpunta sa ibalik sa amin

77
00:04:53,000 --> 00:04:56,000
ang lahat ng mga elemento na tugma sa selector.

78
00:04:56,000 --> 00:04:59,000
Nangangahulugan iyon na hindi mo kailangang malaman ng isang buong bagong syntax para sa querying ang DOM.

79
00:04:59,000 --> 00:05:02,000
Sa halip na maaari mong ilapat ang kaalaman alam mo na

80
00:05:02,000 --> 00:05:04,000
tungkol sa tagapili ng CSS.

81
00:05:04,000 --> 00:05:07,000
Ating tingnan ang ilang mga halimbawa ng querying ang dokumento.

82
00:05:07,000 --> 00:05:13,000
Kung sabihin namin querySelectorAll at pumasa ito sa ganitong string # foo

83
00:05:13,000 --> 00:05:18,000
na pupuntahan bigyan kami pabalik ang elemento na may ID foo.

84
00:05:18,000 --> 00:05:23,000
Maaari mo ring sabihin document.getElementByID

85
00:05:23,000 --> 00:05:28,000
at pumasa ito ang string foo nang hindi na hashtag.

86
00:05:28,000 --> 00:05:31,000
Ikaw ay pagpunta upang makabalik sa parehong eksaktong bagay.

87
00:05:31,000 --> 00:05:37,000
Kung sa halip namin ipapasa ang mga string. Bar upang document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
kami ay pagpunta upang makabalik ang lahat ng mga elemento sa bar class.

89
00:05:42,000 --> 00:05:45,000
Maaari din naming pagsamahin ang tagapili ng CSS.

90
00:05:45,000 --> 00:05:51,000
Kung pumasa kami sa string # foo img

91
00:05:51,000 --> 00:05:54,000
na pupuntahan bigyan kami pabalik ang lahat ng mga elemento ng imahe

92
00:05:54,000 --> 00:05:58,000
na ang mga bata ng mga elemento na may ID foo.

93
00:05:58,000 --> 00:06:03,000
Tulad ng iyong nakikita, pamamagitan ng pagsasama ng tagapili mayroon kaming ilang mga talagang mahusay na kakayahan sa paghahanap.

94
00:06:03,000 --> 00:06:06,000
Ngunit sa ilalim ng hood, ang DOM ay talagang lamang ng isang puno,

95
00:06:06,000 --> 00:06:10,000
at mga tagapili ng daan sa amin upang abstract na ang layo sa ilang mga degree na

96
00:06:10,000 --> 00:06:14,000
dahil hindi kami laging mahalaga tungkol sa ang buong istraktura ng tree DOM.

97
00:06:14,000 --> 00:06:18,000
Iyon ay isang mabilis na pangkalahatang-ideya ng DOM, at salamat sa pagsali sa amin.

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