Giới thiệu về DOM
Mô hình Đối tượng Tài liệu , thường được gọi là DOM , là một phần thiết yếu để làm cho các trang web trở nên tương tác. Nó là một giao diện cho phép một ngôn ngữ lập trình thao tác nội dung, cấu trúc và phong cách của một trang web. JavaScript là ngôn ngữ kịch bản phía client kết nối với DOM trong trình duyệt internet. Hầu như bất kỳ lúc nào trang web thực hiện một hành động, chẳng hạn như xoay giữa trình chiếu hình ảnh, hiển thị lỗi khi user cố gắng gửi biểu mẫu chưa hoàn chỉnh hoặc chuyển đổi menu chuyển , đó là kết quả của việc JavaScript truy cập và thao tác DOM. Trong bài này, ta sẽ tìm hiểu DOM là gì, cách làm việc với đối tượng document và sự khác biệt giữa mã nguồn HTML và DOM.
Lưu ý: Mặc dù DOM là ngôn ngữ bất khả tri hoặc được tạo ra để độc lập với một ngôn ngữ lập trình cụ thể, trong suốt tài nguyên này, ta sẽ tập trung vào và đề cập đến việc triển khai DOM HTML của JavaScript.
Yêu cầu
Để hiểu DOM một cách hiệu quả và nó liên quan như thế nào đến việc làm việc với web, bạn cần phải có kiến thức hiện có về HTML và CSS . Nó cũng có lợi khi bạn quen với cấu trúc mã và cú pháp JavaScript cơ bản.
DOM là gì?
Ở cấp độ cơ bản nhất, một trang web bao gồm một trang HTML . Trình duyệt mà bạn sử dụng để xem trang web là một chương trình thông dịch HTML và CSS và hiển thị kiểu, nội dung và cấu trúc cho trang mà bạn thấy.
Ngoài việc phân tích kiểu và cấu trúc của HTML và CSS, trình duyệt tạo ra một bản trình bày của tài liệu được gọi là Mô hình Đối tượng Tài liệu. Mô hình này cho phép JavaScript truy cập nội dung văn bản và các phần tử của tài liệu trang web dưới dạng đối tượng .
JavaScript là một ngôn ngữ tương tác và việc hiểu các khái niệm mới sẽ dễ dàng hơn. Hãy tạo một trang web rất cơ bản. Tạo một index.html và lưu nó trong một folder dự án mới.
<!DOCTYPE html> <html lang="en"> <head> <title>Learning the DOM</title> </head> <body> <h1>Document Object Model</h1> </body> </html> Mã này là nguồn HTML quen thuộc của khung trang web mới. Nó chứa các khía cạnh quan trọng nhất tuyệt đối của tài liệu trang web - loại tài liệu và thẻ html với phần head và body lồng vào bên trong.
Vì mục đích của ta , ta sẽ sử dụng trình duyệt Chrome, nhưng bạn có thể nhận kết quả tương tự từ trình duyệt hiện đại khác. Trong Chrome, mở index.html . Bạn sẽ thấy một trang web đơn giản với tiêu đề của ta là “Mô hình đối tượng tài liệu”. Nhấp chuột phải vào bất kỳ đâu trên trang và chọn “Kiểm tra”. Thao tác này sẽ mở Công cụ dành cho nhà phát triển.
Trong tab Phần tử , bạn sẽ thấy DOM.
Trong trường hợp này, khi được mở rộng, nó trông giống hệt như mã nguồn HTML mà ta vừa viết - một loại tài liệu và một vài thẻ HTML khác mà ta đã thêm vào. Di chuột qua từng phần tử sẽ đánh dấu phần tử tương ứng trong trang web được hiển thị. Các mũi tên nhỏ ở bên trái của các phần tử HTML cho phép bạn chuyển đổi chế độ xem các phần tử lồng nhau.
Đối tượng tài liệu
Đối tượng document là một đối tượng được tích hợp sẵn có nhiều thuộc tính và phương thức mà ta có thể sử dụng để truy cập và sửa đổi các trang web. Để hiểu cách làm việc với DOM, bạn phải hiểu cách các đối tượng hoạt động trong JavaScript. Xem lại phần Hiểu đối tượng trong JavaScript nếu bạn không cảm thấy thoải mái với khái niệm đối tượng.
Trong Công cụ dành cho nhà phát triển trên index.html , hãy chuyển đến tab Control panel . Nhập document vào console và nhấn ENTER . Bạn sẽ thấy rằng những gì kết quả giống như những gì bạn thấy trong tab Thành phần .
- document;
Output#document <!DOCTYPE html> <html lang="en"> <head> <title>Learning the DOM</title> </head> <body> <h1>Document Object Model</h1> </body> </html> Nhập document và làm việc trực tiếp trong console không phải là điều mà bạn thường sẽ làm ngoài việc gỡ lỗi, nhưng nó giúp củng cố chính xác đối tượng document là gì và cách sửa đổi nó, như ta sẽ khám phá bên dưới.
Sự khác biệt giữa mã nguồn DOM và HTML là gì?
Hiện tại, với ví dụ này, có vẻ như mã nguồn HTML và DOM hoàn toàn giống nhau. Có hai trường hợp trong đó DOM do trình duyệt tạo sẽ khác với mã nguồn HTML:
- DOM được sửa đổi bởi JavaScript phía client
- Trình duyệt tự động sửa lỗi trong mã nguồn
Hãy chứng minh cách DOM có thể được sửa đổi bằng JavaScript phía client . Nhập thông tin sau vào console :
- document.body;
Control panel sẽ phản hồi với kết quả này:
Output<body> <h1>Document Object Model</h1> </body> document là một đối tượng, body là một thuộc tính của đối tượng đó mà ta đã truy cập với ký hiệu dấu chấm. Việc gửi document.body đến console sẽ xuất ra phần tử body và mọi thứ bên trong nó.
Trong console , ta có thể thay đổi một số thuộc tính trực tiếp của đối tượng body trên trang web này. Ta sẽ chỉnh sửa thuộc tính style , thay đổi màu nền thành fuchsia . Nhập cái này vào console :
- document.body.style.backgroundColor = 'fuchsia';
Sau khi nhập và gửi mã ở trên, bạn sẽ thấy cập nhật trực tiếp cho trang web khi màu nền thay đổi.
Chuyển sang tab Elements hoặc nhập lại document.body vào console , bạn sẽ thấy rằng DOM đã thay đổi.
Output<body style="background-color: fuchsia;"> <h1>Document Object Model</h1> </body> Lưu ý: Để thay đổi thuộc background-color CSS background-color , ta phải nhập backgroundColor trong JavaScript. Bất kỳ thuộc tính CSS nào có dấu gạch nối sẽ được viết bằng camelCase trong JavaScript.
Mã JavaScript mà ta đã nhập, gán fuchsia cho màu nền của phần body , giờ là một phần của DOM.
Tuy nhiên, nhấp chuột phải vào trang và chọn “Xem nguồn trang”. Bạn sẽ nhận thấy rằng nguồn của trang web không chứa thuộc tính kiểu mới mà ta đã thêm qua JavaScript. Nguồn của một trang web sẽ không thay đổi và sẽ không bao giờ bị ảnh hưởng bởi JavaScript phía client . Nếu bạn làm mới trang, mã mới mà ta đã thêm vào console sẽ không xuất hiện .
Trường hợp khác trong đó DOM có thể có kết quả khác với mã nguồn HTML là khi có lỗi trong mã nguồn. Một ví dụ phổ biến về điều này là thẻ table - cần có thẻ tbody bên trong table , nhưng các nhà phát triển thường không đưa nó vào HTML của họ. Trình duyệt sẽ tự động sửa lỗi và thêm tbody , sửa đổi DOM. DOM cũng sẽ sửa các thẻ chưa được đóng.
Kết luận
Trong hướng dẫn này, ta đã định nghĩa DOM, truy cập vào đối tượng document , sử dụng JavaScript và console để cập nhật thuộc tính của đối tượng document và tìm hiểu sự khác biệt giữa mã nguồn HTML và DOM.
Để biết thêm thông tin chuyên sâu về DOM, hãy xem lại trang Mô hình đối tượng tài liệu (DOM) trên Mạng nhà phát triển Mozilla.
Trong hướng dẫn tiếp theo, ta sẽ xem xét các thuật ngữ HTML quan trọng, tìm hiểu về cây DOM, khám phá các node là gì, tìm hiểu về các loại nút phổ biến nhất và bắt đầu tạo các tập lệnh tương tác với JavaScript.
Các tin liên quan
