Giới thiệu về DOM

Document Object Model thường được gọi là DOM, là một phần quan trọng trong việc làm các website tương tác. Nó như là một giao diện cho phép ngôn ngữ lập trình thao tác nội dung, cấu trúc và định dạng của một website. JavaScript là một ngôn ngữ kịch bản phía client có thể kết nối với DOM trong trình duyệt.

Hầu như bất kỳ lúc nào trang web đều thực hiện một hành động, chẳng hạn như xoay một hình ảnh, hiển thị lỗi người dùng khi nhập sai password trong form, điều hướng menu, đó là kết quả của JavaScript truy cập và thao tác DOM. Trong bài viết này, chúng ta sẽ tìm hiểu về DOM, cách thức nó làm việc và sự khác nhau giữa các đoạn mã HTML và DOM

Điều kiện tiên quyết

Để hiểu được DOM một cách hiệu quả và cách nó liên quan đến việc làm web, cần phải có kiến thức, hiểu biết về HTML và CSS. Nó có lợi cho việc làm quen với cú pháp cơ bản và cấu trúc của JavaScript.

DOM là gì?

Ở một cấp độ cơ bản nhất, một website tồn tại một tài liệu HTML. Trình duyệt mà bạn sử dụng để xem các website là một chưng trình phiên dịch HTML và CSS và tạo ra các định dạng, kiểu dáng, nội dung và cấu trúc bên trong các trang mà bạn nhìn.

Ngoài việc phân tích cú pháp style và cấu trúc của HTML và CSS, trình duyệt tạo ra một đại diện của một tài liệu được biết là Document Object Model. Mô hình này cho phép JavaScript truy cập, thao tác các văn bản nội dung, các phần tử của tài liệu website dưới dạng một Object.

JavaScript là một ngôn ngữ tương tác và nó rất dễ để hiểu các khái niệm mới. Hãy tạo một website đơn giản. Tạo một file index.html và lưu nó trong một thư mục project nào đó.


<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>

</html>

Đoạn mã HTML ở trên rất quen thuộc, nó là bộ khung để tạo một trang web mới. Nó chứa các khối nội dung quan trọng nhất của một tài liệu web - một doctype và một thẻ html với gồm phần head và body bên trong nó.

Chúng tôi sử dụng trình duyệt Chrome để hiển thị các trang web, tuy nhiên bạn có thể sử dụng các trình duyệt hiện đại khác để hiển thị nội dung và kết quả tương tự nhau. Chúng ta mở file index.html trên chrome. Bạn sẽ thấy một trang web đơn giản với đoạn nội dung "Document Object Model". Nhấp chuột phải vào bất kỳ phần nào trên trang và chọn inspect. Thao tác này sẽ mở ra Developer Tools.

Trong tab Elements, 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à chúng tôi vừa viết - một loại tài liệu và một số thẻ HTML khác mà chúng tôi đã 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ị. Mũi tên nhỏ ở phía trái các phần tử HTML cho phép bạn chuyển đổi chế độ xem của các phần tử lồng nhau.

Document Object

Document object là một đối tượng dựng sẵn tích hợp các thuộc tính và phương thức mà chúng ta có thể sử dụng để truy cập, sửa đổi các trang web. Để làm việc với DOM, bạn phải hiểu các cách mà các đối tượng hoạt động trong JavaScript. Hãy xem lại hoặc tìm hiểu lại về Object trong JavaScript nếu bạn chưa thoải mái hoặc chưa biết nhiều về khái niệm này.

Trong Developer Tools trên trang index.html hãy chuyển đến tab console. Gõ document bên trong console và nhấn phím Enter. Bạn sẽ thấy output giống như bạn nhìn thấy ở tab Elements.

> document;

Output
#document
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>

</html>

Việc gõ document và làm việc trực tiếp trên giao diện console không phải thứ mà bạn thường làm để debug, nhưng nó giúp bạn biết chính xác đối tượng document là gì và cách chỉnh sửa nó sẽ được khám phá ở bên dưới.

Sự khác nhau giữa DOM và đoạn mã HTML

Hiện tại, với ví dụ ở trên, đoạn mã HTML và DOM có lẽ giống nhau. Có hai trường hợp trong đó DOM do trình duyệt tạo ra sẽ khác với đoạn mã 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 làm thế nào mà DOM có thể được sửa đổi, chỉnh sửa bởi JavaScript phía client. Gõ đoạn mã dưới đây trong console tab:

> document.body;

Console sẽ trả về kết quả:

Output
<body>
  <h1>Document Object Model</h1>
</body>

document là một object, body là một thuộc tính của đối tượng mà chúng tôi truy cập nó bằng ký tự (.). Việc gửi document.body tới giao diện điều khiển sẽ xuất ra phần tử body và mọi thứ bên trong nó.

Thao tác trên console chúng ta có thể thay đổi trực tiếp một số thuộc tính của đối tượng body trên website này. Chúng tôi sẽ sửa một số thuộc tính style như thay đổi màu nền thành fuchsia. Gõ đoạn mã dưới đây ở console:

> document.body.style.backgroundColor = 'fuchsia';

Sau khi nhập và gửi đoạn mã trên, bạn sẽ thấy web sẽ cập nhật màu nền cho body.

Chuyển qua tab Elements gõ document.body một lần nữa, bạn sẽ thấy rằng DOM đã thay đổi.

Output
<body style="background-color: fuchsia;">
  <h1>Document Object Model</h1>
</body>

Chú ý: Để thay đổi thuộc tính CSS background-color, chúng tôi đã nhập bacgroundColor trong JavaScript. Bất kỹ thuộc tính CSS được gạch nối nào sẽ được viết bằng camelCase trong JavaScript

Đoạn mã JavaScript được gõ, sẽ gán màu nền fuchsia cho body, bây giờ đã là một phần của DOM.

Tuy nhiên khi nhấp chuột phải vào trang web và chọn View Page Source. Bạn sẽ thấy rằng source code của website sẽ không chứa thuộc tính mới đã được thêm vào từ JavaScript. Mã nguồn của một trang web sẽ không thay đổi và không bao giờ bị ảnh hưởng bởi JavaScript phía client. Nếu bạn làm mới trang (refresh) đoạn mã mới mà chúng tôi thêm ở console sẽ biến mất.

Một ví dụ khác, trong đó DOM có thể có đầu ra khác với mã nguồn HTML là kho có lỗi trong source code. Một ví dụ phổ biến của điều này là thẻ table - một thẻ tbody được yêu cầu bên trong một table nhưng các developer thường không viết trong đoạn mã 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 được fic các thẻ chưa đóng.

Tổng kết

Trong bài viết này, chúng tôi đã cung cấp khái niệm DOM, truy cập đối tượng document, đã sử dụng JavaScript trên console để update một thuộc tính của đối tượng document, và nêu ra sự khác nhau giữa HTML source code và DOM.

Trong bài tiếp theo chúng tôi sẽ xem xét các thuật ngữ HTML quan trọng, tìm hiểu DOM tree, khám phá các node, tìm hiểu các node phổ biến và bắt đầu tạo các tập lệnh tương tác với JavaScript

Bài viết được dịch từ digitalocean.com

Đăng ký thực tập Web front-end tại: http://bit.ly/2GTgkky

Tìm hiểu về DOM - Document Object Model (p1 - Giới thiệu)