1
00:00:00,921 --> 00:00:06,523
OK, cho đến hiện tại chúng ta đã chỉnh sửa rất nhiều phần tử trên trang web.

2
00:00:06,523 --> 00:00:09,909
Nhưng nếu ta muốn thêm phần tử mới vào trang thì sao?

3
00:00:09,909 --> 00:00:15,075
Ta có thể thực hiện điều đó với `innerHTML`, viết HTML cho những tag

4
00:00:15,075 --> 00:00:18,926
bên trong chuỗi mà ta đưa vào, như ở đây.

5
00:00:18,926 --> 00:00:22,258
Dù vậy nhưng có thể sẽ khá lộn xộn đấy, đặc biệt khi ta muốn tạo

6
00:00:22,258 --> 00:00:25,540
nhiều tag với những thuộc tính, style, và class khác nhau.

7
00:00:25,540 --> 00:00:31,097
Thay vì thế, ta có thể sử dụng nguyên một bộ thủ tục document

8
00:00:31,097 --> 00:00:35,393
để tạo phần tử mới toanh và thêm vào trang web.

9
00:00:35,393 --> 00:00:40,685
Giả sử ta muốn thêm một ảnh mèo vào trang,

10
00:00:40,685 --> 00:00:44,018
vì ta nghĩ rằng vẫn hơi ít ảnh.

11
00:00:44,018 --> 00:00:48,620
Bước đầu tiên là tạo phần tử mới ``, đúng không?

12
00:00:48,620 --> 00:00:50,786
Ta phải tạo phần tử đó.

13
00:00:50,786 --> 00:00:55,980
Ta sẽ bắt đầu bằng cách tạo một biến để lưu trữ phần tử, `catEI`.

14
00:00:55,980 --> 00:01:00,935
Sau đó ta sẽ sử dụng `document.createElement`,

15
00:01:00,935 --> 00:01:06,615
và đưa vào tên tag đang tạo, `img`.

16
00:01:06,615 --> 00:01:12,065
Các bạn có thể tưởng tượng trình duyệt đã tạo một tag image, như thế này,

17
00:01:12,065 --> 00:01:15,069
và nó đang lang thang ở đâu đó.

18
00:01:15,069 --> 00:01:19,111
Bước tiếp theo là gán nguồn cho phần tử.

19
00:01:19,111 --> 00:01:23,308
Vậy là, `catEI.src =`,

20
00:01:23,308 --> 00:01:29,376
và ta chỉ việc lấy nguồn ở trên đây,

21
00:01:29,376 --> 00:01:34,764
và—úi, ta nên thâm cả `alt` nữa, để giúp hình ảnh dễ truy cập hơn—

22
00:01:34,764 --> 00:01:42,081
tôi quên mất đấy, lúc nào ta cũng nên có tag `alt` cho hình ảnh.

23
00:01:42,081 --> 00:01:47,178
Bây giờ các bạn có thể hình dung tag `` mà ta vừa tạo

24
00:01:47,178 --> 00:01:58,144
có một `src`, và cả một `alt`, “Photo of cute cat”.

25
00:01:58,144 --> 00:02:04,928
OK, đây là những gì ta vừa tạo bằng JavaScript.

26
00:02:04,928 --> 00:02:08,983
Tag `` vẫn đang lang thang đâu đó,

27
00:02:08,983 --> 00:02:11,764
vì ta vẫn chưa lệnh cho trình duyệt phải đặt ở vị trí nào.

28
00:02:11,764 --> 00:02:15,832
Ta có thể đặt tag ở rất nhiều vị trí khác nhau trong DOM.

29
00:02:15,832 --> 00:02:21,342
Ta làm cái đơn giản nhất thôi nhé, hiển thị nó ở cuối trang là được.

30
00:02:21,342 --> 00:02:26,304
Ta có thể thực hiện điều đó bằng cách dán vào cuối tag ``, như vậy ta nhập:

31
00:02:26,304 --> 00:02:29,860
`document.body.appendChild(catEl);`

32
00:02:29,860 --> 00:02:31,197
Haha—nó đây rồi!

33
00:02:31,197 --> 00:02:32,711
Ảnh hơi to.

34
00:02:32,711 --> 00:02:34,979
Mèo to khủng khiếp—sợ quá.

35
00:02:34,979 --> 00:02:41,198
Bây giờ ta có thể gọi `appendChild` trên bất kỳ nốt DOM sẵn có nào trên trang web,

36
00:02:41,198 --> 00:02:47,337
và nó sẽ biến phần tử vừa đưa vào thành phần tử con cuối cùng của nốt đó.

37
00:02:47,337 --> 00:02:52,115
Đó là lúc DOM được trực quan hóa dưới dạng hình cây.

38
00:02:52,115 --> 00:02:57,873
Tag `` là một nốt trên cây đó, và có cả tá con cái,

39
00:02:57,873 --> 00:03:00,076
ví dụ như `` và ``,

40
00:03:00,076 --> 00:03:04,395
và cuối phần tử con đó ta lại thêm một phần tử con khác.

41
00:03:04,395 --> 00:03:09,074
Như vậy ta sẽ thêm vào sau tag ``, ngay đây.

42
00:03:09,074 --> 00:03:13,320
Với các thủ tục DOM, về mặt lý thuyết ta sẽ có thể gắn phần tử

43
00:03:13,320 --> 00:03:15,531
vào bất cứ đâu trên cây DOM.

44
00:03:15,531 --> 00:03:19,447
Ta sẽ đưa nó vào vị trí dễ thấy nhất.

45
00:03:19,447 --> 00:03:22,016
Được rồi, cùng làm thêm một ví dụ nữa nhé.

46
00:03:22,016 --> 00:03:28,283
Ta đã sử dụng `innerHTML` ở dưới đây, để đưa tag `` vào trong ``.

47
00:03:28,283 --> 00:03:31,443
Thay vào đó, ta có thể sử dụng `createElement`.

48
00:03:31,443 --> 00:03:33,159
[đang gõ]

49
00:03:39,622 --> 00:03:43,824
Tôi gõ nhầm mất rồi, chính tả rất quan trọng đấy nhé.

50
00:03:43,824 --> 00:03:48,663
Như vậy sẽ tạo một tag `` trống, lang thang đâu đó.

51
00:03:48,663 --> 00:03:51,879
Vì vậy, trước hết ta sẽ thiết lập văn bản,

52
00:03:51,879 --> 00:03:56,573
`strongEl.textContent = "cat";`.

53
00:03:56,573 --> 00:03:57,746
Được chưa?

54
00:03:57,746 --> 00:04:01,816
Ta có thể chọn thực hiện thao tác khác,
55
00:04:01,816 --> 00:04:04,581
trong đó ta sẽ tạo `textNode`.

55
00:04:04,581 --> 00:04:09,324
Nhiều nốt DOM trên cây DOM có thể chứa những loại nốt đặc biệt, các `textNode`,

56
00:04:09,324 --> 00:04:10,726
làm nốt con.

57
00:04:10,726 --> 00:04:14,998
Và những nốt ấy không phải là phần tử, nhưng vẫn là nốt trên cây DOM.

58
00:04:14,998 --> 00:04:17,541
Trên thực tế ta gọi chúng là “nốt lá”, vì đó là

59
00:04:17,541 --> 00:04:20,077
bộ phận sau chót trên cây.

60
00:04:20,077 --> 00:04:21,736
[đang gõ]

61
00:04:27,548 --> 00:04:31,816
Ta sẽ đưa vào văn bản, “cat”.

62
00:04:31,816 --> 00:04:34,496
Khi sử dụng kỹ thuật này, tức là

63
00:04:34,496 --> 00:04:42,169
ta đã tạo 2 nốt lang thang: một tag ``,

64
00:04:42,169 --> 00:04:46,547
rồi đến `textNode` này, chỉ có nội dung là “cat”.

65
00:04:46,547 --> 00:04:49,680
Và ta cần phải kết nối chúng với nhau.

66
00:04:49,680 --> 00:04:54,910
Ta muốn `` là mẹ của “cat”.

67
00:04:54,910 --> 00:05:03,152
Vì vậy ta sẽ nhập `strongEI.appendChild(strongText);`.

68
00:05:03,152 --> 00:05:12,114
OK, vậy là ta đã có `` với “cat” bên trong,

69
00:05:12,114 --> 00:05:18,582
và ta phải gắn vào vị trí theo ý muốn, vì nó vẫn đang lang thang đâu đó.

70
00:05:18,582 --> 00:05:24,527
Ta đang ở trong vòng lặp `for` cho `nameEIs`, và mỗi `nameEIs`

71
00:05:24,527 --> 00:05:27,354
là một vị trí ta cần gắn tag ``.

72
00:05:27,354 --> 00:05:34,975
Ta có, `nameEIs[i].appendChild(strongEI);`.

73
00:05:34,975 --> 00:05:42,195
Aha, giờ thì lại gấp đôi luôn, vì tôi vẫn để nguyên như cũ.

74
00:05:42,195 --> 00:05:47,335
Ta đang gắn vào một tag `` đã có sẵn `` trong đó.

75
00:05:47,335 --> 00:05:52,434
Ta có thể thay đổi dòng này thành `innerHTML` bằng chuỗi trống,

76
00:05:52,434 --> 00:05:57,817
từ đó dọn sạch span trước khi ta gắn vào nó.

77
00:05:57,817 --> 00:06:04,925
Hiện tại, như các bạn thấy, ta đã tiết kiệm được nhiều dòng mã hơn hẳn so với phương pháp `innerHTML`.

78
00:06:04,925 --> 00:06:06,991
Vậy tại sao ta lại làm thế?

79
00:06:06,991 --> 00:06:11,099
Rất nhiều nhà phát triển không thích chỉnh sửa tài liệu theo cách này

80
00:06:11,099 --> 00:06:13,433
vì nó rất tốn mã.

81
00:06:13,433 --> 00:06:16,714
Hầu hết đều sử dụng những thư viện như jQuery,

82
00:06:16,714 --> 00:06:21,352
để chỉnh sửa DOM, từ đó cung cấp các hàm

83
00:06:21,352 --> 00:06:26,873
cùng chức năng nhưng ít mã hơn rất nhiều,

84
00:06:26,873 --> 00:06:29,310
vì ta đang sử dụng các hàm library thay thế.

85
00:06:29,310 --> 00:06:33,366
Tôi thích viết mã theo phương pháp này, vì tôi có thể

86
00:06:33,366 --> 00:06:38,666
thấy chính xác mình đang chỉnh sửa cây DOM như thế nào, từng dòng một.

87
00:06:38,666 --> 00:06:43,043
Và cảm giác gọn gàng hơn rất nhiều so với nhồi tất cả mọi thứ vào một chuỗi innerHTML.

88
00:06:43,043 --> 00:06:44,772
Nhưng có thể các bạn lại không thích.

89
00:06:44,772 --> 00:06:47,188
Dù sao thì ta cũng biết nó có tồn tại.

90
00:06:47,188 --> 00:06:50,939
Vì vậy các bạn có thể áp dụng nếu cần thiết, và có thể hiểu được

91
00:06:50,939 --> 00:00:00,000
chức năng thực sự của những thư viện như jQuery.