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

3
00:00:04,000 --> 00:00:07,000
[Bu CS50 edir.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
Bu video biz DOM nəzər olacaq.

5
00:00:10,000 --> 00:00:14,000
Bir brauzerinizin bir web downloads, o, elə yaddaş təmsil lazımdır.

6
00:00:14,000 --> 00:00:17,000
Sənəd obyekt model, DOM,

7
00:00:17,000 --> 00:00:20,000
brauzer xatirəsinə web təmsil anlatıyor.

8
00:00:20,000 --> 00:00:24,000
Bu video-ci ildə biz JavaScript kontekstində DOM nəzər lazımdır

9
00:00:24,000 --> 00:00:26,000
lakin DOM dil-müstəqil anlayışdır.

10
00:00:26,000 --> 00:00:30,000
Məsələn, PHP həmçinin öz DOM həyata var.

11
00:00:30,000 --> 00:00:32,000
Lakin, DOM tez-tez JavaScript istifadə edilir

12
00:00:32,000 --> 00:00:36,000
JavaScript bizə Tez bir web məzmunu dəyişdirmək üçün imkan verir-ci ildən,

13
00:00:36,000 --> 00:00:39,000
və DOM bizə web hissələri daxil olmaq üçün imkan verir.

14
00:00:39,000 --> 00:00:43,000
Nin nümunə web nəzər salaq.

15
00:00:43,000 --> 00:00:48,000
Okay, indi bu səhifə DOM təmsil olunacaq necə edək.

16
00:00:48,000 --> 00:00:51,000
Və hər ağacın başında bir kök node lazımdır.

17
00:00:51,000 --> 00:00:54,000
Bu sənəd üçün, HTML element kök node edir

18
00:00:54,000 --> 00:00:56,000
çünki görünür ki, ilk element var.

19
00:00:56,000 --> 00:01:00,000
Bizim ağac bir kök node əlavə edək.

20
00:01:00,000 --> 00:01:03,000
Nin yenidən HTML sənəd nəzər salaq.

21
00:01:03,000 --> 00:01:09,000
Bədən tag HTML tag daxilində iç içə olduğunu görürsünüz.

22
00:01:09,000 --> 00:01:14,000
Bu orqan element HTML element bir uşaq deməkdir.

23
00:01:14,000 --> 00:01:17,000
Biz bədən bir yarpaq edərək bizim DOM ağac bu təmsil edə bilər

24
00:01:17,000 --> 00:01:20,000
HTML enən.

25
00:01:20,000 --> 00:01:22,000
Ki, nə edək.

26
00:01:22,000 --> 00:01:24,000
Biz HTML altında orqan var.

27
00:01:24,000 --> 00:01:28,000
İndi ki, bədən öz 2 övladı var bilərsiniz

28
00:01:28,000 --> 00:01:31,000
ki, h1 elementi və ul element.

29
00:01:31,000 --> 00:01:34,000
Bu həmin elementlərin həm də qoşula bilər o deməkdir ki,

30
00:01:34,000 --> 00:01:36,000
bədən element üçün, belə ki, nə edək.

31
00:01:36,000 --> 00:01:40,000
Biz h1 və ul var.

32
00:01:40,000 --> 00:01:43,000
Nəhayət, ul element, 3 övladı var

33
00:01:43,000 --> 00:01:50,000
və bu, bizim DOM ağac başa çatacaq, belə ki, li, li, li əlavə edək.

34
00:01:50,000 --> 00:01:56,000
Bu, bizim DOM ağac tamamlayır və bu brauzerinizin web saxlanılması necə.

35
00:01:56,000 --> 00:02:02,000
İndi biz JavaScript istifadə edərək, bu ağac axır necə nəzər salaq.

36
00:02:02,000 --> 00:02:10,000
Biz sənəd adlı xüsusi JavaScript dəyişən istifadə edərək, bu ağac edə bilərsiniz.

37
00:02:10,000 --> 00:02:13,000
Bu sənəd obyekt biri də mülkiyyət

38
00:02:13,000 --> 00:02:16,000
orqan mülkiyyət və bu obyekt təmsil

39
00:02:16,000 --> 00:02:19,000
Məsələn bizdə web bədən element.

40
00:02:19,000 --> 00:02:23,000
Biz, bədən element uşaqları bütün almaq istəyirdi

41
00:02:23,000 --> 00:02:26,000
olan Əgər xatırlayırsınızsa ki, H1 etiketi ul tag edir

42
00:02:26,000 --> 00:02:37,000
biz document.body.childNodes deyə bilərəm.

43
00:02:37,000 --> 00:02:41,000
Və bu, bizə h1 element həm olan bir sıra geri verəcək

44
00:02:41,000 --> 00:02:46,000
və onlar bədən, həm də birbaşa uşaq etdiyiniz-ci ildən ul element.

45
00:02:46,000 --> 00:02:50,000
Biz ul element təmsil dəyişən yaratmaq istəyirdi

46
00:02:50,000 --> 00:02:57,000
biz qədər burada vrr ul = daha sonra bu kodu demək olar

47
00:02:57,000 --> 00:03:00,000
və indi childNodes sadəcə bir sıra çünki

48
00:03:00,000 --> 00:03:07,000
biz [1] ilə daxil index ki, serialın ikinci elementi almaq üçün ola bilər.

49
00:03:07,000 --> 00:03:13,000
Bu yeni ul obyekt ilə biz öz ID kimi element müxtəlif xüsusiyyətləri istifadə edə bilərsiniz.

50
00:03:13,000 --> 00:03:17,000
Biz string siyahısına bərabər olacaq ki, ul.id demək olarsa

51
00:03:17,000 --> 00:03:20,000
ki, Bizim HTML səhifə nə var çünki.

52
00:03:20,000 --> 00:03:24,000
Biz də bu halda olacaq ki, onun tagName əldə edə bilərsiniz

53
00:03:24,000 --> 00:03:32,000
element hansı növ bu halda, bir ul edir.

54
00:03:32,000 --> 00:03:36,000
Biz də öz ana və ya ondan yuxarı olan sözlə, əldə edə bilərsiniz bu halda

55
00:03:36,000 --> 00:03:38,000
bədən element olacaq.

56
00:03:38,000 --> 00:03:43,000
Biz document.body eyni olacaq ki,. ParentNode, demək edin.

57
00:03:43,000 --> 00:03:46,000
Təbii ki, bu ul, onun öz övladı var

58
00:03:46,000 --> 00:03:50,000
biz hələ də demək olar. childNodes Bu element də,

59
00:03:50,000 --> 00:03:55,000
bizim siyahısına 3 maddə var və bu array indi uzunluğu 3 olmalıdır.

60
00:03:55,000 --> 00:04:02,000
Nəhayət, bəlkə də ən faydalı əmlak olacaq. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
və bu, siyahı faktiki məzmunu olacaq bizim misal səhifə

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

63
00:04:08,000 --> 00:04:11,000
Əlbəttə ki, biz böyük bir sənəd varsa, elementləri daxil olmaq

64
00:04:11,000 --> 00:04:14,000
bu şəkildə həqiqətən çətin olacaq, çünki

65
00:04:14,000 --> 00:04:17,000
nəticədə biz document.body.childNodes kimi şeylər demək lazımdır

66
00:04:17,000 --> 00:04:21,000
bracket bir şey., başqa bracket bir şey childNodes

67
00:04:21,000 --> 00:04:23,000
və həqiqətən çətin almaq olacaq.

68
00:04:23,000 --> 00:04:27,000
Əvəzində biz həqiqətən etmək istəyirəm, sənəd sorğu edə bilər

69
00:04:27,000 --> 00:04:30,000
belə ki, yalnız biz açar sözlər istifadə edərək internet şeylər üçün axtarış kimi

70
00:04:30,000 --> 00:04:33,000
biz, həqiqətən, müfəssəl bu sənədin axtarışı bir yol lazımdır

71
00:04:33,000 --> 00:04:37,000
biz qayğı yalnız elementləri traversing geri almaq

72
00:04:37,000 --> 00:04:39,000
alt bütün ağac üst.

73
00:04:39,000 --> 00:04:42,000
Neyse, müasir brauzerlərdə bizə bu imkan verir

74
00:04:42,000 --> 00:04:47,000
querySelectorAll adlı xüsusi funksiyası ilə,

75
00:04:47,000 --> 00:04:49,000
və bu funksiya bir dəlil edir

76
00:04:49,000 --> 00:04:53,000
ki, CSS Selector və bu, bizə geri olacaq

77
00:04:53,000 --> 00:04:56,000
ki, selector eşleşen bütün öğeleri.

78
00:04:56,000 --> 00:04:59,000
Ki, siz DOM querying üçün yeni bir syntax öyrənmək lazım deyil deməkdir.

79
00:04:59,000 --> 00:05:02,000
Bunun əvəzinə siz artıq bilirsiniz bilik müraciət edə bilər

80
00:05:02,000 --> 00:05:04,000
CSS selectors haqqında.

81
00:05:04,000 --> 00:05:07,000
Nin sənəd querying bəzi nümunələr nəzər salaq.

82
00:05:07,000 --> 00:05:13,000
Biz querySelectorAll demək və bu simli # foo keçərlərsə

83
00:05:13,000 --> 00:05:18,000
ki, bizə ID foo ilə element geri vermək olacaq.

84
00:05:18,000 --> 00:05:23,000
Siz həmçinin document.getElementByID deyə bilərsiniz

85
00:05:23,000 --> 00:05:28,000
və bu hashtag olmadan simli foo keçir.

86
00:05:28,000 --> 00:05:31,000
Siz eyni dəqiq obyekt geri almaq olacaq.

87
00:05:31,000 --> 00:05:37,000
Əvəzində biz document.querySelectorAll üçün simli. Bar keçərlərsə

88
00:05:37,000 --> 00:05:42,000
biz sinif bar ilə bütün öğeleri geri almaq olacaq.

89
00:05:42,000 --> 00:05:45,000
Biz, həmçinin, CSS selectors birləşdirə bilər.

90
00:05:45,000 --> 00:05:51,000
Biz string # foo img keçmək edin

91
00:05:51,000 --> 00:05:54,000
image bütün öğeleri bizə geri verir ki,

92
00:05:54,000 --> 00:05:58,000
ki, ID foo ilə element uşaqları var.

93
00:05:58,000 --> 00:06:03,000
Gördüyünüz kimi, birləşən selectors, biz bəzi həqiqətən güclü axtarış imkanlarına malikdir.

94
00:06:03,000 --> 00:06:06,000
Amma başlıq altında, DOM, həqiqətən yalnız bir ağac var

95
00:06:06,000 --> 00:06:10,000
bu selectors müəyyən dərəcədə ki, üz bizə abstrakt imkan

96
00:06:10,000 --> 00:06:14,000
biz həmişə DOM ağac bütün strukturu haqqında qayğı yoxdur, çünki.

97
00:06:14,000 --> 00:06:18,000
Bu tez DOM icmalı, bizə qoşulmaq sayəsində oldu.

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