1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [டிஓம்]

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
இந்த வீடியோ நாம் டிஓம் பாரு போகிறோம்.

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
இந்த வீடியோவில், நாம், இங்கு சூழலில் டிஓம் பாருங்கள் எடுக்க வேண்டும்

9
00:00:24,000 --> 00:00:26,000
ஆனால் டிஓம் ஒரு மொழியை சுதந்திரமாக கருத்து உள்ளது.

10
00:00:26,000 --> 00:00:30,000
உதாரணமாக, PHP மற்றும் அதன் சொந்த டிஓம் செயல்படுத்த உள்ளது.

11
00:00:30,000 --> 00:00:32,000
எனினும், டோம் அடிக்கடி இங்கு பயன்படுத்தப்படும்

12
00:00:32,000 --> 00:00:36,000
இங்கு நாம் பறக்க ஒரு வலைப்பக்கம் உள்ளடக்கங்களை மாற்ற அனுமதிக்கிறது பின்னர்,

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
சரி, இப்போது இந்த பக்கம் டிஓம் பிரதிநிதித்துவம் எப்படி என்று பார்ப்போம்.

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 உறுப்பு மற்றும் உல் உறுப்பு.

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 மற்றும் ஒரு உல் வேண்டும்.

32
00:01:40,000 --> 00:01:43,000
இறுதியாக, உல் உறுப்பு, மேலும் 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
இப்போது நாம் இங்கு பயன்படுத்தி இந்த மரம் பயணிக்க முடியும் என்பதை பாருங்கள் நாம்.

36
00:02:02,000 --> 00:02:10,000
நாங்கள் ஆவணம் என்று ஒரு சிறப்பு இங்கு மாறி பயன்படுத்தி இந்த மரம் அணுக முடியும்.

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 டேக் மற்றும் உல் குறிச்சொல் உள்ளது

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
அவர்கள் உடல் இரு நேரடி குழந்தைகள் தான் முதல் உல் உறுப்பு.

45
00:02:46,000 --> 00:02:50,000
நாம் உல் உறுப்பு குறிக்கும் ஒரு மாறி உருவாக்க விரும்பினால்

46
00:02:50,000 --> 00:02:57,000
நாங்கள், இங்கு vrr உல் = இந்த குறியீடு சொல்ல முடியும்

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
இந்த புதிய உல் பொருள் நாம் அதன் ஐடி போன்ற உறுப்பு பல்வேறு பண்புகள் அணுக முடியும்.

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
உறுப்பு என்ன வகை இந்த வழக்கில், ஒரு உல் ஆகும்.

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
நாம் document.body அதே இருக்க போகிறது என்று. ParentNode, சொன்னால்.

57
00:03:43,000 --> 00:03:46,000
நிச்சயமாக, இந்த உல், அதன் சொந்த குழந்தைகள் உள்ளன

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 குறிச்சொற்களை இருந்தன.

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
அடைப்புக்குறி ஒன்று., வேறு அடைப்புக்குறி ஏதாவது childNodes

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 தேர்வுக்குழு, மற்றும் அது நமக்கு திரும்ப நடக்கிறது

77
00:04:53,000 --> 00:04:56,000
என்று தேர்வுக்குழு பொருந்தும் என்று கூறுகள் அனைத்து.

78
00:04:56,000 --> 00:04:59,000
என்று நீங்கள் டிஓம் குவெரி ஒரு முழு புதிய இலக்கணத்தை கற்று கொள்ள தேவையில்லை என்று பொருள்.

79
00:04:59,000 --> 00:05:02,000
அதற்கு பதிலாக நீங்கள் ஏற்கனவே தெரியும் அறிவு விண்ணப்பிக்க முடியும்

80
00:05:02,000 --> 00:05:04,000
CSS தேர்வாளர்கள் பற்றி.

81
00:05:04,000 --> 00:05:07,000
இந்த ஆவணம் குவெரி சில உதாரணங்கள் ஒரு பார்க்கலாம்.

82
00:05:07,000 --> 00:05:13,000
நாம் querySelectorAll என்று அது இந்த சரம் # foo கடந்து என்றால்

83
00:05:13,000 --> 00:05:18,000
என்று நம்மை அடையாள foo கொண்ட உறுப்பு திரும்ப கொடுக்க நடக்கிறது.

84
00:05:18,000 --> 00:05:23,000
நீங்கள் document.getElementByID சொல்ல முடியும்

85
00:05:23,000 --> 00:05:28,000
மற்றும் அது ஹேஸ்டேகை இல்லாமல் சரம் foo கடந்து.

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
அந்த அடையாள foo கொண்ட உறுப்பு குழந்தைகள் உள்ளன.

93
00:05:58,000 --> 00:06:03,000
நீங்கள் பார்க்க முடியும் என, இணைப்பதன் தேர்ந்தெடுக்கப்படவில்லை நாம் சில உண்மையில் சக்திவாய்ந்த தேடல் சாத்தியங்களை வேண்டும்.

94
00:06:03,000 --> 00:06:06,000
ஆனால் ஹூட் கீழ், டோம், உண்மையில் ஒரு மரம்

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
ஒரு விரைவான டிஓம் கண்ணோட்டம், எங்களுக்கு வந்ததற்கு நன்றி இருந்தது.

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