DOM là gì? Toàn tập về Cấu trúc và Thao tác DOM trong JS

Khi bắt đầu với lập trình web, bạn có bao giờ thắc mắc làm thế nào JavaScript có thể thay đổi màu sắc một nút bấm hay thêm một dòng chữ vào trang? Câu trả lời nằm ở DOM. Vậy DOM là gì và tại sao nó lại quan trọng đến vậy? Hãy cùng Việt Thắng tìm hiểu toàn tập về cấu trúc và cách thao tác với cây cầu ma thuật này, biến trang web tĩnh của bạn trở nên sống động và tương tác.

Tổng quan về Document Object Model

Để thực sự hiểu về lập trình web phía client, khái niệm đầu tiên bạn cần nắm vững chính là DOM. Nó không phải là một ngôn ngữ lập trình, mà là một giao diện chuẩn giúp các ngôn ngữ như JavaScript có thể ‘giao tiếp’ với trang web.

DOM là gì?

DOM là viết tắt của Document Object Model, dịch nôm na là Mô hình Đối tượng Tài liệu. Hãy cùng Việt Thắng phân tích từng thành phần nhé:

Document (Tài liệu): Đây chính là tài liệu HTML mà bạn viết mã, là thứ mà trình duyệt đọc vào.
Object (Đối tượng): DOM xem mỗi thành phần trong tài liệu HTML (như thẻ <h1>, <p>, <div>) là một đối tượng. Mỗi đối tượng này có các thuộc tính và phương thức riêng.
Model (Mô hình): DOM sắp xếp tất cả các đối tượng này thành một cấu trúc logic dạng cây, phản ánh mối quan hệ phân cấp giữa các thẻ HTML.

Nói đơn giản, HTML DOM là gì? Đó là cách trình duyệt biểu diễn cấu trúc của một trang web dưới dạng các đối tượng mà mã lập trình có thể hiểu và tương tác.

Vai trò của DOM trong lập trình Web

DOM đóng vai trò như một cây cầu nối tiêu chuẩn giữa nội dung trang web (HTML) và ngôn ngữ kịch bản (JavaScript). Khi trình duyệt tải một trang web, nó sẽ đọc file HTML và xây dựng nên một cấu trúc cây trong bộ nhớ. Cấu trúc cây này chính là DOM. Mọi thay đổi bạn muốn thực hiện trên giao diện người dùng đều phải thông qua cây cầu này.

Tại sao JavaScript cần thao tác với DOM?

Bạn hãy tưởng tượng file HTML chỉ là một văn bản dài. Nếu không có DOM, DOM JavaScript sẽ không thể hiểu được đâu là tiêu đề, đâu là đoạn văn, đâu là nút bấm. JavaScript sẽ chỉ thấy một chuỗi ký tự mà thôi.

Nhờ có DOM, JavaScript có thể:

Tìm và chọn bất kỳ phần tử HTML nào.
Thay đổi nội dung và kiểu dáng của chúng.
Phản ứng lại các hành động của người dùng (như click chuột, gõ phím).
Thêm hoặc xóa các phần tử khỏi trang.

Chính khả năng thao tác với DOM đã mang lại sự sống động và tính tương tác cho các trang web hiện đại.

*DOM là gì? Định nghĩa Document Object Model*

Phân tích Cấu trúc cây DOM

Cách DOM tổ chức các phần tử trên trang web thường được gọi là Cấu trúc cây DOM (DOM Tree). Đây là một mô hình phân cấp trực quan, giúp chúng ta dễ dàng hình dung mối quan hệ giữa các thành phần.

Mô hình phân cấp: Cấu trúc cây DOM gồm những thành phần nào?

Mọi thứ trong một tài liệu HTML đều là một nút (Node) trong cây DOM. Cây này bắt đầu từ một nút gốc duy nhất và phân nhánh ra các nút con, cháu, giống như một cây gia phả.

Mối quan hệ cơ bản trong cây là quan hệ cha – con (parent – child). Ví dụ, thẻ <body> là con của thẻ <html>, và thẻ <h1> là con của thẻ <body>. Thẻ <h1> và một thẻ <p> cùng nằm trong <body> được gọi là các nút anh em (siblings).

Chi tiết về các loại DOM Node

Trong cây DOM, có nhiều loại Node khác nhau, nhưng 4 loại chính bạn cần biết là:

Document Node (Nút tài liệu): Đây là nút gốc của toàn bộ cây DOM, đại diện cho toàn bộ tài liệu.
Element Node (Nút phần tử): Mỗi thẻ HTML như <html>, <body>, <h1>, <div> đều là một Element Node. Đây là loại nút chúng ta tương tác nhiều nhất.
Text Node (Nút văn bản): Là nội dung văn bản thực tế nằm bên trong một Element Node. Ví dụ, trong <p>Xin chào</p>, chuỗi ‘Xin chào’ là một Text Node.
Attribute Node (Nút thuộc tính): Đại diện cho các thuộc tính của một thẻ HTML, ví dụ như class="title" hay id="main-content". Chúng không được coi là con của phần tử, mà là một phần của nó.

Sơ đồ minh họa mối quan hệ cha – con trong DOM

Để dễ hình dung, hãy xem xét đoạn mã HTML đơn giản sau:

<html>
  <head>
    <title>Trang Web của Tôi</title>
  </head>
  <body>
    <h1>Tiêu đề chính</h1>
    <p>Một đoạn văn bản.</p>
  </body>
</html>

Cấu trúc cây DOM tương ứng sẽ trông như sau:

Document
- <html> (con của Document)
  - <head> (con của <html>)
    - <title> (con của <head>)
      - Text Node: "Trang Web của Tôi"
  - <body> (con của <html>)
    - <h1> (con của <body>)
      - Text Node: "Tiêu đề chính"
    - <p> (con của <body>)
      - Text Node: "Một đoạn văn bản."

Nhìn vào sơ đồ này, bạn có thể thấy rõ ràng mối quan hệ phân cấp và cách mọi thứ được tổ chức một cách logic.

Phân biệt sự khác nhau giữa HTML và DOM

Nhiều người mới bắt đầu thường nhầm lẫn giữa HTML và DOM. Mặc dù chúng liên quan mật thiết, nhưng chúng là hai thứ hoàn toàn khác nhau. Việt Thắng sẽ giúp bạn phân biệt rõ ràng nhé.

HTML là bản thiết kế, DOM là mô hình sống

Bạn có thể hình dung thế này:

HTML (Source Code): Là bản thiết kế trên giấy của một ngôi nhà. Nó mô tả cấu trúc, các phòng, các cửa sổ. Nó tĩnh và không thay đổi.
DOM: Là ngôi nhà thực tế được xây dựng dựa trên bản thiết kế đó. Bạn có thể đi vào, sơn lại tường, di chuyển đồ đạc, thêm một chiếc đèn. DOM là một mô hình sống, có thể được thay đổi và cập nhật theo thời gian thực.

Khi bạn viết code JavaScript để thay đổi một tiêu đề, bạn đang thay đổi DOM, chứ không phải file HTML gốc trên máy chủ. Sự thay đổi này sẽ được hiển thị ngay lập tức trên trình duyệt của người dùng.

Các trường hợp hiển thị khác biệt giữa HTML và DOM

Đôi khi, những gì bạn thấy trong DOM (khi kiểm tra bằng Developer Tools của trình duyệt) lại khác với mã nguồn HTML ban đầu. Dưới đây là một vài lý do:

Sửa lỗi của trình duyệt: Nếu mã HTML của bạn bị lỗi (ví dụ thiếu thẻ đóng), trình duyệt sẽ cố gắng tự sửa lỗi đó khi nó xây dựng cây DOM. Kết quả là DOM sẽ là một phiên bản HTML hợp lệ, khác với file gốc bị lỗi.
Chỉnh sửa bằng JavaScript: Đây là trường hợp phổ biến nhất. Một đoạn mã JavaScript có thể đã chạy và thêm, xóa hoặc sửa đổi các phần tử. Ví dụ, một trang web hiển thị danh sách sản phẩm được tải từ API. Ban đầu HTML có thể chỉ có một thẻ <div> trống, nhưng sau khi JS chạy, DOM sẽ chứa đầy đủ các thẻ sản phẩm.

Việc hiểu rõ sự khác biệt này rất quan trọng. Nó giúp bạn biết mình đang tương tác với cái gì: bản thiết kế tĩnh (HTML) hay mô hình sống động (DOM).

*Phân biệt sự khác nhau giữa HTML và DOM*

Hướng dẫn thao tác với DOM trong JavaScript

JavaScript cung cấp một bộ công cụ mạnh mẽ gọi là DOM API để chúng ta có thể tương tác với cây DOM. Hãy cùng tìm hiểu các thao tác cơ bản và phổ biến nhất nhé.

Các phương thức truy xuất phần tử

Trước khi có thể thay đổi bất cứ điều gì, bạn cần phải ‘chọn’ được phần tử HTML đó. Dưới đây là các cách phổ biến:

document.getElementById('id-name'): Chọn một phần tử duy nhất dựa trên thuộc tính id của nó. Rất nhanh và hiệu quả.
document.getElementsByClassName('class-name'): Trả về một tập hợp (HTMLCollection) tất cả các phần tử có cùng class.
document.getElementsByTagName('tag-name'): Trả về một tập hợp tất cả các phần tử có cùng tên thẻ (ví dụ: ‘p’, ‘div’).
document.querySelector('selector'): Phương thức hiện đại và linh hoạt nhất. Nó sử dụng CSS selector để chọn phần tử đầu tiên khớp. Ví dụ: querySelector('#main .item').
document.querySelectorAll('selector'): Tương tự như trên nhưng trả về một danh sách (NodeList) tất cả các phần tử khớp.

Thay đổi nội dung (innerHTML, textContent) và thuộc tính (Attribute)

Sau khi đã chọn được phần tử, bạn có thể thay đổi nó:

Thay đổi nội dung:
- element.innerHTML = '<b>Nội dung mới</b>': Thay đổi toàn bộ HTML bên trong phần tử. Hãy cẩn thận vì nó có thể gây ra lỗ hổng bảo mật XSS nếu nội dung đến từ người dùng.
- element.textContent = 'Nội dung mới': Chỉ thay đổi nội dung văn bản, an toàn hơn vì nó sẽ không diễn giải bất kỳ thẻ HTML nào.
Thay đổi thuộc tính:
- element.setAttribute('src', 'new-image.jpg'): Thiết lập hoặc thay đổi giá trị của một thuộc tính.
- element.style.color = 'red': Truy cập và thay đổi trực tiếp các thuộc tính CSS.

Thêm, sửa và xóa phần tử (DOM Element) trong cây

Bạn hoàn toàn có thể thay đổi cấu trúc của trang:

Tạo phần tử mới: const newDiv = document.createElement('div');
Thêm nội dung cho nó: newDiv.textContent = 'Tôi là phần tử mới';
Thêm vào cây DOM: document.body.appendChild(newDiv); (Thêm newDiv làm con cuối cùng của thẻ <body>)
Xóa một phần tử: const oldDiv = document.getElementById('old-div'); oldDiv.remove(); (Cách hiện đại và đơn giản nhất).

Lắng nghe và xử lý sự kiện (DOM Events)

Đây là phần làm cho trang web có tính tương tác. Bạn có thể ‘lắng nghe’ các hành động của người dùng như click chuột, di chuột, gõ phím.

// Chọn nút bấm
const myButton = document.getElementById('my-button');

// Gắn một trình lắng nghe sự kiện 'click'
myButton.addEventListener('click', function() {
  alert('Bạn vừa nhấn nút!');
});

Khi người dùng click vào nút có id="my-button", một hộp thoại sẽ hiện ra. Đây chính là bản chất của DOM Events.

*Hướng dẫn thao tác với DOM trong JavaScript (DOM API)*

Các khái niệm DOM nâng cao

Khi bạn đã nắm vững những kiến thức cơ bản, lĩnh vực lập trình web còn có những khái niệm DOM nâng cao giúp tối ưu hiệu suất và cấu trúc mã nguồn. Việt Thắng sẽ giới thiệu ngắn gọn hai khái niệm nổi bật.

Shadow DOM là gì và ứng dụng của nó?

Shadow DOM là một công nghệ của trình duyệt cho phép đóng gói cấu trúc DOM và CSS. Bạn có thể nghĩ về nó như một ‘DOM con’ ẩn bên trong một phần tử của DOM chính.

Điểm đặc biệt của Shadow DOM là:

Đóng gói (Encapsulation): Mã HTML và CSS bên trong Shadow DOM không bị ảnh hưởng bởi mã bên ngoài, và ngược lại. Điều này giúp tránh xung đột về tên class hay các quy tắc CSS.
Tái sử dụng: Nó là nền tảng của Web Components, cho phép tạo ra các thành phần giao diện tùy chỉnh, độc lập và có thể tái sử dụng ở bất cứ đâu.

Ví dụ điển hình là thẻ <video> của HTML5. Các nút điều khiển như play, pause, thanh âm lượng thực chất là một Shadow DOM mà trình duyệt đã tạo sẵn cho bạn.

Virtual DOM là gì?

Không giống như Shadow DOM, Virtual DOM (DOM ảo) không phải là một tính năng của trình duyệt. Nó là một khái niệm lập trình được các thư viện và framework hiện đại như React hay Vue.js sử dụng để tăng hiệu suất.

Cách hoạt động của nó như sau:

Một bản sao nhẹ của DOM thật được lưu trong bộ nhớ, gọi là Virtual DOM.
Khi trạng thái ứng dụng thay đổi (ví dụ: người dùng nhập text vào ô input), một Virtual DOM mới sẽ được tạo ra.
Framework sẽ so sánh (diffing) Virtual DOM mới này với phiên bản cũ để tìm ra sự khác biệt nhỏ nhất.
Chỉ những thay đổi đó mới được cập nhật vào DOM thật của trình duyệt.

Quá trình này nhanh hơn rất nhiều so với việc vẽ lại toàn bộ một phần lớn của DOM thật mỗi khi có thay đổi nhỏ. Nó giúp các ứng dụng phức tạp chạy mượt mà và hiệu quả hơn.

Lời kết

Qua bài viết này, Việt Thắng hy vọng bạn đã có một cái nhìn toàn diện và rõ ràng về DOM là gì. Hiểu về Document Object Model là một kỹ năng nền tảng không thể thiếu đối với bất kỳ lập trình viên web nào. Nó là chìa khóa để mở ra sức mạnh của JavaScript, cho phép bạn xây dựng các trang web không chỉ đẹp về giao diện mà còn phong phú về tương tác.

Hãy nhớ rằng, DOM chính là cầu nối, là mô hình sống của trang web. Nắm vững cách truy xuất, thay đổi và lắng nghe sự kiện trên DOM sẽ giúp bạn tự tin hơn rất nhiều trên con đường lập trình của mình.

Bạn có thấy khái niệm nào về DOM còn khó hiểu không? Hãy chia sẻ thắc mắc của bạn bên dưới phần bình luận nhé!

Nếu bạn đang tìm kiếm một đối tác để thiết kế website chuyên nghiệp, tối ưu và thân thiện với người dùng, Việt Thắng luôn sẵn sàng đồng hành. Liên hệ với chúng tôi để được tư vấn ngay hôm nay!