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

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 melihat di DOM.

5
00:00:10,000 --> 00:00:14,000
Ketika browser mendownload sebuah halaman web, perlu diwakili dalam memori entah bagaimana.

6
00:00:14,000 --> 00:00:17,000
Obyek model dokumen, atau DOM,

7
00:00:17,000 --> 00:00:20,000
menjelaskan bagaimana browser merupakan halaman web dalam memori.

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

9
00:00:24,000 --> 00:00:26,000
tapi DOM adalah konsep bahasa-independen.

10
00:00:26,000 --> 00:00:30,000
Misalnya, PHP memiliki implementasi DOM sendiri juga.

11
00:00:30,000 --> 00:00:32,000
Namun, DOM sering dimanfaatkan oleh JavaScript

12
00:00:32,000 --> 00:00:36,000
sejak JavaScript memungkinkan kita untuk mengubah isi halaman web dengan cepat,

13
00:00:36,000 --> 00:00:39,000
dan DOM memungkinkan kita untuk mengakses bagian dari sebuah halaman web.

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

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

16
00:00:48,000 --> 00:00:51,000
Dan setiap pohon harus memiliki akar di atas.

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

18
00:00:54,000 --> 00:00:56,000
karena itu adalah elemen pertama yang muncul.

19
00:00:56,000 --> 00:01:00,000
Mari menambahkan simpul akar ke pohon kami.

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 bahwa tag tubuh bersarang dalam tag HTML.

22
00:01:09,000 --> 00:01:14,000
Ini berarti bahwa elemen body adalah anak dari elemen HTML.

23
00:01:14,000 --> 00:01:17,000
Kita bisa mewakili ini dalam pohon DOM kami dengan membuat tubuh daun

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

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

26
00:01:22,000 --> 00:01:24,000
Kami memiliki tubuh bawah HTML.

27
00:01:24,000 --> 00:01:28,000
Sekarang kita dapat melihat tubuh yang memiliki 2 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 berarti bahwa kita dapat menghubungkan kedua elemen-elemen

30
00:01:34,000 --> 00:01:36,000
untuk elemen body, jadi mari kita lakukan itu.

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

32
00:01:40,000 --> 00:01:43,000
Akhirnya, elemen ul memiliki 3 anak lagi,

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

34
00:01:50,000 --> 00:01:56,000
Ini melengkapi pohon DOM kami, dan ini adalah bagaimana browser menyimpan halaman web Anda.

35
00:01:56,000 --> 00:02:02,000
Sekarang mari kita lihat bagaimana kita dapat melintasi pohon ini menggunakan JavaScript.

36
00:02:02,000 --> 00:02:10,000
Kita dapat mengakses pohon ini menggunakan variabel JavaScript khusus yang disebut dokumen.

37
00:02:10,000 --> 00:02:13,000
Salah satu properti dari objek dokumen ini

38
00:02:13,000 --> 00:02:16,000
adalah milik tubuh, dan obyek ini merupakan

39
00:02:16,000 --> 00:02:19,000
elemen body dalam contoh situs kami.

40
00:02:19,000 --> 00:02:23,000
Jika kita ingin mendapatkan semua anak dari elemen body,

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

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

43
00:02:37,000 --> 00:02:41,000
Dan ini akan memberi kita kembali array yang berisi baik elemen h1

44
00:02:41,000 --> 00:02:46,000
dan elemen ul karena mereka berdua anak langsung tubuh.

45
00:02:46,000 --> 00:02:50,000
Jika kita ingin membuat variabel yang mewakili elemen ul

46
00:02:50,000 --> 00:02:57,000
kita dapat mengatakan VRR ul = maka kode ini di sini,

47
00:02:57,000 --> 00:03:00,000
dan sekarang karena childNodes hanyalah sebuah array

48
00:03:00,000 --> 00:03:07,000
kita dapat mengindeks ke dalamnya dengan [1] untuk mendapatkan elemen kedua dari array.

49
00:03:07,000 --> 00:03:13,000
Dengan obyek ul baru kita dapat mengakses berbagai properti dari elemen seperti ID.

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

51
00:03:17,000 --> 00:03:20,000
karena itulah apa yang kita miliki di halaman HTML kita.

52
00:03:20,000 --> 00:03:24,000
Kita juga bisa mendapatkan TagName, yang dalam hal ini akan menjadi

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

54
00:03:32,000 --> 00:03:36,000
Kita juga bisa mendapatkan induknya atau node di atasnya, yang dalam hal ini

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

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

57
00:03:43,000 --> 00:03:46,000
Tentu saja, ul ini memiliki anak sendiri,

58
00:03:46,000 --> 00:03:50,000
jadi kita masih bisa mengatakan. childNodes pada elemen ini,

59
00:03:50,000 --> 00:03:55,000
dan array ini sekarang harus memiliki panjang 3 karena ada 3 item dalam daftar kami.

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

61
00:04:02,000 --> 00:04:06,000
dan ini akan menjadi isi sebenarnya dari daftar, yang pada 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
Tentu saja, jika kita memiliki sebuah dokumen yang besar, mengakses elemen

64
00:04:11,000 --> 00:04:14,000
dengan cara ini akan sangat rumit karena

65
00:04:14,000 --> 00:04:17,000
akhirnya kita harus mengatakan hal-hal seperti document.body.childNodes

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

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

68
00:04:23,000 --> 00:04:27,000
Sebaliknya apa yang kita benar-benar ingin lakukan adalah bisa query dokumen,

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

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

71
00:04:33,000 --> 00:04:37,000
kembali hanya unsur kita peduli tentang tanpa melintasi

72
00:04:37,000 --> 00:04:39,000
atas pohon seluruh ke bawah.

73
00:04:39,000 --> 00:04:42,000
Untungnya, browser modern memungkinkan kita untuk melakukan hal ini

74
00:04:42,000 --> 00:04:47,000
dengan fungsi khusus yang disebut querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
dan fungsi ini mengambil satu argumen

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

77
00:04:53,000 --> 00:04:56,000
semua elemen yang cocok dengan pemilih.

78
00:04:56,000 --> 00:04:59,000
Itu berarti Anda tidak perlu mempelajari sintaks baru untuk query DOM.

79
00:04:59,000 --> 00:05:02,000
Sebaliknya Anda dapat menerapkan pengetahuan yang Anda sudah tahu

80
00:05:02,000 --> 00:05:04,000
tentang CSS penyeleksi.

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

82
00:05:07,000 --> 00:05:13,000
Jika kita berkata querySelectorAll dan menyebarkannya string ini # foo

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

84
00:05:18,000 --> 00:05:23,000
Anda juga dapat mengatakan document.getElementById

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

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

87
00:05:31,000 --> 00:05:37,000
Jika bukan kita melewati string. Bar untuk document.querySelectorAll

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

89
00:05:42,000 --> 00:05:45,000
Kita juga dapat menggabungkan CSS penyeleksi.

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

91
00:05:51,000 --> 00:05:54,000
itu akan memberikan kami kembali semua elemen gambar

92
00:05:54,000 --> 00:05:58,000
yang adalah anak-anak dari elemen dengan ID foo.

93
00:05:58,000 --> 00:06:03,000
Seperti yang Anda lihat, dengan menggabungkan penyeleksi kami memiliki beberapa kemampuan pencarian benar-benar kuat.

94
00:06:03,000 --> 00:06:06,000
Tapi di bawah tenda, DOM benar-benar hanya sebuah pohon,

95
00:06:06,000 --> 00:06:10,000
dan penyeleksi ini memungkinkan kita untuk abstrak yang jauh untuk beberapa derajat

96
00:06:10,000 --> 00:06:14,000
karena kita tidak selalu peduli tentang seluruh struktur pohon DOM.

97
00:06:14,000 --> 00:06:18,000
Itu adalah gambaran singkat dari DOM, dan terima kasih untuk bergabung dengan kami.

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