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 در زمینه جاوا اسکریپت،

9
00:00:24,000 --> 00:00:26,000
اما DOM مفهوم زبان مستقل است.

10
00:00:26,000 --> 00:00:30,000
به عنوان مثال، پی اچ پی اجرای DOM را آن گونه که مایلید تغییر آن نیز هست.

11
00:00:30,000 --> 00:00:32,000
با این حال، DOM اغلب با جاوا اسکریپت استفاده

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
خوب، حالا بیایید ببینید که چگونه این صفحه در 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
توجه داشته باشید که تگ body در داخل از تگ 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 ما کامل است، بنابراین اجازه دهید اضافه کردن لی، لی، لی.

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 و تگ UL،

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
ما می توانیم UL 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
با این شی UL جدید ما می توانیم خواص مختلف این عنصر مانند ID آن دسترسی داشته باشید.

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 تگ لی بود.

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
این بدان معناست که شما لازم نیست که به یادگیری نحو کاملا جدید برای پرس و جو از DOM.

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 و با تصویب آن این رشته # تولی

83
00:05:13,000 --> 00:05:18,000
که به ما عنصر با ID تولی.

84
00:05:18,000 --> 00:05:23,000
شما همچنین می توانید document.getElementByID می گویند

85
00:05:23,000 --> 00:05:28,000
و با تصویب آن رشته تولی بدون که 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
اگر ما در رشته # تولی IMG عبور

91
00:05:51,000 --> 00:05:54,000
که رفتن به ما همه از عناصر تصویر را به من بدهید

92
00:05:54,000 --> 00:05:58,000
که کودکان عنصر با ID تولی هستند.

93
00:05:58,000 --> 00:06:03,000
همانطور که می بینید، با ترکیب انتخابگرهای ما باید برخی از قابلیت های جستجو واقعا قدرتمند.

94
00:06:03,000 --> 00:06:06,000
اما در زیر کاپوت، 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]