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

2
00:00:02,000 --> 00:00:04,000
[ტომი MacWilliams] [ჰარვარდის უნივერსიტეტი]

3
00:00:04,000 --> 00:00:07,000
[ეს არის CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
ამ ვიდეო ჩვენ ვაპირებთ შევხედოთ DOM.

5
00:00:10,000 --> 00:00:14,000
როდესაც ბრაუზერი იწერს ვებგვერდზე, უნდა იყოს წარმოდგენილი მეხსიერება რატომღაც.

6
00:00:14,000 --> 00:00:17,000
დოკუმენტის ობიექტური მოდელი, DOM,

7
00:00:17,000 --> 00:00:20,000
აღწერილია, თუ როგორ ბრაუზერის წარმოადგენს ვებგვერდზე მეხსიერებაში.

8
00:00:20,000 --> 00:00:24,000
ამ ვიდეო, ჩვენ შევხედოთ DOM კონტექსტში JavaScript,

9
00:00:24,000 --> 00:00:26,000
მაგრამ DOM არის ენის დამოუკიდებელი კონცეფცია.

10
00:00:26,000 --> 00:00:30,000
მაგალითად, PHP აქვს საკუთარი DOM განხორციელებისათვის,.

11
00:00:30,000 --> 00:00:32,000
თუმცა, DOM ხშირად გამოყენებული JavaScript

12
00:00:32,000 --> 00:00:36,000
მას შემდეგ, რაც JavaScript საშუალებას გვაძლევს შეცვლის შინაარსი ვებგვერდის on the fly,

13
00:00:36,000 --> 00:00:39,000
და DOM საშუალებას გვაძლევს, რათა შეამოწმონ ნაწილების ვებგვერდზე.

14
00:00:39,000 --> 00:00:43,000
მოდით შევხედოთ მაგალითად ვებგვერდზე.

15
00:00:43,000 --> 00:00:48,000
კარგი, ახლა ვნახოთ, თუ როგორ ამ გვერდზე იქნება წარმოდგენილი, DOM.

16
00:00:48,000 --> 00:00:51,000
და ყოველი ხე სჭირდება ძირეული კვანძის ზედა.

17
00:00:51,000 --> 00:00:54,000
ამ დოკუმენტს, HTML ელემენტი ძირეული კვანძის

18
00:00:54,000 --> 00:00:56,000
იმიტომ, რომ ეს არის პირველი ელემენტი, რომელიც, როგორც ჩანს.

19
00:00:56,000 --> 00:01:00,000
მოდით დაამატოთ ძირეული კვანძის ჩვენი ხე.

20
00:01:00,000 --> 00:01:03,000
მოდით შევხედოთ HTML დოკუმენტი კიდევ ერთხელ.

21
00:01:03,000 --> 00:01:09,000
გავითვალისწინოთ, რომ სხეულის ტეგი წყობილი შიგნით HTML აქვს.

22
00:01:09,000 --> 00:01:14,000
ეს ნიშნავს, რომ სხეულის ელემენტი ბავშვი HTML ელემენტს.

23
00:01:14,000 --> 00:01:17,000
ჩვენ შეგვიძლია წარმოადგენს ამ ჩვენს DOM ხე მიერ მიღების ორგანოს ფოთოლი

24
00:01:17,000 --> 00:01:20,000
დაღმავალი ეხლა HTML.

25
00:01:20,000 --> 00:01:22,000
მოდით, რომ.

26
00:01:22,000 --> 00:01:24,000
ჩვენ გვყავს სხეულის ქვეშ HTML.

27
00:01:24,000 --> 00:01:28,000
ახლა ჩვენ ვხედავთ, რომ სხეული 2 შვილი საკუთარი,

28
00:01:28,000 --> 00:01:31,000
h1 ელემენტს და ul ელემენტს.

29
00:01:31,000 --> 00:01:34,000
ეს იმას ნიშნავს, რომ ჩვენ შეგვიძლია დაკავშირება ორივე ელემენტები

30
00:01:34,000 --> 00:01:36,000
იმ ორგანოს ელემენტის, მოდით გავაკეთოთ, რომ.

31
00:01:36,000 --> 00:01:40,000
ჩვენ გვყავს h1 და ul.

32
00:01:40,000 --> 00:01:43,000
და ბოლოს, ul ელემენტს აქვს კიდევ 3 შვილი,

33
00:01:43,000 --> 00:01:50,000
და ეს დაასრულებს ჩვენი DOM ხე, მოდით დაამატოთ li, li, li.

34
00:01:50,000 --> 00:01:56,000
ეს ასრულებს ჩვენი DOM ხე, და ასე ბროუზერი შენახვა თქვენს საიტს.

35
00:01:56,000 --> 00:02:02,000
ახლა შევხედოთ როგორ შეგვიძლია traverse ამ ხის გამოყენებით JavaScript.

36
00:02:02,000 --> 00:02:10,000
ჩვენ შეუძლია ამ ხის გამოყენებით სპეციალური JavaScript ცვლადში დოკუმენტი.

37
00:02:10,000 --> 00:02:13,000
ერთი ქონება ამ დოკუმენტის ობიექტი

38
00:02:13,000 --> 00:02:16,000
არის ორგანო ქონებას და ეს ობიექტი წარმოადგენს

39
00:02:16,000 --> 00:02:19,000
სხეულის ელემენტია ჩვენს მაგალითზე ვებგვერდზე.

40
00:02:19,000 --> 00:02:23,000
თუ გვინდოდა, რომ მიიღოთ ყველა ბავშვის სხეულის ელემენტის,

41
00:02:23,000 --> 00:02:26,000
რაც თუ გახსოვთ ის არის, რომ h1 tag და ul tag,

42
00:02:26,000 --> 00:02:37,000
შეგვიძლია ვთქვათ, document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
ეს მოგვცემს უკან მასივი შეიცავს როგორც h1 ელემენტს

44
00:02:41,000 --> 00:02:46,000
და ul ელემენტს რადგან ისინი პირდაპირ ბავშვების სხეულის.

45
00:02:46,000 --> 00:02:50,000
თუ გვინდოდა, რომ შევქმნათ ცვლადი წარმოადგენს ul ელემენტს

46
00:02:50,000 --> 00:02:57,000
შეგვიძლია ვთქვათ, vrr ul = მაშინ ეს კოდი აქ,

47
00:02:57,000 --> 00:03:00,000
და ახლა, რადგან childNodes უბრალოდ მასივი

48
00:03:00,000 --> 00:03:07,000
ჩვენ შეგვიძლია ინდექსი შევიდა იგი [1] რომ მივიღოთ მეორე ელემენტი, რომელიც მასივი.

49
00:03:07,000 --> 00:03:13,000
ამ ახალი ul ობიექტი ჩვენ შეუძლია სხვადასხვა თვისებების ელემენტს ისევე როგორც მისი პირადობის მოწმობა.

50
00:03:13,000 --> 00:03:17,000
თუ ჩვენ ვამბობთ, ul.id რომ იქნება ტოლი სიმებიანი სია

51
00:03:17,000 --> 00:03:20,000
იმიტომ, რომ ის, რაც ჩვენ გვაქვს ჩვენი HTML გვერდი.

52
00:03:20,000 --> 00:03:24,000
ჩვენ შეგვიძლია ასევე მისი tagName, რომელიც ამ შემთხვევაში იქნება

53
00:03:24,000 --> 00:03:32,000
რა ტიპის ელემენტს ეს, ამ შემთხვევაში, ul.

54
00:03:32,000 --> 00:03:36,000
ჩვენ შეგვიძლია ასევე მისი მშობლის ან კვანძის ზემოთ, რაც ამ შემთხვევაში

55
00:03:36,000 --> 00:03:38,000
იქნება სხეულის ელემენტს.

56
00:03:38,000 --> 00:03:43,000
თუ ჩვენ ვიტყვით. ParentNode, რომ იქნება იგივე, რაც document.body.

57
00:03:43,000 --> 00:03:46,000
რა თქმა უნდა, ამ ul აქვს ბავშვებს საკუთარი,

58
00:03:46,000 --> 00:03:50,000
ასე რომ ჩვენ შეგვიძლია მაინც ამბობენ. childNodes ამ ელემენტის,

59
00:03:50,000 --> 00:03:55,000
და ეს მასივი უნდა ჰქონდეს სიგრძის 3 რადგან არსებობს 3 ელემენტი ჩვენს სიაში.

60
00:03:55,000 --> 00:04:02,000
და ბოლოს, ალბათ, ყველაზე სასარგებლო ქონების იქნება. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
და ეს იქნება რეალური შინაარსი სია, რომელიც ჩვენი მაგალითი გვერდი

62
00:04:06,000 --> 00:04:08,000
იყო იმ 3 li tags.

63
00:04:08,000 --> 00:04:11,000
რა თქმა უნდა, გვაქვს თუ არა დიდი დოკუმენტი, რომელიც შედის ელემენტები

64
00:04:11,000 --> 00:04:14,000
ამ სახით იქნება მართლაც რთული იმიტომ

65
00:04:14,000 --> 00:04:17,000
საბოლოოდ ჩვენ უნდა ვთქვა რამ, როგორიცაა document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
bracket რაღაც. childNodes bracket რაღაც,

67
00:04:21,000 --> 00:04:23,000
და ეს აპირებდა ნამდვილად რთული.

68
00:04:23,000 --> 00:04:27,000
იმის ნაცვლად, რომ ის, რაც ჩვენ ნამდვილად გსურთ ამის გაკეთება არის შეძლებს შეკითხვის დოკუმენტი,

69
00:04:27,000 --> 00:04:30,000
ასე რომ ისევე როგორც ჩვენ ეძებდნენ რამ ინტერნეტში გამოყენებით საკვანძო სიტყვები

70
00:04:30,000 --> 00:04:33,000
ჩვენ ნამდვილად გვჭირდება ძიების გზაზე ამ დოკუმენტის აღწეროთ

71
00:04:33,000 --> 00:04:37,000
დავუბრუნდეთ მხოლოდ ელემენტები ჩვენ აინტერესებს გარეშე გადიოდა

72
00:04:37,000 --> 00:04:39,000
მთელი ხე ზემოდან.

73
00:04:39,000 --> 00:04:42,000
საბედნიეროდ, თანამედროვე ბრაუზერებში საშუალებას მოგვცემს ამის გაკეთება

74
00:04:42,000 --> 00:04:47,000
სპეციალური ფუნქცია მოუწოდა querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
და ეს ფუნქცია იღებს ერთი არგუმენტი

76
00:04:49,000 --> 00:04:53,000
რომ არის CSS selector და ეს დაბრუნებას აპირებს us

77
00:04:53,000 --> 00:04:56,000
ყველა ელემენტს, რომლებიც ემთხვევა, რომ არჩევის.

78
00:04:56,000 --> 00:04:59,000
ეს იმას ნიშნავს, რომ თქვენ არ უნდა ვისწავლოთ მთელი ახალი სინტაქსი querying DOM.

79
00:04:59,000 --> 00:05:02,000
იმის ნაცვლად, შეგიძლიათ მიმართოთ ცოდნა იცით

80
00:05:02,000 --> 00:05:04,000
ცენტრის შესახებ სელექციონერები.

81
00:05:04,000 --> 00:05:07,000
მოდით შევხედოთ მაგალითები querying დოკუმენტი.

82
00:05:07,000 --> 00:05:13,000
თუ ჩვენ ვამბობთ, querySelectorAll და გაიაროს ეს ეს კონტექსტი # foo

83
00:05:13,000 --> 00:05:18,000
რომ აპირებენ უკან ელემენტს ID foo.

84
00:05:18,000 --> 00:05:23,000
თქვენ ასევე აცხადებენ, document.getElementByID

85
00:05:23,000 --> 00:05:28,000
და გაიაროს ეს სიმებიანი foo გარეშე hashtag.

86
00:05:28,000 --> 00:05:31,000
თქვენ აპირებს დაბრუნებას იგივე ზუსტი ობიექტი.

87
00:05:31,000 --> 00:05:37,000
თუ ნაცვლად ჩვენ გაივლის მისაღებად. ბარი document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
ჩვენ ვაპირებთ დაიბრუნოს ყველა ელემენტების კლასის ბარი.

89
00:05:42,000 --> 00:05:45,000
ჩვენ ასევე გაერთიანდება CSS სელექციონერები.

90
00:05:45,000 --> 00:05:51,000
თუ ჩვენ გაივლის სიმებიანი # foo img

91
00:05:51,000 --> 00:05:54,000
რომ აპირებენ უკან ყველა გამოსახულების ელემენტები

92
00:05:54,000 --> 00:05:58,000
რომ შვილები არიან ელემენტს ID foo.

93
00:05:58,000 --> 00:06:03,000
როგორც ხედავთ, აერთიანებს სელექციონერები გვაქვს რამდენიმე მართლაც ძლიერი ძებნის შესაძლებლობები.

94
00:06:03,000 --> 00:06:06,000
მაგრამ ქვეშ Hood, DOM არის უბრალოდ ხე,

95
00:06:06,000 --> 00:06:10,000
და ეს სელექციონერები საშუალებას მოგვცემს აბსტრაქტული, რომ მოშორებით გარკვეულწილად

96
00:06:10,000 --> 00:06:14,000
იმიტომ, რომ ჩვენ ყოველთვის არ აინტერესებს მთელი სტრუქტურა DOM ხე.

97
00:06:14,000 --> 00:06:18,000
ეს იყო სწრაფი მიმოხილვა DOM, და მადლობა გაწევრიანების ჩვენთვის.

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