WEBVTT

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.

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?

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

00:00:15.075 --> 00:00:18.926
bên trong chuỗi mà ta đưa vào, như ở đây.

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

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.

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

00:00:31.097 --> 00:00:35.393
để tạo phần tử mới toanh và thêm vào trang web.

00:00:35.393 --> 00:00:40.685
Giả sử ta muốn thêm một ảnh mèo vào trang,

00:00:40.685 --> 00:00:44.018
vì ta nghĩ rằng vẫn hơi ít ảnh.

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

00:00:48.620 --> 00:00:50.786
Ta phải tạo phần tử đó.

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`.

00:00:55.980 --> 00:01:00.935
Sau đó ta sẽ sử dụng `document.createElement`,

00:01:00.935 --> 00:01:06.615
và đưa vào tên tag đang tạo, `img`.

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,

00:01:12.065 --> 00:01:15.069
và nó đang lang thang ở đâu đó.

00:01:15.069 --> 00:01:19.111
Bước tiếp theo là gán nguồn cho phần tử.

00:01:19.111 --> 00:01:23.308
Vậy là, `catEI.src =`,

00:01:23.308 --> 00:01:29.376
và ta chỉ việc lấy nguồn ở trên đây,

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—

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.

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

00:01:47.178 --> 00:01:58.144
có một `src`, và cả một `alt`, “Photo of cute cat”.

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

00:02:04.928 --> 00:02:08.983
Tag `` vẫn đang lang thang đâu đó,

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.

00:02:11.764 --> 00:02:15.832
Ta có thể đặt tag ở rất nhiều vị trí khác nhau trong DOM.

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.

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:

00:02:26.304 --> 00:02:29.860
`document.body.appendChild(catEl);`

00:02:29.860 --> 00:02:31.197
Haha—nó đây rồi!

00:02:31.197 --> 00:02:32.711
Ảnh hơi to.

00:02:32.711 --> 00:02:34.979
Mèo to khủng khiếp—sợ quá.

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,

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 đó.

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.

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,

00:02:57.873 --> 00:03:00.076
ví dụ như `` và ``,

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.

00:03:04.395 --> 00:03:09.074
Như vậy ta sẽ thêm vào sau tag ``, ngay đây.

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ử

00:03:13.320 --> 00:03:15.531
vào bất cứ đâu trên cây DOM.

00:03:15.531 --> 00:03:19.447
Ta sẽ đưa nó vào vị trí dễ thấy nhất.

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

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

00:03:28.283 --> 00:03:31.443
Thay vào đó, ta có thể sử dụng `createElement`.

00:03:31.443 --> 00:03:33.159
[đang gõ]

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é.

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

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,

00:03:51.879 --> 00:03:56.573
`strongEl.textContent = "cat";`.

00:03:56.573 --> 00:03:57.746
Được chưa?

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`.

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`,

00:04:09.324 --> 00:04:10.726
làm nốt con.

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.

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

00:04:17.541 --> 00:04:20.077
bộ phận sau chót trên cây.

00:04:20.077 --> 00:04:21.736
[đang gõ]

00:04:27.548 --> 00:04:31.816
Ta sẽ đưa vào văn bản, “cat”.

00:04:31.816 --> 00:04:34.496
Khi sử dụng kỹ thuật này, tức là

00:04:34.496 --> 00:04:42.169
ta đã tạo 2 nốt lang thang: một tag ``,

00:04:42.169 --> 00:04:46.547
rồi đến `textNode` này, chỉ có nội dung là “cat”.

00:04:46.547 --> 00:04:49.680
Và ta cần phải kết nối chúng với nhau.

00:04:49.680 --> 00:04:54.910
Ta muốn `` là mẹ của “cat”.

00:04:54.910 --> 00:05:03.152
Vì vậy ta sẽ nhập `strongEI.appendChild(strongText);`.

00:05:03.152 --> 00:05:12.114
OK, vậy là ta đã có `` với “cat” bên trong,

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 đó.

00:05:18.582 --> 00:05:24.527
Ta đang ở trong vòng lặp `for` cho `nameEIs`, và mỗi `nameEIs`

00:05:24.527 --> 00:05:27.354
là một vị trí ta cần gắn tag ``.

00:05:27.354 --> 00:05:34.975
Ta có, `nameEIs[i].appendChild(strongEI);`.

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ũ.

00:05:42.195 --> 00:05:47.335
Ta đang gắn vào một tag `` đã có sẵn `` trong đó.

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,

00:05:52.434 --> 00:05:57.817
từ đó dọn sạch span trước khi ta gắn vào nó.

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`.

00:06:04.925 --> 00:06:06.991
Vậy tại sao ta lại làm thế?

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

00:06:11.099 --> 00:06:13.433
vì nó rất tốn mã.

00:06:13.433 --> 00:06:16.714
Hầu hết đều sử dụng những thư viện như jQuery,

00:06:16.714 --> 00:06:21.352
để chỉnh sửa DOM, từ đó cung cấp các hàm

00:06:21.352 --> 00:06:26.873
cùng chức năng nhưng ít mã hơn rất nhiều,

00:06:26.873 --> 00:06:29.310
vì ta đang sử dụng các hàm library thay thế.

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ể

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.

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.

00:06:43.043 --> 00:06:44.772
Nhưng có thể các bạn lại không thích.

00:06:44.772 --> 00:06:47.188
Dù sao thì ta cũng biết nó có tồn tại.

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

00:06:50.939 --> 00:00:00.000
chức năng thực sự của những thư viện như jQuery.