-
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.
-
Nhưng nếu ta muốn thêm phần tử mới vào trang thì sao?
-
Ta có thể thực hiện điều đó với `innerHTML`, viết HTML cho những tag
-
bên trong chuỗi mà ta đưa vào, như ở đây.
-
Dù vậy nhưng có thể sẽ khá lộn xộn đấy, đặc biệt khi ta muốn tạo
-
nhiều tag với những thuộc tính, style, và class khác nhau.
-
Thay vì thế, ta có thể sử dụng nguyên một bộ thủ tục document
-
để tạo phần tử mới toanh và thêm vào trang web.
-
Giả sử ta muốn thêm một ảnh mèo vào trang,
-
vì ta nghĩ rằng vẫn hơi ít ảnh.
-
Bước đầu tiên là tạo phần tử mới ``, đúng không?
-
Ta phải tạo phần tử đó.
-
Ta sẽ bắt đầu bằng cách tạo một biến để lưu trữ phần tử, `catEI`.
-
Sau đó ta sẽ sử dụng `document.createElement`,
-
và đưa vào tên tag đang tạo, `img`.
-
Các bạn có thể tưởng tượng trình duyệt đã tạo một tag image, như thế này,
-
và nó đang lang thang ở đâu đó.
-
Bước tiếp theo là gán nguồn cho phần tử.
-
Vậy là, `catEI.src =`,
-
và ta chỉ việc lấy nguồn ở trên đây,
-
và—úi, ta nên thâm cả `alt` nữa, để giúp hình ảnh dễ truy cập hơn—
-
tôi quên mất đấy, lúc nào ta cũng nên có tag `alt` cho hình ảnh.
-
Bây giờ các bạn có thể hình dung tag `` mà ta vừa tạo
-
có một `src`, và cả một `alt`, “Photo of cute cat”.
-
OK, đây là những gì ta vừa tạo bằng JavaScript.
-
Tag `` vẫn đang lang thang đâu đó,
-
vì ta vẫn chưa lệnh cho trình duyệt phải đặt ở vị trí nào.
-
Ta có thể đặt tag ở rất nhiều vị trí khác nhau trong DOM.
-
Ta làm cái đơn giản nhất thôi nhé, hiển thị nó ở cuối trang là được.
-
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:
-
`document.body.appendChild(catEl);`
-
Haha—nó đây rồi!
-
Ảnh hơi to.
-
Mèo to khủng khiếp—sợ quá.
-
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,
-
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 đó.
-
Đó là lúc DOM được trực quan hóa dưới dạng hình cây.
-
Tag `` là một nốt trên cây đó, và có cả tá con cái,
-
ví dụ như `` và ``,
-
và cuối phần tử con đó ta lại thêm một phần tử con khác.
-
Như vậy ta sẽ thêm vào sau tag ``, ngay đây.
-
Với các thủ tục DOM, về mặt lý thuyết ta sẽ có thể gắn phần tử
-
vào bất cứ đâu trên cây DOM.
-
Ta sẽ đưa nó vào vị trí dễ thấy nhất.
-
Được rồi, cùng làm thêm một ví dụ nữa nhé.
-
Ta đã sử dụng `innerHTML` ở dưới đây, để đưa tag `` vào trong ``.
-
Thay vào đó, ta có thể sử dụng `createElement`.
-
[đang gõ]
-
Tôi gõ nhầm mất rồi, chính tả rất quan trọng đấy nhé.
-
Như vậy sẽ tạo một tag `` trống, lang thang đâu đó.
-
Vì vậy, trước hết ta sẽ thiết lập văn bản,
-
`strongEl.textContent = "cat";`.
-
Được chưa?
-
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`.
-
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`,
-
làm nốt con.
-
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.
-
Trên thực tế ta gọi chúng là “nốt lá”, vì đó là
-
bộ phận sau chót trên cây.
-
[đang gõ]
-
Ta sẽ đưa vào văn bản, “cat”.
-
Khi sử dụng kỹ thuật này, tức là
-
ta đã tạo 2 nốt lang thang: một tag ``,
-
rồi đến `textNode` này, chỉ có nội dung là “cat”.
-
Và ta cần phải kết nối chúng với nhau.
-
Ta muốn `` là mẹ của “cat”.
-
Vì vậy ta sẽ nhập `strongEI.appendChild(strongText);`.
-
OK, vậy là ta đã có `` với “cat” bên trong,
-
và ta phải gắn vào vị trí theo ý muốn, vì nó vẫn đang lang thang đâu đó.
-
Ta đang ở trong vòng lặp `for` cho `nameEIs`, và mỗi `nameEIs`
-
là một vị trí ta cần gắn tag ``.
-
Ta có, `nameEIs[i].appendChild(strongEI);`.
-
Aha, giờ thì lại gấp đôi luôn, vì tôi vẫn để nguyên như cũ.
-
Ta đang gắn vào một tag `` đã có sẵn `` trong đó.
-
Ta có thể thay đổi dòng này thành `innerHTML` bằng chuỗi trống,
-
từ đó dọn sạch span trước khi ta gắn vào nó.
-
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`.
-
Vậy tại sao ta lại làm thế?
-
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
-
vì nó rất tốn mã.
-
Hầu hết đều sử dụng những thư viện như jQuery,
-
để chỉnh sửa DOM, từ đó cung cấp các hàm
-
cùng chức năng nhưng ít mã hơn rất nhiều,
-
vì ta đang sử dụng các hàm library thay thế.
-
Tôi thích viết mã theo phương pháp này, vì tôi có thể
-
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.
-
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.
-
Nhưng có thể các bạn lại không thích.
-
Dù sao thì ta cũng biết nó có tồn tại.
-
Vì vậy các bạn có thể áp dụng nếu cần thiết, và có thể hiểu được
-
chức năng thực sự của những thư viện như jQuery.
