Dungeons & Dragons & the DOM: Giới thiệu về thao tác DOM trong JavaScript

“Bạn không thao túng DOM. DOM thao túng bạn! ” Nhóm bạn của tôi là các sinh viên kỹ thuật phần mềm cười khi chúng tôi suy nghĩ về việc có bao nhiêu sinh viên khác đã tự mình nghĩ ra một lớp lót này khi lần đầu tiên họ gặp cụm từ, “thao tác với DOM”.

Vậy DOM là gì? Nó là viết tắt của Document Object Model. Nó là một giao diện JavaScript cho phép chúng ta thao tác các phần tử của một tài liệu. Chúng tôi cũng có thể thêm các sự kiện kích hoạt thêm thao tác để giúp chúng tôi tạo các trang động.

Rất khó để nắm bắt khái niệm này khi bạn hoàn toàn mới làm quen với JavaScript hoặc viết mã nói chung. Bạn được giới thiệu các phương thức tài liệu cho phép bạn trả về các phần tử từ tài liệu. Sau đó, bạn được giới thiệu với innerHTML, innerText và textContent, có thể thay đổi phần tử trả về của bạn. Phản xạ tinh thần ban đầu của bạn sẽ là hỏi, “Tại sao chúng ta không chỉnh sửa trực tiếp HTML của mình thay vì nhập tất cả các dòng mã bổ sung này?”.

Câu hỏi này cứ lởn vởn trong đầu tôi trong nhiều tuần. Tôi đã tạo một trang web cá nhân sử dụng HTML và CSS ngay trước khi chương trình kỹ thuật phần mềm của tôi bắt đầu và cảm thấy rằng tôi có thể thực hiện các dự án lập trình front-end mà không cần thao tác JavaScript DOM. Không có ý nghĩa gì cho đến khi dự án đầu tiên của chúng tôi, nơi tôi quyết định xây dựng Dungeons and Dragons Spellbook .

Dungeons & Dragons Spellbook là một ứng dụng một trang đóng vai trò là bảng chú giải thuật ngữ sử dụng API D&D 5e. Dự án này sẽ khiến tôi mất vài ngày hoặc thậm chí vài tuần chỉ với kiến ​​thức trước đây của tôi về HTML và CSS. Tôi sẽ phải tạo một trang riêng cho mỗi phép thuật trong số hơn 300 phép thuật, biến nó thành một cuộc thi sao chép và dán đầy tẻ nhạt. Thao tác DOM đã biến điều này thành một dự án buổi chiều đơn giản với sự trợ giúp của phương thức fetch () và innerHTML.

Phương thức fetch () là một chủ đề đáng được đưa vào một bài đăng trên blog của riêng nó. Hiện tại, tôi sẽ đề cập đến việc tìm nạp cho phép chúng ta truy cập dữ liệu từ một nguồn không đồng bộ. Trong trường hợp này, API D&D 5e. Chủ đề của chúng ta hôm nay là thao tác DOM vì vậy chúng ta sẽ tập trung vào innerHTML và chạm nhẹ vào hai người anh em của nó là innerText và textContent.

Ba thuộc tính JavaScript được đề cập ở trên có thể thiết lập hoặc trả về nội dung HTML trong DOM. InnerText sẽ trả về văn bản nhưng bỏ qua các thẻ html và các phần tử kiểu. TextContent sẽ trả về các phần tử văn bản và kiểu nhưng bỏ qua các thẻ html. Tôi đã chọn sử dụng innerHTML vì nó cho phép chúng tôi trả về các thẻ HTML cùng với văn bản. Điều này rất quan trọng vì tôi cần bao gồm thẻ <a> để tạo danh sách các liên kết "có thể nhấp được" và các thẻ <p> và <br> khi chúng tôi hiển thị thông tin chi tiết về chính tả được nhấp.

Đầu tiên, hãy xem HTML của chúng tôi:

Lưu ý ở dòng 17 và 18 rằng tôi đã gán các ID “danh sách chính tả” và “thông tin” cho các thẻ <ul> và <div> hoàn toàn trống. Đây là nơi chúng tôi sẽ trả về dữ liệu bằng cách sử dụng innerHTML.

Bây giờ dành cho JavaScript innerHTML đầu tiên của chúng tôi:

Trong dòng 7 của hàm này, tôi sử dụng getElementByID để xác định nơi chúng tôi sẽ trả về dữ liệu đã tìm nạp của mình. Trong dòng 14 và 15, forEach cho phép chúng tôi lặp lại dữ liệu mảng đã tìm nạp của chúng tôi và trả nó về HTML của chúng tôi bằng cách sử dụng innerHTML dưới dạng danh sách ở dạng thẻ <a>.

Kết quả là danh sách các phép thuật có thể nhấp gọn gàng này với một số trợ giúp tạo kiểu CSS tối thiểu.

Bây giờ chúng ta cần có thể hiển thị thông tin chi tiết khi chúng ta nhấp vào một trong những phép thuật này. Nhưng trước tiên, chúng ta cần xóa dữ liệu khỏi <ul> trước khi trả lại dữ liệu cho <div> của chúng ta.

Một dòng mã này thực hiện chính xác điều đó. Ngắn và ngọt. Chuỗi trống này thay thế cho <ul> đầy đủ các câu thần chú của chúng tôi. Chúng tôi sẽ sử dụng dòng này ở đầu hàm mà chúng tôi dự định trả về thông tin chính tả cho <div>.

Và cuối cùng, ở đây, chúng tôi có thể định dạng dữ liệu đã tìm nạp của mình theo cách chúng tôi muốn với sự trợ giúp của innerHTML. Việc có thể sử dụng các thẻ <h2>, <p> và <br> cho phép chúng tôi hiển thị thông tin chính tả của mình như sau:

Ở đâu đó trong giai đoạn lập kế hoạch của dự án này là khoảnh khắc "eureka" của tôi. Tôi đã tham gia một số lớp thiết kế web bắt buộc nhỏ ở trường trung học và đại học vào cuối những năm 90 và đầu những năm 2000. Khi đó chúng tôi được cho là xây dựng các trang web bằng cách sử dụng nhiều trang. Giờ đây, học cách lặp lại dữ liệu và thao tác với DOM cho phép chúng tôi xây dựng các ứng dụng một trang mạnh mẽ. Bản thân tôi lúc nhỏ sẽ không bao giờ nghĩ rằng mình có thể xây dựng một dự án như thế này chỉ với một trang, một số chức năng và trong một sớm một chiều.

Dự án Github:

Nguồn: