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] [Universiti Harvard]

3
00:00:04,000 --> 00:00:07,000
[Ini adalah CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
Dalam video ini kita akan mengambil melihat DOM.

5
00:00:10,000 --> 00:00:14,000
Apabila pelayar memuat turun laman web, ia perlu diwakili dalam ingatan entah bagaimana.

6
00:00:14,000 --> 00:00:17,000
Model objek dokumen, atau DOM,

7
00:00:17,000 --> 00:00:20,000
menerangkan bagaimana pelayar merupakan laman web dalam ingatan.

8
00:00:20,000 --> 00:00:24,000
Dalam video ini, kita akan melihat DOM dalam konteks JavaScript,

9
00:00:24,000 --> 00:00:26,000
tetapi DOM adalah satu konsep bahasa bebas.

10
00:00:26,000 --> 00:00:30,000
Sebagai contoh, PHP mempunyai pelaksanaan DOM sendiri juga.

11
00:00:30,000 --> 00:00:32,000
Walau bagaimanapun, DOM sering digunakan oleh JavaScript

12
00:00:32,000 --> 00:00:36,000
sejak JavaScript membolehkan kita untuk menukar kandungan laman web dengan cepat,

13
00:00:36,000 --> 00:00:39,000
DOM dan membolehkan kita mengakses bahagian-bahagian laman web.

14
00:00:39,000 --> 00:00:43,000
Mari kita lihat pada laman web contoh.

15
00:00:43,000 --> 00:00:48,000
Baiklah, sekarang mari kita lihat bagaimana halaman ini akan diwakili dalam DOM.

16
00:00:48,000 --> 00:00:51,000
Dan setiap pokok perlu mempunyai nod akar di atas.

17
00:00:51,000 --> 00:00:54,000
Untuk dokumen ini, elemen HTML adalah nod akar

18
00:00:54,000 --> 00:00:56,000
kerana ia adalah elemen pertama yang muncul.

19
00:00:56,000 --> 00:01:00,000
Mari menambah nod akar kepada pokok kita.

20
00:01:00,000 --> 00:01:03,000
Mari kita lihat pada dokumen HTML lagi.

21
00:01:03,000 --> 00:01:09,000
Perhatikan bahawa tag badan bersarang di dalam tag HTML.

22
00:01:09,000 --> 00:01:14,000
Ini bermakna bahawa unsur badan adalah kanak-kanak elemen HTML.

23
00:01:14,000 --> 00:01:17,000
Kita boleh mewakili ini dalam pokok DOM kita dengan membuat badan daun

24
00:01:17,000 --> 00:01:20,000
turun dari HTML.

25
00:01:20,000 --> 00:01:22,000
Mari kita buat itu.

26
00:01:22,000 --> 00:01:24,000
Kami mempunyai badan di bawah HTML.

27
00:01:24,000 --> 00:01:28,000
Sekarang kita boleh melihat badan yang mempunyai 2 anak-anak sendiri,

28
00:01:28,000 --> 00:01:31,000
elemen h1 dan elemen ul.

29
00:01:31,000 --> 00:01:34,000
Ini bermakna bahawa kita boleh menyambung kedua-dua unsur-unsur

30
00:01:34,000 --> 00:01:36,000
kepada unsur badan, jadi mari kita berbuat demikian.

31
00:01:36,000 --> 00:01:40,000
Kami mempunyai h1 dan ul a.

32
00:01:40,000 --> 00:01:43,000
Akhirnya, unsur ul mempunyai 3 lagi kanak-kanak,

33
00:01:43,000 --> 00:01:50,000
dan ini akan menyelesaikan pokok DOM kami, jadi mari kita menambah li, li, li.

34
00:01:50,000 --> 00:01:56,000
Ini melengkapkan pokok DOM kita, dan ini adalah bagaimana pelayar tidak menyimpan laman web anda.

35
00:01:56,000 --> 00:02:02,000
Sekarang mari kita lihat bagaimana kita boleh merentasi pokok ini menggunakan JavaScript.

36
00:02:02,000 --> 00:02:10,000
Kami boleh mengakses pokok ini menggunakan JavaScript ubah khas yang dipanggil dokumen.

37
00:02:10,000 --> 00:02:13,000
Satu harta objek dokumen ini

38
00:02:13,000 --> 00:02:16,000
adalah harta badan, dan objek ini mewakili

39
00:02:16,000 --> 00:02:19,000
unsur badan dalam contoh laman web kami.

40
00:02:19,000 --> 00:02:23,000
Jika kita mahu untuk mendapatkan semua anak-anak unsur badan,

41
00:02:23,000 --> 00:02:26,000
yang jika anda ingat adalah bahawa tag h1 dan tag ul,

42
00:02:26,000 --> 00:02:37,000
kita boleh mengatakan document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Dan ini akan memberikan kita kembali pelbagai yang mengandungi kedua-dua elemen yang h1

44
00:02:41,000 --> 00:02:46,000
dan elemen ul sejak mereka kanak-kanak langsung badan.

45
00:02:46,000 --> 00:02:50,000
Jika kita mahu mencipta pembolehubah yang mewakili unsur ul

46
00:02:50,000 --> 00:02:57,000
kita boleh mengatakan vrr ul = kemudian kod ini di sini,

47
00:02:57,000 --> 00:03:00,000
dan sekarang kerana childNodes hanya array

48
00:03:00,000 --> 00:03:07,000
kita boleh indeks ke dalamnya dengan [1] untuk mendapatkan elemen kedua array itu.

49
00:03:07,000 --> 00:03:13,000
Dengan objek ul baru ini, kita boleh mengakses pelbagai sifat unsur seperti ID itu.

50
00:03:13,000 --> 00:03:17,000
Jika kita mengatakan ul.id itu akan sama dengan senarai rentetan

51
00:03:17,000 --> 00:03:20,000
kerana itulah apa yang kita ada di laman HTML kami.

52
00:03:20,000 --> 00:03:24,000
Kita juga boleh mendapatkan tagName, yang dalam kes ini akan menjadi

53
00:03:24,000 --> 00:03:32,000
apa jenis elemen itu, dalam kes ini, ul a.

54
00:03:32,000 --> 00:03:36,000
Kita juga boleh mendapatkan ibu bapa atau nod di atasnya, yang dalam kes ini

55
00:03:36,000 --> 00:03:38,000
akan menjadi elemen badan.

56
00:03:38,000 --> 00:03:43,000
Jika kita katakan. ParentNode, itu akan menjadi sama seperti document.body.

57
00:03:43,000 --> 00:03:46,000
Sudah tentu, ul ini mempunyai anak-anak sendiri,

58
00:03:46,000 --> 00:03:50,000
jadi kita masih boleh katakan. childNodes pada unsur ini,

59
00:03:50,000 --> 00:03:55,000
dan mudah ini sekarang harus mempunyai panjang 3 kerana terdapat 3 item dalam senarai kami.

60
00:03:55,000 --> 00:04:02,000
Akhirnya, mungkin harta yang paling berguna akan menjadi. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
dan ini akan menjadi kandungan sebenar senarai, yang di halaman contoh kita

62
00:04:06,000 --> 00:04:08,000
adalah mereka 3 li tag.

63
00:04:08,000 --> 00:04:11,000
Sudah tentu, jika kita mempunyai dokumen besar, mengakses elemen

64
00:04:11,000 --> 00:04:14,000
dengan cara ini akan menjadi benar-benar rumit kerana

65
00:04:14,000 --> 00:04:17,000
akhirnya kita akan mempunyai untuk mengatakan perkara-perkara seperti document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
sesuatu golongan. childNodes sesuatu golongan yang lain,

67
00:04:21,000 --> 00:04:23,000
dan ia akan mendapat benar-benar rumit.

68
00:04:23,000 --> 00:04:27,000
Namun apa yang kita benar-benar mahu lakukan adalah dapat query dokumen itu,

69
00:04:27,000 --> 00:04:30,000
jadi hanya seperti kita mencari perkara-perkara di internet menggunakan kata kunci

70
00:04:30,000 --> 00:04:33,000
kita benar-benar memerlukan beberapa cara untuk mencari dokumen ini untuk ringkas

71
00:04:33,000 --> 00:04:37,000
mendapatkan kembali hanya unsur-unsur yang kita sayangi tanpa menyeberangi

72
00:04:37,000 --> 00:04:39,000
keseluruhan atas pokok ke bawah.

73
00:04:39,000 --> 00:04:42,000
Nasib baik, pelayar moden membolehkan kita untuk melakukan ini

74
00:04:42,000 --> 00:04:47,000
dengan fungsi khas yang dipanggil querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
dan fungsi ini mengambil hujah tunggal

76
00:04:49,000 --> 00:04:53,000
yang merupakan CSS pemilih, dan ia akan kembali kepada kami

77
00:04:53,000 --> 00:04:56,000
semua unsur-unsur yang sesuai dengan yang pemilih.

78
00:04:56,000 --> 00:04:59,000
Ini bermakna anda tidak perlu belajar sintaks baru untuk menyoal DOM.

79
00:04:59,000 --> 00:05:02,000
Sebaliknya, anda boleh menggunakan pengetahuan yang anda sudah tahu

80
00:05:02,000 --> 00:05:04,000
mengenai pemilih CSS.

81
00:05:04,000 --> 00:05:07,000
Mari kita lihat beberapa contoh pertanyaan dokumen itu.

82
00:05:07,000 --> 00:05:13,000
Jika kita mengatakan querySelectorAll dan lulus ini rentetan # foo

83
00:05:13,000 --> 00:05:18,000
itu akan memberikan kita kembali unsur dengan ID foo.

84
00:05:18,000 --> 00:05:23,000
Anda juga boleh mengatakan document.getElementByID

85
00:05:23,000 --> 00:05:28,000
dan lulus rentetan foo tanpa hashtag itu.

86
00:05:28,000 --> 00:05:31,000
Anda akan mendapatkan kembali objek yang sama.

87
00:05:31,000 --> 00:05:37,000
Jika sebaliknya kita lulus tali. Bar untuk document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
kita akan kembali semua unsur-unsur dengan bar kelas.

89
00:05:42,000 --> 00:05:45,000
Kami juga boleh menggabungkan pemilih CSS.

90
00:05:45,000 --> 00:05:51,000
Jika kita lulus dalam rentetan # foo img

91
00:05:51,000 --> 00:05:54,000
itu akan memberikan kita kembali semua unsur-unsur imej

92
00:05:54,000 --> 00:05:58,000
kanak-kanak yang unsur dengan ID foo.

93
00:05:58,000 --> 00:06:03,000
Seperti yang anda lihat, dengan menggabungkan selectors kita mempunyai beberapa kemampuan carian benar-benar kuat.

94
00:06:03,000 --> 00:06:06,000
Tetapi di bawah hud itu, DOM adalah benar-benar hanya pokok,

95
00:06:06,000 --> 00:06:10,000
dan ini selectors membolehkan kita untuk abstrak yang jauh ke tahap yang tertentu

96
00:06:10,000 --> 00:06:14,000
kerana kita tidak sentiasa mengambil berat tentang struktur keseluruhan pokok DOM itu.

97
00:06:14,000 --> 00:06:18,000
Itu adalah gambaran keseluruhan cepat daripada DOM, dan terima kasih kerana menyertai kami.

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