[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.92,0:00:06.52,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:06.52,0:00:09.91,Default,,0000,0000,0000,,Nhưng nếu ta muốn thêm phần tử mới vào trang thì sao?
Dialogue: 0,0:00:09.91,0:00:15.08,Default,,0000,0000,0000,,Ta có thể thực hiện điều đó với `innerHTML`, viết HTML cho những tag
Dialogue: 0,0:00:15.08,0:00:18.93,Default,,0000,0000,0000,,bên trong chuỗi mà ta đưa vào, như ở đây.
Dialogue: 0,0:00:18.93,0:00:22.26,Default,,0000,0000,0000,,Dù vậy nhưng có thể sẽ khá lộn xộn đấy, đặc biệt khi ta muốn tạo
Dialogue: 0,0:00:22.26,0:00:25.54,Default,,0000,0000,0000,,nhiều tag với những thuộc tính, style, và class khác nhau.
Dialogue: 0,0:00:25.54,0:00:31.10,Default,,0000,0000,0000,,Thay vì thế, ta có thể sử dụng nguyên một bộ thủ tục document
Dialogue: 0,0:00:31.10,0:00:35.39,Default,,0000,0000,0000,,để tạo phần tử mới toanh và thêm vào trang web.
Dialogue: 0,0:00:35.39,0:00:40.68,Default,,0000,0000,0000,,Giả sử ta muốn thêm một ảnh mèo vào trang,
Dialogue: 0,0:00:40.68,0:00:44.02,Default,,0000,0000,0000,,vì ta nghĩ rằng vẫn hơi ít ảnh.
Dialogue: 0,0:00:44.02,0:00:48.62,Default,,0000,0000,0000,,Bước đầu tiên là tạo phần tử mới ``, đúng không?
Dialogue: 0,0:00:48.62,0:00:50.79,Default,,0000,0000,0000,,Ta phải tạo phần tử đó.
Dialogue: 0,0:00:50.79,0:00:55.98,Default,,0000,0000,0000,,Ta sẽ bắt đầu bằng cách tạo một biến để lưu trữ phần tử, `catEI`.
Dialogue: 0,0:00:55.98,0:01:00.94,Default,,0000,0000,0000,,Sau đó ta sẽ sử dụng `document.createElement`,
Dialogue: 0,0:01:00.94,0:01:06.62,Default,,0000,0000,0000,,và đưa vào tên tag đang tạo, `img`.
Dialogue: 0,0:01:06.62,0:01:12.06,Default,,0000,0000,0000,,Các bạn có thể tưởng tượng trình duyệt đã tạo một tag image, như thế này,
Dialogue: 0,0:01:12.06,0:01:15.07,Default,,0000,0000,0000,,và nó đang lang thang ở đâu đó.
Dialogue: 0,0:01:15.07,0:01:19.11,Default,,0000,0000,0000,,Bước tiếp theo là gán nguồn cho phần tử.
Dialogue: 0,0:01:19.11,0:01:23.31,Default,,0000,0000,0000,,Vậy là, `catEI.src =`,
Dialogue: 0,0:01:23.31,0:01:29.38,Default,,0000,0000,0000,,và ta chỉ việc lấy nguồn ở trên đây,
Dialogue: 0,0:01:29.38,0:01:34.76,Default,,0000,0000,0000,,và—úi, ta nên thâm cả `alt` nữa, để giúp hình ảnh dễ truy cập hơn—
Dialogue: 0,0:01:34.76,0:01:42.08,Default,,0000,0000,0000,,tôi quên mất đấy, lúc nào ta cũng nên có tag `alt` cho hình ảnh.
Dialogue: 0,0:01:42.08,0:01:47.18,Default,,0000,0000,0000,,Bây giờ các bạn có thể hình dung tag `` mà ta vừa tạo
Dialogue: 0,0:01:47.18,0:01:58.14,Default,,0000,0000,0000,,có một `src`, và cả một `alt`, “Photo of cute cat”.
Dialogue: 0,0:01:58.14,0:02:04.93,Default,,0000,0000,0000,,OK, đây là những gì ta vừa tạo bằng JavaScript.
Dialogue: 0,0:02:04.93,0:02:08.98,Default,,0000,0000,0000,,Tag `` vẫn đang lang thang đâu đó,
Dialogue: 0,0:02:08.98,0:02:11.76,Default,,0000,0000,0000,,vì ta vẫn chưa lệnh cho trình duyệt phải đặt ở vị trí nào.
Dialogue: 0,0:02:11.76,0:02:15.83,Default,,0000,0000,0000,,Ta có thể đặt tag ở rất nhiều vị trí khác nhau trong DOM.
Dialogue: 0,0:02:15.83,0:02:21.34,Default,,0000,0000,0000,,Ta làm cái đơn giản nhất thôi nhé, hiển thị nó ở cuối trang là được.
Dialogue: 0,0:02:21.34,0:02:26.30,Default,,0000,0000,0000,,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:
Dialogue: 0,0:02:26.30,0:02:29.86,Default,,0000,0000,0000,,`document.body.appendChild(catEl);`
Dialogue: 0,0:02:29.86,0:02:31.20,Default,,0000,0000,0000,,Haha—nó đây rồi!
Dialogue: 0,0:02:31.20,0:02:32.71,Default,,0000,0000,0000,,Ảnh hơi to.
Dialogue: 0,0:02:32.71,0:02:34.98,Default,,0000,0000,0000,,Mèo to khủng khiếp—sợ quá.
Dialogue: 0,0:02:34.98,0:02:41.20,Default,,0000,0000,0000,,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,
Dialogue: 0,0:02:41.20,0:02:47.34,Default,,0000,0000,0000,,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 đó.
Dialogue: 0,0:02:47.34,0:02:52.12,Default,,0000,0000,0000,,Đó là lúc DOM được trực quan hóa dưới dạng hình cây.
Dialogue: 0,0:02:52.12,0:02:57.87,Default,,0000,0000,0000,,Tag `` là một nốt trên cây đó, và có cả tá con cái,
Dialogue: 0,0:02:57.87,0:03:00.08,Default,,0000,0000,0000,,ví dụ như `` và ``,
Dialogue: 0,0:03:00.08,0:03:04.40,Default,,0000,0000,0000,,và cuối phần tử con đó ta lại thêm một phần tử con khác.
Dialogue: 0,0:03:04.40,0:03:09.07,Default,,0000,0000,0000,,Như vậy ta sẽ thêm vào sau tag ``, ngay đây.
Dialogue: 0,0:03:09.07,0:03:13.32,Default,,0000,0000,0000,,Với các thủ tục DOM, về mặt lý thuyết ta sẽ có thể gắn phần tử
Dialogue: 0,0:03:13.32,0:03:15.53,Default,,0000,0000,0000,,vào bất cứ đâu trên cây DOM.
Dialogue: 0,0:03:15.53,0:03:19.45,Default,,0000,0000,0000,,Ta sẽ đưa nó vào vị trí dễ thấy nhất.
Dialogue: 0,0:03:19.45,0:03:22.02,Default,,0000,0000,0000,,Được rồi, cùng làm thêm một ví dụ nữa nhé.
Dialogue: 0,0:03:22.02,0:03:28.28,Default,,0000,0000,0000,,Ta đã sử dụng `innerHTML` ở dưới đây, để đưa tag `` vào trong ``.
Dialogue: 0,0:03:28.28,0:03:31.44,Default,,0000,0000,0000,,Thay vào đó, ta có thể sử dụng `createElement`.
Dialogue: 0,0:03:31.44,0:03:33.16,Default,,0000,0000,0000,,[đang gõ]
Dialogue: 0,0:03:39.62,0:03:43.82,Default,,0000,0000,0000,,Tôi gõ nhầm mất rồi, chính tả rất quan trọng đấy nhé.
Dialogue: 0,0:03:43.82,0:03:48.66,Default,,0000,0000,0000,,Như vậy sẽ tạo một tag `` trống, lang thang đâu đó.
Dialogue: 0,0:03:48.66,0:03:51.88,Default,,0000,0000,0000,,Vì vậy, trước hết ta sẽ thiết lập văn bản,
Dialogue: 0,0:03:51.88,0:03:56.57,Default,,0000,0000,0000,,`strongEl.textContent = "cat";`.
Dialogue: 0,0:03:56.57,0:03:57.75,Default,,0000,0000,0000,,Được chưa?
Dialogue: 0,0:03:57.75,0:04:01.82,Default,,0000,0000,0000,,Ta có thể chọn thực hiện thao tác khác,\N55\N00:04:01,816 --> 00:04:04,581\Ntrong đó ta sẽ tạo `textNode`.
Dialogue: 0,0:04:04.58,0:04:09.32,Default,,0000,0000,0000,,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`,
Dialogue: 0,0:04:09.32,0:04:10.73,Default,,0000,0000,0000,,làm nốt con.
Dialogue: 0,0:04:10.73,0:04:14.100,Default,,0000,0000,0000,,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.
Dialogue: 0,0:04:14.100,0:04:17.54,Default,,0000,0000,0000,,Trên thực tế ta gọi chúng là “nốt lá”, vì đó là
Dialogue: 0,0:04:17.54,0:04:20.08,Default,,0000,0000,0000,,bộ phận sau chót trên cây.
Dialogue: 0,0:04:20.08,0:04:21.74,Default,,0000,0000,0000,,[đang gõ]
Dialogue: 0,0:04:27.55,0:04:31.82,Default,,0000,0000,0000,,Ta sẽ đưa vào văn bản, “cat”.
Dialogue: 0,0:04:31.82,0:04:34.50,Default,,0000,0000,0000,,Khi sử dụng kỹ thuật này, tức là
Dialogue: 0,0:04:34.50,0:04:42.17,Default,,0000,0000,0000,,ta đã tạo 2 nốt lang thang: một tag ``,
Dialogue: 0,0:04:42.17,0:04:46.55,Default,,0000,0000,0000,,rồi đến `textNode` này, chỉ có nội dung là “cat”.
Dialogue: 0,0:04:46.55,0:04:49.68,Default,,0000,0000,0000,,Và ta cần phải kết nối chúng với nhau.
Dialogue: 0,0:04:49.68,0:04:54.91,Default,,0000,0000,0000,,Ta muốn `` là mẹ của “cat”.
Dialogue: 0,0:04:54.91,0:05:03.15,Default,,0000,0000,0000,,Vì vậy ta sẽ nhập `strongEI.appendChild(strongText);`.
Dialogue: 0,0:05:03.15,0:05:12.11,Default,,0000,0000,0000,,OK, vậy là ta đã có `` với “cat” bên trong,
Dialogue: 0,0:05:12.11,0:05:18.58,Default,,0000,0000,0000,,và ta phải gắn vào vị trí theo ý muốn, vì nó vẫn đang lang thang đâu đó.
Dialogue: 0,0:05:18.58,0:05:24.53,Default,,0000,0000,0000,,Ta đang ở trong vòng lặp `for` cho `nameEIs`, và mỗi `nameEIs`
Dialogue: 0,0:05:24.53,0:05:27.35,Default,,0000,0000,0000,,là một vị trí ta cần gắn tag ``.
Dialogue: 0,0:05:27.35,0:05:34.98,Default,,0000,0000,0000,,Ta có, `nameEIs[i].appendChild(strongEI);`.
Dialogue: 0,0:05:34.98,0:05:42.20,Default,,0000,0000,0000,,Aha, giờ thì lại gấp đôi luôn, vì tôi vẫn để nguyên như cũ.
Dialogue: 0,0:05:42.20,0:05:47.34,Default,,0000,0000,0000,,Ta đang gắn vào một tag `` đã có sẵn `` trong đó.
Dialogue: 0,0:05:47.34,0:05:52.43,Default,,0000,0000,0000,,Ta có thể thay đổi dòng này thành `innerHTML` bằng chuỗi trống,
Dialogue: 0,0:05:52.43,0:05:57.82,Default,,0000,0000,0000,,từ đó dọn sạch span trước khi ta gắn vào nó.
Dialogue: 0,0:05:57.82,0:06:04.92,Default,,0000,0000,0000,,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`.
Dialogue: 0,0:06:04.92,0:06:06.99,Default,,0000,0000,0000,,Vậy tại sao ta lại làm thế?
Dialogue: 0,0:06:06.99,0:06:11.10,Default,,0000,0000,0000,,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
Dialogue: 0,0:06:11.10,0:06:13.43,Default,,0000,0000,0000,,vì nó rất tốn mã.
Dialogue: 0,0:06:13.43,0:06:16.71,Default,,0000,0000,0000,,Hầu hết đều sử dụng những thư viện như jQuery,
Dialogue: 0,0:06:16.71,0:06:21.35,Default,,0000,0000,0000,,để chỉnh sửa DOM, từ đó cung cấp các hàm
Dialogue: 0,0:06:21.35,0:06:26.87,Default,,0000,0000,0000,,cùng chức năng nhưng ít mã hơn rất nhiều,
Dialogue: 0,0:06:26.87,0:06:29.31,Default,,0000,0000,0000,,vì ta đang sử dụng các hàm library thay thế.
Dialogue: 0,0:06:29.31,0:06:33.37,Default,,0000,0000,0000,,Tôi thích viết mã theo phương pháp này, vì tôi có thể
Dialogue: 0,0:06:33.37,0:06:38.67,Default,,0000,0000,0000,,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.
Dialogue: 0,0:06:38.67,0:06:43.04,Default,,0000,0000,0000,,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.
Dialogue: 0,0:06:43.04,0:06:44.77,Default,,0000,0000,0000,,Nhưng có thể các bạn lại không thích.
Dialogue: 0,0:06:44.77,0:06:47.19,Default,,0000,0000,0000,,Dù sao thì ta cũng biết nó có tồn tại.
Dialogue: 0,0:06:47.19,0:06:50.94,Default,,0000,0000,0000,,Vì vậy các bạn có thể áp dụng nếu cần thiết, và có thể hiểu được
Dialogue: 0,0:06:50.94,0:00:00.00,Default,,0000,0000,0000,,chức năng thực sự của những thư viện như jQuery.