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] [Đại học Harvard]

3
00:00:04,000 --> 00:00:07,000
[Đây là CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
Trong video này, chúng ta sẽ có một cái nhìn tại DOM.

5
00:00:10,000 --> 00:00:14,000
Khi một trình duyệt tải một trang web, nó cần phải được thể hiện trong bộ nhớ bằng cách nào đó.

6
00:00:14,000 --> 00:00:17,000
Mô hình đối tượng tài liệu, hoặc DOM,

7
00:00:17,000 --> 00:00:20,000
mô tả cách thức trình duyệt đại diện cho một trang web trong bộ nhớ.

8
00:00:20,000 --> 00:00:24,000
Trong video này, chúng ta sẽ có một cái nhìn tại DOM trong bối cảnh JavaScript,

9
00:00:24,000 --> 00:00:26,000
nhưng DOM là một khái niệm ngôn ngữ độc lập.

10
00:00:26,000 --> 00:00:30,000
Ví dụ, PHP có thực hiện DOM riêng của mình là tốt.

11
00:00:30,000 --> 00:00:32,000
Tuy nhiên, DOM được thường xuyên sử dụng bằng JavaScript

12
00:00:32,000 --> 00:00:36,000
từ JavaScript cho phép chúng ta thay đổi nội dung của một trang web trên bay,

13
00:00:36,000 --> 00:00:39,000
và DOM cho phép chúng ta truy cập vào các phần của một trang web.

14
00:00:39,000 --> 00:00:43,000
Chúng ta hãy nhìn vào một trang web ví dụ.

15
00:00:43,000 --> 00:00:48,000
Được rồi, bây giờ chúng ta hãy xem làm thế nào trang này sẽ được đại diện trong DOM.

16
00:00:48,000 --> 00:00:51,000
Và mỗi cây cần phải có một nút gốc ở đầu trang.

17
00:00:51,000 --> 00:00:54,000
Đối với tài liệu này, các phần tử HTML là nút gốc

18
00:00:54,000 --> 00:00:56,000
bởi vì đó là yếu tố đầu tiên xuất hiện.

19
00:00:56,000 --> 00:01:00,000
Chúng ta hãy thêm một nút gốc để cây của chúng tôi.

20
00:01:00,000 --> 00:01:03,000
Chúng ta hãy xem xét các tài liệu HTML một lần nữa.

21
00:01:03,000 --> 00:01:09,000
Nhận thấy rằng các từ khóa cơ thể được lồng vào bên trong của thẻ HTML.

22
00:01:09,000 --> 00:01:14,000
Điều này có nghĩa rằng các yếu tố cơ thể là một con của phần tử HTML.

23
00:01:14,000 --> 00:01:17,000
Chúng tôi có thể đại diện này trong cây DOM của chúng tôi bằng cách làm cho cơ thể một lá

24
00:01:17,000 --> 00:01:20,000
giảm dần từ HTML.

25
00:01:20,000 --> 00:01:22,000
Chúng ta hãy làm điều đó.

26
00:01:22,000 --> 00:01:24,000
Chúng tôi có cơ thể dưới dạng HTML.

27
00:01:24,000 --> 00:01:28,000
Bây giờ chúng ta có thể nhìn thấy cơ thể có 2 con riêng của mình,

28
00:01:28,000 --> 00:01:31,000
các yếu tố h1 và các yếu tố ul.

29
00:01:31,000 --> 00:01:34,000
Điều này có nghĩa rằng chúng ta có thể kết nối cả hai trong những yếu tố

30
00:01:34,000 --> 00:01:36,000
đến các yếu tố cơ thể, vì vậy hãy làm điều đó.

31
00:01:36,000 --> 00:01:40,000
Chúng tôi có một h1 và một ul.

32
00:01:40,000 --> 00:01:43,000
Cuối cùng, các yếu tố ul có 3 con hơn,

33
00:01:43,000 --> 00:01:50,000
và điều này sẽ hoàn thành cây DOM của chúng tôi, vì vậy chúng ta hãy thêm li, li, li.

34
00:01:50,000 --> 00:01:56,000
Điều này hoàn thành cây DOM của chúng tôi, và đây là cách trình duyệt được lưu trữ trang web của bạn.

35
00:01:56,000 --> 00:02:02,000
Bây giờ chúng ta hãy xem làm thế nào chúng ta có thể đi qua cây này sử dụng JavaScript.

36
00:02:02,000 --> 00:02:10,000
Chúng ta có thể truy cập vào cây này sử dụng một biến JavaScript đặc biệt gọi là tài liệu.

37
00:02:10,000 --> 00:02:13,000
Một tài sản của đối tượng tài liệu này

38
00:02:13,000 --> 00:02:16,000
là tài sản cơ thể, và đối tượng này đại diện cho

39
00:02:16,000 --> 00:02:19,000
các yếu tố cơ thể trong trang web ví dụ của chúng tôi.

40
00:02:19,000 --> 00:02:23,000
Nếu chúng ta muốn có được tất cả các con của phần tử cơ thể,

41
00:02:23,000 --> 00:02:26,000
mà nếu bạn ghi nhớ là thẻ h1 và thẻ ul,

42
00:02:26,000 --> 00:02:37,000
chúng ta có thể nói document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Và điều này sẽ cung cấp cho chúng ta trở lại một mảng có chứa cả hai thành phần h1

44
00:02:41,000 --> 00:02:46,000
và các yếu tố ul vì chúng ta đều là con trực tiếp của cơ thể.

45
00:02:46,000 --> 00:02:50,000
Nếu chúng ta muốn tạo ra một biến đại diện cho yếu tố ul

46
00:02:50,000 --> 00:02:57,000
chúng ta có thể nói vrr ul = sau đó mã này lên đây,

47
00:02:57,000 --> 00:03:00,000
và bây giờ bởi vì childNodes chỉ đơn giản là một mảng

48
00:03:00,000 --> 00:03:07,000
chúng ta có thể chỉ vào nó với [1] để có được những yếu tố thứ hai của mảng đó.

49
00:03:07,000 --> 00:03:13,000
Với đối tượng này ul mới, chúng tôi có thể truy cập tài sản khác nhau của các yếu tố như ID của nó.

50
00:03:13,000 --> 00:03:17,000
Nếu chúng ta nói ul.id rằng sẽ là tương đương với danh sách chuỗi

51
00:03:17,000 --> 00:03:20,000
bởi vì đó là những gì chúng tôi có trong trang HTML của chúng tôi.

52
00:03:20,000 --> 00:03:24,000
Chúng tôi cũng có thể nhận được tagName của nó, mà trong trường hợp này là có được

53
00:03:24,000 --> 00:03:32,000
loại yếu tố đó là, trong trường hợp này, ul.

54
00:03:32,000 --> 00:03:36,000
Chúng tôi cũng có thể nhận được mẹ của nó hoặc các nút trên nó, mà trong trường hợp này

55
00:03:36,000 --> 00:03:38,000
là có được các yếu tố cơ thể.

56
00:03:38,000 --> 00:03:43,000
Nếu chúng ta nói. ParentNode, đó là sẽ được giống như document.body.

57
00:03:43,000 --> 00:03:46,000
Tất nhiên, ul này có con của riêng mình,

58
00:03:46,000 --> 00:03:50,000
vì vậy chúng tôi vẫn có thể nói. childNodes vào yếu tố này,

59
00:03:50,000 --> 00:03:55,000
và mảng này bây giờ sẽ có chiều dài 3 vì có 3 mục trong danh sách của chúng tôi.

60
00:03:55,000 --> 00:04:02,000
Cuối cùng, có lẽ là tài sản hữu ích nhất là có được. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
và điều này sẽ là nội dung thực tế của danh sách, mà trong trang ví dụ của chúng tôi

62
00:04:06,000 --> 00:04:08,000
là những 3 thẻ li.

63
00:04:08,000 --> 00:04:11,000
Tất nhiên, nếu chúng ta có một tài liệu lớn, truy cập vào các yếu tố

64
00:04:11,000 --> 00:04:14,000
theo cách này là có được thực sự cồng kềnh vì

65
00:04:14,000 --> 00:04:17,000
cuối cùng chúng tôi sẽ phải nói những điều như document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
khung một cái gì đó. childNodes khung cái gì khác,

67
00:04:21,000 --> 00:04:23,000
và nó sẽ nhận được sự rườm rà.

68
00:04:23,000 --> 00:04:27,000
Thay vì những gì chúng tôi thực sự muốn làm là có thể truy vấn các tài liệu,

69
00:04:27,000 --> 00:04:30,000
vì vậy chỉ cần giống như chúng ta tìm kiếm những thứ trên Internet sử dụng từ khoá

70
00:04:30,000 --> 00:04:33,000
chúng tôi thực sự cần một số cách để tìm kiếm tài liệu này một cách ngắn gọn

71
00:04:33,000 --> 00:04:37,000
trở lại chỉ là yếu tố chúng tôi quan tâm mà không cần đi qua

72
00:04:37,000 --> 00:04:39,000
toàn bộ trên cây xuống dưới.

73
00:04:39,000 --> 00:04:42,000
May mắn thay, các trình duyệt hiện đại cho phép chúng ta làm điều này

74
00:04:42,000 --> 00:04:47,000
với một chức năng đặc biệt gọi là querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
và chức năng này có một đối số duy nhất

76
00:04:49,000 --> 00:04:53,000
đó là một chọn CSS, và nó sẽ trả lại cho chúng tôi

77
00:04:53,000 --> 00:04:56,000
tất cả các yếu tố phù hợp mà chọn.

78
00:04:56,000 --> 00:04:59,000
Có nghĩa là bạn không cần phải học một cú pháp hoàn toàn mới cho các truy vấn DOM.

79
00:04:59,000 --> 00:05:02,000
Thay vào đó bạn có thể áp dụng những kiến ​​thức bạn đã biết

80
00:05:02,000 --> 00:05:04,000
về lựa chọn CSS.

81
00:05:04,000 --> 00:05:07,000
Chúng ta hãy xem xét một số ví dụ về truy vấn tài liệu.

82
00:05:07,000 --> 00:05:13,000
Nếu chúng ta nói querySelectorAll và vượt qua nó chuỗi này # foo

83
00:05:13,000 --> 00:05:18,000
đó là sẽ cung cấp cho chúng ta trở lại các phần tử với ID foo.

84
00:05:18,000 --> 00:05:23,000
Bạn cũng có thể nói document.getElementById

85
00:05:23,000 --> 00:05:28,000
và vượt qua nó chuỗi foo không hashtag đó.

86
00:05:28,000 --> 00:05:31,000
Bạn sẽ lấy lại đối tượng chính xác.

87
00:05:31,000 --> 00:05:37,000
Nếu thay vào đó chúng tôi vượt qua thanh để document.querySelectorAll chuỗi.

88
00:05:37,000 --> 00:05:42,000
chúng ta sẽ lấy lại tất cả các yếu tố với thanh lớp.

89
00:05:42,000 --> 00:05:45,000
Chúng tôi cũng có thể kết hợp lựa chọn CSS.

90
00:05:45,000 --> 00:05:51,000
Nếu chúng ta vượt qua trong chuỗi # foo img

91
00:05:51,000 --> 00:05:54,000
đó là sẽ cung cấp cho chúng ta trở lại tất cả các yếu tố hình ảnh

92
00:05:54,000 --> 00:05:58,000
đó là con của phần tử với ID foo.

93
00:05:58,000 --> 00:06:03,000
Như bạn có thể nhìn thấy, bởi bộ chọn kết hợp chúng tôi có một số khả năng tìm kiếm thật sự mạnh mẽ.

94
00:06:03,000 --> 00:06:06,000
Nhưng dưới mui xe, DOM thực sự chỉ là một cây,

95
00:06:06,000 --> 00:06:10,000
và những bộ chọn cho phép chúng ta trừu tượng đi một mức độ nào

96
00:06:10,000 --> 00:06:14,000
bởi vì chúng ta không luôn luôn quan tâm đến toàn bộ cấu trúc của cây DOM.

97
00:06:14,000 --> 00:06:18,000
Đó là một cái nhìn tổng quan nhanh chóng của các DOM, và cảm ơn cho chúng tôi tham gia.

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