DOM là gì? Toàn bộ kiến thức DOM cho người mới bắt đầu
Lê Đình Đài
DOM là gì? Toàn bộ kiến thức DOM cho người mới bắt đầu
DOM (Document Object Model) là mô hình đối tượng tài liệu, dùng để biểu diễn toàn bộ nội dung của một trang web dưới dạng cấu trúc cây các đối tượng. Nhờ DOM, trình duyệt và JavaScript có thể hiểu, truy cập và thao tác với từng thành phần trong trang HTML một cách linh hoạt. Khi học lập trình web, chắc chắn bạn sẽ gặp thuật ngữ DOM rất sớm, đặc biệt khi làm việc với JavaScript. DOM chính là "cầu nối" giúp JavaScript có thể đọc, thay đổi và tương tác với nội dung HTML trên trình duyệt. Trong bài viết này, bạn sẽ cùng DinhDai.Tech tìm hiểu DOM là gì, HTML DOM, cấu trúc cây DOM, nhiệm vụ và phân loại DOM, cũng như cách JavaScript thao tác DOM một cách dễ hiểu, phù hợp cho người mới bắt đầu.
I. DOM là gì?
1. Khái niệm DOM (Document Object Model)
DOM là viết tắt của Document Object Model – mô hình đối tượng tài liệu. Hiểu một cách đơn giản, DOM là cách trình duyệt biểu diễn trang HTML dưới dạng một cấu trúc dữ liệu hình cây, trong đó mỗi thành phần trên trang web đều được coi là một đối tượng (object).
Cụ thể:
- Mỗi thẻ HTML (như
<div>,<p>,<img>,<a>…) là một node - Mỗi thuộc tính (class, id, src, href…) cũng là một phần của node
- Nội dung văn bản bên trong thẻ được xem là text node
Nhờ mô hình DOM, JavaScript không làm việc trực tiếp với file HTML gốc, mà tương tác với phiên bản HTML đã được trình duyệt chuyển đổi thành các đối tượng trong bộ nhớ. Điều này giúp JavaScript có thể:
- Thay đổi nội dung văn bản
- Thêm, xóa hoặc chỉnh sửa thẻ HTML
- Thay đổi giao diện thông qua CSS
- Xử lý tương tác người dùng theo thời gian thực
2. Cách DOM hoạt động
Để sử dụng DOM hiệu quả trong JavaScript, trước hết bạn cần hiểu DOM được tạo ra và vận hành như thế nào trong trình duyệt. Khi một trang web được tải, trình duyệt không hiển thị ngay lập tức nội dung HTML, mà phải trải qua một chuỗi các bước xử lý để chuyển mã nguồn HTML thành giao diện mà người dùng nhìn thấy.
Quá trình này giúp DOM trở thành cầu nối trung gian giữa HTML (mã nguồn tĩnh do lập trình viên viết) và JavaScript (ngôn ngữ thao tác động với giao diện). Về cơ bản, cách DOM hoạt động trong trình duyệt có thể được chia thành ba giai đoạn chính dưới đây.
Trình duyệt phân tích mã HTML
Khi người dùng truy cập vào một trang web, trình duyệt sẽ gửi yêu cầu đến máy chủ và nhận về file HTML. Sau đó, trình duyệt bắt đầu phân tích cú pháp (parsing) mã HTML từ trên xuống dưới, theo đúng thứ tự các thẻ xuất hiện trong tài liệu.
Trong quá trình phân tích:
- Trình duyệt đọc từng thẻ HTML một
- Kiểm tra cấu trúc thẻ mở – thẻ đóng
- Xác định mối quan hệ lồng nhau giữa các phần tử
Ở giai đoạn này, HTML chỉ mới được đọc và hiểu về mặt cấu trúc, chưa được biểu diễn thành giao diện hoàn chỉnh. Đây là bước tiền đề để trình duyệt có thể tạo ra mô hình DOM ở bước tiếp theo.
Chuyển HTML thành mô hình DOM
Sau khi quá trình phân tích mã HTML hoàn tất, trình duyệt sẽ chuyển toàn bộ nội dung HTML thành mô hình DOM (Document Object Model) dưới dạng một cấu trúc cây gọi là DOM Tree.
Trong cây DOM:
- Thẻ
<html>đóng vai trò là node gốc - Bên trong là hai node con
<head>và<body> - Các thẻ khác tiếp tục được phân cấp theo quan hệ cha – con
- Mỗi thẻ, thuộc tính và nội dung văn bản đều được biểu diễn thành các node riêng biệt
Mô hình DOM này phản ánh chính xác cấu trúc của trang web tại thời điểm đó, giúp JavaScript có thể truy cập và thao tác từng phần tử một cách linh hoạt. Từ đây, JavaScript không còn làm việc với chuỗi HTML, mà làm việc với các đối tượng DOM trong bộ nhớ.
DOM tồn tại và được cập nhật động
Sau khi được tạo ra, cây DOM sẽ được lưu trong bộ nhớ của trình duyệt và tồn tại trong suốt vòng đời của trang web. Trong quá trình người dùng tương tác, DOM không cố định mà có thể thay đổi liên tục.
Các thay đổi này có thể đến từ:
- JavaScript thêm hoặc xóa phần tử HTML
- Chỉnh sửa nội dung văn bản
- Thay đổi class, id, style để cập nhật giao diện
- Phản hồi các sự kiện như click, nhập liệu, cuộn trang
Mỗi khi DOM bị thay đổi, trình duyệt sẽ tự động render lại giao diện, giúp người dùng nhìn thấy sự cập nhật ngay lập tức mà không cần tải lại trang. Đây chính là nền tảng tạo nên các website tương tác, ứng dụng web động và các framework hiện đại ngày nay.
3. Sự khác nhau giữa HTML và DOM
Một trong những lỗi phổ biến nhất của người mới học lập trình web là nhầm lẫn giữa HTML và DOM. Mặc dù hai khái niệm này có mối quan hệ chặt chẽ với nhau, nhưng chúng không giống nhau về bản chất, cách tồn tại và vai trò trong trình duyệt. Việc hiểu rõ sự khác nhau giữa HTML và DOM sẽ giúp bạn nắm đúng cách JavaScript tương tác với trang web.
| HTML | DOM |
|---|---|
| Là mã nguồn tĩnh của trang web | Là mô hình động trong trình duyệt |
| Do lập trình viên viết | Do trình duyệt tạo ra |
| Tồn tại dưới dạng file .html | Tồn tại trong bộ nhớ |
| Không tự thay đổi | Có thể thay đổi bằng JavaScript |
| Mô tả cấu trúc ban đầu | Phản ánh trạng thái hiện tại |
Có thể hiểu mối quan hệ này một cách trực quan: HTML giống như bản thiết kế, còn DOM là phiên bản đang hoạt động của trang web trong trình duyệt. HTML chỉ đóng vai trò là dữ liệu đầu vào, còn DOM mới là đối tượng mà trình duyệt hiển thị và JavaScript tương tác.
Khi người dùng tải lại trang, toàn bộ cây DOM hiện tại sẽ bị hủy và trình duyệt sẽ tạo lại một cây DOM mới dựa trên file HTML ban đầu. Điều này lý giải vì sao mọi thay đổi bạn thực hiện bằng JavaScript sẽ không được lưu lại sau khi reload, trừ khi có thêm cơ chế lưu trữ như database hoặc localStorage.
Việc phân biệt rõ HTML và DOM giúp bạn:
- Hiểu đúng bản chất của các thao tác DOM trong JavaScript
- Tránh nhầm lẫn giữa mã nguồn và giao diện đang hiển thị
- Dễ dàng tiếp cận các framework frontend hiện đại như React, Vue hay Angular
- Đây là kiến thức nền tảng, nếu hiểu sai sẽ rất khó học sâu hơn ở các phần tiếp theo.
II. HTML DOM và cấu trúc cây DOM
Trong phần này, hãy cùng DinhDai.Tech lần lượt tìm hiểu HTML DOM là gì, cấu trúc cây DOM hoạt động ra sao, các loại node phổ biến và sự khác nhau giữa Node và DOM Element.
1. HTML DOM là gì?
HTML DOM là mô hình DOM được trình duyệt tạo ra từ tài liệu HTML. Nói cách khác, HTML DOM chính là cách trình duyệt biểu diễn trang HTML dưới dạng các đối tượng để JavaScript có thể truy cập và thao tác.
Thông qua HTML DOM, JavaScript có thể thực hiện nhiều tác vụ quan trọng như:
- Truy cập và lấy các phần tử HTML (theo id, class, tag…)
- Thay đổi nội dung văn bản, thuộc tính và kiểu dáng CSS
- Thêm, xóa hoặc chỉnh sửa các phần tử HTML
- Bắt và xử lý các sự kiện người dùng như click, nhập liệu, di chuột
Mối quan hệ giữa HTML và DOM
Mối quan hệ giữa HTML và DOM có thể hiểu đơn giản như sau:
- HTML là dữ liệu đầu vào do lập trình viên viết
- DOM là kết quả mà trình duyệt tạo ra từ HTML để JavaScript thao tác
HTML DOM đại diện cho toàn bộ tài liệu HTML trong trình duyệt. Mỗi thành phần trên trang web đều được biểu diễn dưới dạng một đối tượng và được liên kết với nhau theo quan hệ cha – con, tạo thành một hệ thống có tổ chức rõ ràng.
HTML DOM đại diện cho tài liệu HTML
HTML DOM đại diện cho toàn bộ tài liệu HTML khi trang web đang được mở trong trình duyệt. Tại thời điểm này, mỗi thành phần trên trang web như thẻ HTML, thuộc tính và nội dung văn bản đều được biểu diễn dưới dạng các đối tượng (node) trong cây DOM. Các node này được liên kết với nhau theo quan hệ cha – con, tạo thành một hệ thống có cấu trúc rõ ràng, giúp trình duyệt và JavaScript dễ dàng quản lý cũng như thao tác.
Ví dụ HTML DOM đơn giản
Trong một trang HTML:
- Thẻ
<html>là node gốc - Bên trong
<html>là<head>và<body> - Trong
<body>lại chứa các thẻ như<div>,<p>,<img>…
Tất cả tạo thành một cấu trúc phân nhánh gọi là HTML DOM.
2. Cây cấu trúc DOM là gì?
DOM không tồn tại dưới dạng các phần tử rời rạc, mà được tổ chức theo một cấu trúc phân cấp chặt chẽ, gọi là cây DOM (DOM Tree). Đây là cách trình duyệt sắp xếp và quản lý toàn bộ các thành phần của trang web, giúp JavaScript có thể truy cập và thao tác chính xác từng phần tử.
Nhờ cấu trúc cây này, mỗi phần tử trong trang web đều có vị trí rõ ràng, biết mình nằm ở đâu, thuộc phần nào và có mối quan hệ ra sao với các phần tử khác.
Khái niệm cây DOM
Cây DOM là cách biểu diễn các phần tử HTML theo thứ bậc và mối quan hệ phân nhánh, tương tự như cấu trúc của một cây gia phả. Trong đó, mỗi node có thể chứa một hoặc nhiều node con, và các node được liên kết với nhau theo quan hệ cha – con.
Chính nhờ cấu trúc này mà JavaScript có thể dễ dàng xác định:
- Một phần tử nằm trong phần nào của trang
- Nó có bao nhiêu phần tử con
- Quan hệ của nó với các phần tử xung quanh
Cây DOM vì vậy đóng vai trò nền tảng cho mọi thao tác duyệt, tìm kiếm và chỉnh sửa phần tử trên trang web.
Thứ bậc các phần tử trong DOM
Trong cây DOM, các node được sắp xếp theo những cấp bậc rõ ràng. Ở cấp cao nhất là node gốc (root node), đại diện cho toàn bộ tài liệu HTML. Từ node gốc, các node khác được phân nhánh thành node cha (parent node) và node con (child node).
Ngoài ra, những node có cùng một node cha và nằm cùng cấp được gọi là node anh em (sibling node). Cách tổ chức này giúp xác định chính xác mối quan hệ giữa các phần tử và là cơ sở để JavaScript di chuyển linh hoạt trong cây DOM khi thao tác dữ liệu hoặc giao diện.
3. Node (Nút) trong DOM
DOM được cấu thành từ nhiều node (nút) khác nhau, trong đó mỗi node đại diện cho một thành phần cụ thể của tài liệu HTML. Việc hiểu rõ các loại node giúp bạn thao tác DOM chính xác hơn và tránh những nhầm lẫn thường gặp, đặc biệt là trong các trường hợp JavaScript trả về kết quả không đúng như mong đợi.
Document Node
Document Node là node đại diện cho toàn bộ tài liệu HTML và nằm ở vị trí cao nhất trong cây DOM. Đây là điểm khởi đầu cho mọi thao tác DOM bằng JavaScript. Thông qua document node, JavaScript có thể truy cập đến tất cả các phần tử khác trong trang web, chẳng hạn như lấy thẻ HTML, tìm kiếm phần tử con hoặc lắng nghe các sự kiện toàn cục. Nói cách khác, document node đóng vai trò như "cổng vào" của cây DOM.
Element Node
Element Node là node đại diện cho các thẻ HTML như <div>, <p>, <a>, <img> hay <button>. Đây là loại node được sử dụng nhiều nhất khi làm việc với DOM, vì chúng trực tiếp ảnh hưởng đến cấu trúc và giao diện của trang web. Khi bạn thay đổi nội dung, gán class, chỉnh style hoặc gắn sự kiện click, đối tượng mà JavaScript thao tác chủ yếu chính là các element node.
Attribute Node
Attribute Node đại diện cho các thuộc tính của thẻ HTML như id, class, src, href. Những thuộc tính này giúp mô tả đặc điểm và hành vi của element node. Trong quá trình thao tác DOM, JavaScript thường đọc hoặc thay đổi giá trị của các thuộc tính để cập nhật giao diện, điều khiển logic hoặc phục vụ việc xử lý sự kiện. Attribute node vì thế đóng vai trò bổ trợ quan trọng cho element node.
Text Node
Text Node đại diện cho nội dung văn bản nằm bên trong các thẻ HTML. Khi bạn thay đổi chữ hiển thị trên trang, chẳng hạn như cập nhật tiêu đề hoặc nội dung đoạn văn, thực chất JavaScript đang thao tác với text node chứ không phải trực tiếp với thẻ HTML. Việc hiểu rõ sự tồn tại của text node giúp bạn tránh nhầm lẫn khi truy cập hoặc chỉnh sửa nội dung văn bản trong DOM.
Việc phân biệt rõ Document Node, Element Node, Attribute Node và Text Node sẽ giúp bạn hiểu sâu hơn cách DOM hoạt động, từ đó thao tác DOM bằng JavaScript một cách chính xác và hiệu quả hơn trong các phần tiếp theo.
4. Quan hệ giữa các Node trong DOM
Trong DOM, các node không tồn tại riêng lẻ, mà được liên kết với nhau theo một hệ thống phân cấp chặt chẽ. Cấu trúc này phản ánh đúng cách các thẻ HTML được lồng vào nhau trong mã nguồn và giúp JavaScript dễ dàng xác định vị trí cũng như mối liên hệ giữa các phần tử trên trang web. Việc hiểu rõ các mối quan hệ giữa node là nền tảng quan trọng để thao tác DOM hiệu quả.
Parent Node (Node cha)
Parent node là node đóng vai trò bao bọc và chứa các node khác bên trong nó. Một node cha có thể chứa một hoặc nhiều node con, tùy vào cách các thẻ HTML được lồng vào nhau. Trong quá trình thao tác DOM, việc xác định parent node giúp JavaScript hiểu được bối cảnh của một phần tử, chẳng hạn như nó thuộc khu vực nào trên trang hoặc nằm trong nhóm nội dung nào. Điều này đặc biệt hữu ích khi bạn cần thao tác nhiều phần tử có cùng cấu trúc hoặc cùng khu vực hiển thị.
Child Node (Node con)
Child node là node nằm bên trong một parent node và chịu sự quản lý trực tiếp của node cha đó. Mỗi node con đều có vị trí xác định trong cây DOM và có thể là element node, text node hoặc các loại node khác. Khi làm việc với DOM, JavaScript thường duyệt qua các child node để xử lý danh sách phần tử, cập nhật nội dung động hoặc gắn sự kiện cho từng thành phần cụ thể. Việc hiểu rõ child node giúp bạn thao tác DOM chính xác hơn và tránh bỏ sót các phần tử cần xử lý.
Sibling Node (Node anh em)
Sibling node là các node có cùng một parent node và nằm ở cùng một cấp trong cây DOM. Các node anh em thường xuất hiện trong những cấu trúc như danh sách, menu hoặc các nhóm phần tử có cùng chức năng. Nhờ mối quan hệ sibling, JavaScript có thể di chuyển qua lại giữa các phần tử ngang hàng mà không cần quay lại node cha hay node gốc. Điều này giúp code ngắn gọn hơn và tăng hiệu quả khi xử lý các nhóm phần tử giống nhau.
5. DOM Element là gì?
DOM Element là loại node đại diện cho các thẻ HTML trong cây DOM và là đối tượng được sử dụng nhiều nhất khi làm việc với JavaScript. Hầu hết các thao tác liên quan đến giao diện, nội dung và tương tác người dùng đều xoay quanh DOM Element.
Khái niệm DOM Element
Mỗi thẻ HTML trong tài liệu, chẳng hạn như <div>, <p>, <button> hay <img>, đều được trình duyệt chuyển thành một DOM Element tương ứng. Khi JavaScript thay đổi nội dung hiển thị, gán class, chỉnh style hoặc lắng nghe sự kiện click, đối tượng được thao tác chính là các DOM Element này. Vì vậy, DOM Element đóng vai trò trung tâm trong việc xây dựng giao diện động cho trang web.
Phân biệt Node và Element
Node là một khái niệm tổng quát, bao gồm nhiều loại khác nhau như document node, element node, attribute node và text node. Trong khi đó, element chỉ là một loại node cụ thể, đại diện cho thẻ HTML. Sự khác biệt này giải thích vì sao không phải node nào cũng có thể gán style hoặc thuộc tính HTML. Ví dụ, text node chỉ chứa nội dung văn bản nên không thể áp dụng CSS hay gắn sự kiện trực tiếp như element node.
Ví dụ về DOM Element
Các thẻ HTML như <div>, <p>, <img> hay <button> đều là DOM Element trong cây DOM. JavaScript có thể truy cập các element này để chỉnh sửa nội dung, thay đổi thuộc tính, cập nhật giao diện và gắn các sự kiện tương tác với người dùng như click, hover hoặc nhập liệu. Đây chính là nền tảng để xây dựng các trang web tương tác và ứng dụng web hiện đại.
III. Nhiệm vụ của DOM trong JavaScript
Bên cạnh đó, mọi hành động của người dùng như nhấp chuột, nhập dữ liệu, di chuyển chuột hay cuộn trang đều được JavaScript xử lý thông qua DOM bằng cơ chế lắng nghe và xử lý sự kiện. Ngoài ra, DOM còn hỗ trợ tạo mới hoặc xoá bỏ các phần tử HTML một cách động, góp phần xây dựng các giao diện tương tác và thân thiện với người dùng. Nhờ đảm nhiệm những nhiệm vụ này, DOM trở thành cầu nối quan trọng giữa JavaScript và giao diện người dùng, mở đường cho các nội dung chi tiết hơn ở các phần tiếp theo.
1. DOM – Cầu nối giữa HTML, CSS và JavaScript
DOM đóng vai trò như một cầu nối trung gian giúp JavaScript có thể làm việc trực tiếp với cả nội dung HTML và giao diện CSS của trang web. Thông qua DOM, JavaScript không chỉ đọc được cấu trúc và dữ liệu đang hiển thị mà còn có thể thay đổi chúng ngay trong quá trình người dùng sử dụng website. Ví dụ, khi người dùng nhấn vào một nút "Xem thêm", JavaScript có thể truy cập phần nội dung đang bị ẩn trong HTML và hiển thị nó ra mà không cần tải lại trang. Khả năng này giúp trang web phản hồi nhanh hơn và tạo cảm giác mượt mà, liên tục cho người dùng.
Cụ thể, thông qua DOM, JavaScript có thể:
- Đọc nội dung HTML: Truy cập các thẻ, thuộc tính và văn bản để lấy dữ liệu hiển thị trên trang.
- Thay đổi và kiểm soát CSS: Thêm, xóa hoặc chỉnh sửa class, style để cập nhật giao diện theo thời gian thực.
- Phản hồi hành động người dùng: Kết hợp DOM và JavaScript để tạo ra các phản hồi ngay lập tức khi người dùng tương tác.
Nhờ có DOM, HTML không còn là nội dung tĩnh và CSS không chỉ dùng để tạo giao diện cố định, mà cả hai đều trở nên linh hoạt và có thể thay đổi trong quá trình người dùng sử dụng website.
2. Thao tác và kiểm soát nội dung trang web
Một trong những nhiệm vụ quan trọng nhất của DOM là cho phép JavaScript thao tác trực tiếp với nội dung và cấu trúc trang web mà không cần tải lại trang.
DOM cho phép JavaScript thực hiện các công việc như:
- Cập nhật nội dung văn bản theo thời gian thực: JavaScript có thể thay đổi tiêu đề, đoạn văn hoặc thông báo ngay sau khi người dùng nhập dữ liệu hoặc gửi biểu mẫu. Ví dụ, khi người dùng gửi bình luận, nội dung mới được hiển thị ngay trên trang mà không cần reload, giúp trải nghiệm liền mạch và nhanh chóng hơn.
- Thêm hoặc xoá phần tử HTML một cách động: DOM cho phép tạo mới hoặc loại bỏ các thẻ HTML trong lúc trang đang chạy. Chẳng hạn, khi mở một menu xổ xuống hoặc thêm một sản phẩm vào giỏ hàng, các phần tử liên quan sẽ xuất hiện hoặc biến mất ngay lập tức mà không làm gián đoạn quá trình sử dụng.
- Ẩn/hiện và tổ chức lại các thành phần giao diện: JavaScript có thể dùng DOM để hiển thị popup, chuyển đổi tab nội dung hoặc sắp xếp lại danh sách dữ liệu theo lựa chọn của người dùng. Nhờ đó, giao diện trở nên linh hoạt và thích ứng tốt hơn với từng tình huống sử dụng.
Nhờ khả năng thao tác trực tiếp này, website không còn là những trang tĩnh phải tải lại liên tục, mà trở thành các ứng dụng web động, phản hồi nhanh và mang lại trải nghiệm thân thiện hơn cho người dùng.
3. Xử lý sự kiện người dùng
DOM là nền tảng để JavaScript bắt và xử lý các sự kiện (event) phát sinh từ hành động của người dùng.
Thông qua DOM, JavaScript có thể:
- Bắt các sự kiện phổ biến: Như click, submit, input, scroll, mouseover…
- Xử lý logic tương tác: Kiểm tra dữ liệu nhập vào form, hiển thị thông báo lỗi, xác nhận hành động người dùng.
- Xây dựng trải nghiệm người dùng (UX) mượt mà: Phản hồi tức thì mà không cần tải lại trang, giúp website hoạt động giống như ứng dụng.
Chính khả năng xử lý sự kiện thông qua DOM đã biến JavaScript trở thành ngôn ngữ cốt lõi trong việc xây dựng các website và web app hiện đại.
DOM là nền tảng giúp JavaScript kết nối HTML và CSS, kiểm soát nội dung trang web và xử lý mọi tương tác của người dùng. Nếu không có DOM, JavaScript gần như không thể can thiệp vào giao diện và hành vi của trang web. Hiểu rõ nhiệm vụ của DOM sẽ giúp bạn viết JavaScript hiệu quả hơn và dễ dàng tiếp cận các framework hiện đại như React, Vue hay Angular.
IV. Phân loại DOM trong JavaScript
Ngoài các loại DOM cơ bản trên, trong phát triển web hiện đại còn xuất hiện những khái niệm như Virtual DOM và một số biến thể DOM khác. Tuy nhiên, đây không phải là các phân loại DOM theo chuẩn chính thức của trình duyệt mà là những mô hình hoặc cơ chế trừu tượng do các thư viện và framework xây dựng nhằm tối ưu hiệu năng và cách quản lý giao diện.
1. Core DOM
Trước khi tìm hiểu các loại DOM chuyên biệt cho HTML hay XML, bạn cần nắm được Core DOM – nền tảng cốt lõi của toàn bộ mô hình DOM. Đây là phần giúp bạn hiểu bản chất cách trình duyệt tổ chức tài liệu dưới dạng các node và mối quan hệ giữa chúng.
Khái niệm Core DOM
Core DOM là nền tảng cơ bản nhất của DOM, áp dụng cho mọi loại tài liệu, bao gồm HTML, XML và các dạng tài liệu khác. Đây là tập hợp các khái niệm và đối tượng cốt lõi mà tất cả các loại DOM khác đều được xây dựng dựa trên.
Core DOM không phụ thuộc vào ngôn ngữ đánh dấu cụ thể, mà tập trung vào cách biểu diễn tài liệu dưới dạng các node và mối quan hệ giữa chúng.
Đối tượng và phương thức cơ bản trong Core DOM
Core DOM cung cấp các đối tượng nền tảng như:
- Document: đại diện cho toàn bộ tài liệu
- Node: đối tượng gốc cho tất cả các loại node
- Element: đại diện cho các phần tử trong tài liệu
Thông qua Core DOM, JavaScript có thể:
- Duyệt cây DOM
- Truy cập node cha, node con, node anh em
- Tạo, xóa và thao tác node một cách tổng quát
Core DOM là "bộ khung" của DOM. Khi hiểu vững Core DOM, bạn sẽ dễ dàng tiếp cận và sử dụng các loại DOM nâng cao hơn như HTML DOM hay XML DOM mà không bị rối về khái niệm.
2. HTML DOM
Dựa trên nền tảng Core DOM, HTML DOM được phát triển riêng để phục vụ việc thao tác với tài liệu HTML. Đây cũng chính là loại DOM mà bạn sẽ sử dụng thường xuyên nhất khi lập trình web với JavaScript.
Đối tượng HTML Element
HTML DOM là phần mở rộng của Core DOM, được thiết kế riêng cho tài liệu HTML. Đây cũng là loại DOM được sử dụng nhiều nhất trong lập trình web front-end.
Trong HTML DOM:
- Mỗi thẻ HTML tương ứng với một HTML Element
- Các phần tử HTML có thêm nhiều thuộc tính và phương thức đặc thù
Thuộc tính và phương thức dành cho HTML
HTML DOM cung cấp các thuộc tính và phương thức giúp thao tác trực tiếp với nội dung và giao diện trang web, ví dụ:
- innerHTML, textContent để thay đổi nội dung
- className, classList để quản lý class CSS
- style để chỉnh sửa giao diện
- Các phương thức xử lý sự kiện như onclick, addEventListener
HTML DOM giúp JavaScript can thiệp trực tiếp vào nội dung và giao diện trang web, từ đó có thể dễ dàng tạo ra các trang web động, phản hồi nhanh và thân thiện với người dùng.. Hầu hết các thao tác DOM trong thực tế đều xoay quanh HTML DOM.
3. XML DOM
Bên cạnh HTML, JavaScript cũng có thể làm việc với các tài liệu dữ liệu có cấu trúc khác, trong đó phổ biến nhất là XML. XML DOM ra đời để đáp ứng nhu cầu xử lý loại tài liệu này.
DOM cho tài liệu XML
XML DOM là mô hình DOM được sử dụng cho các tài liệu XML. Giống như HTML DOM, XML DOM cũng biểu diễn tài liệu dưới dạng cây node, nhưng không gắn với các thẻ HTML cố định.
XML DOM cho phép JavaScript:
- Truy cập và đọc dữ liệu XML
- Thêm, sửa hoặc xóa các node trong tài liệu XML
- Xử lý dữ liệu có cấu trúc chặt chẽ
Ứng dụng của XML DOM
XML DOM thường được sử dụng trong:
- Trao đổi dữ liệu giữa các hệ thống
- Đọc và xử lý các file cấu hình
- Một số hệ thống cũ hoặc API sử dụng XML thay vì JSON
Mặc dù không còn phổ biến như trước trong phát triển web hiện đại, XML DOM vẫn giữ vai trò quan trọng trong nhiều hệ thống lớn. Việc hiểu XML DOM giúp bạn mở rộng khả năng xử lý dữ liệu và làm việc với các hệ thống đa dạng hơn.
Mỗi loại DOM trong JavaScript đều có vai trò và phạm vi sử dụng riêng. Core DOM cung cấp nền tảng chung, HTML DOM phục vụ trực tiếp cho phát triển website, còn XML DOM hỗ trợ xử lý dữ liệu XML. Hiểu rõ sự phân loại này giúp bạn tiếp cận DOM một cách bài bản và dễ dàng mở rộng kiến thức khi làm việc với các công nghệ web nâng cao.
V. DOM trong JavaScript và cách thao tác
1. Vai trò của DOM trong JavaScript
DOM chính là điểm tiếp xúc duy nhất để JavaScript có thể can thiệp vào nội dung và giao diện của trang web. Mọi thay đổi trên trình duyệt đều được thực hiện thông qua DOM.
JavaScript truy cập DOM như thế nào?
JavaScript truy cập DOM thông qua đối tượng toàn cục document. Đối tượng này đại diện cho toàn bộ tài liệu HTML và là "cửa ngõ" để JavaScript làm việc với các phần tử trong trang.
Thông qua document, JavaScript có thể:
- Truy xuất các phần tử HTML
- Tạo hoặc xóa phần tử mới
- Thay đổi nội dung và giao diện
Thay đổi nội dung HTML bằng DOM
DOM cho phép JavaScript thay đổi nội dung hiển thị mà không cần tải lại trang, ví dụ:
- Cập nhật văn bản trong tiêu đề hoặc đoạn văn
- Thay đổi hình ảnh hiển thị
- Hiển thị thông báo động theo dữ liệu mới
Nhờ đó, nội dung trang web có thể thay đổi linh hoạt theo hành động của người dùng hoặc dữ liệu từ hệ thống.
Thay đổi CSS thông qua DOM
Không chỉ nội dung, DOM còn cho phép JavaScript:
- Thay đổi màu sắc, kích thước, bố cục
- Ẩn hoặc hiển thị phần tử
- Thêm hoặc xóa class CSS để điều chỉnh giao diện
Điều này giúp xây dựng các hiệu ứng giao diện và cải thiện trải nghiệm người dùng một cách rõ rệt.
2. Các thao tác DOM phổ biến
Trong quá trình lập trình web, JavaScript thường xuyên phải tương tác với DOM để cập nhật nội dung và giao diện theo hành động của người dùng. Những thao tác DOM này xuất hiện ở hầu hết các website hiện đại, từ các trang tĩnh đơn giản cho đến các ứng dụng web phức tạp. Việc nắm vững các thao tác DOM phổ biến sẽ giúp bạn xây dựng được các trang web có khả năng phản hồi nhanh, linh hoạt và thân thiện với người dùng.
Thay đổi nội dung và thuộc tính
Một trong những thao tác DOM phổ biến nhất là thay đổi nội dung và thuộc tính của phần tử HTML. Thông qua DOM, JavaScript có thể cập nhật trực tiếp nội dung văn bản hiển thị trên trang, chẳng hạn như thay đổi tiêu đề, nội dung đoạn văn hoặc thông báo cho người dùng.
Ngoài ra, JavaScript còn có thể thay đổi các thuộc tính của phần tử, ví dụ như:
- Thuộc tính src của hình ảnh để hiển thị ảnh khác
- Thuộc tính href của liên kết để điều hướng đến trang mới
- Giá trị của các thẻ input trong form khi người dùng nhập dữ liệu
Những thao tác này giúp website phản hồi ngay lập tức với dữ liệu mới hoặc hành động của người dùng mà không cần tải lại trang, từ đó nâng cao trải nghiệm sử dụng.
Thêm, sửa, xóa phần tử DOM
Bên cạnh việc thay đổi nội dung sẵn có, DOM còn cho phép JavaScript tạo mới, chỉnh sửa và loại bỏ các phần tử HTML trong quá trình trang web đang hoạt động. JavaScript có thể tạo ra các phần tử mới bằng phương thức createElement, sau đó chèn chúng vào trang thông qua các phương thức như appendChild.
Ngược lại, những phần tử không còn cần thiết cũng có thể được xóa khỏi DOM để làm gọn giao diện hoặc cập nhật dữ liệu mới. Nhờ khả năng này, các thành phần như danh sách, bảng dữ liệu, bình luận hoặc nội dung tải động có thể được tạo và quản lý hoàn toàn bằng JavaScript, thay vì phải viết sẵn trong HTML.
DOM Manipulation là gì?
DOM Manipulation là thuật ngữ dùng để chỉ toàn bộ quá trình JavaScript thay đổi cấu trúc, nội dung hoặc giao diện của DOM. Điều này bao gồm việc chỉnh sửa văn bản, thay đổi thuộc tính, thêm hoặc xóa phần tử, cũng như cập nhật style và xử lý sự kiện người dùng.
DOM Manipulation được xem là kỹ năng cốt lõi trong phát triển front-end, bởi hầu hết các website tương tác đều dựa trên cơ chế này. Không chỉ vậy, đây còn là nền tảng cho các framework và thư viện hiện đại như React, Vue hay Angular, vốn được xây dựng nhằm tối ưu và quản lý việc thao tác DOM một cách hiệu quả hơn.
3. Thuộc tính và phương thức thường gặp trong DOM
Khi thao tác với DOM, bạn sẽ thường xuyên làm việc với các thuộc tính và phương thức cơ bản để truy cập và thay đổi nội dung trên trang web. Việc hiểu rõ công dụng của từng thuộc tính và phương thức giúp bạn thao tác DOM chính xác, an toàn và hiệu quả hơn.
Thuộc tính DOM phổ biến
Một số thuộc tính thường gặp bao gồm:
- innerHTML: dùng để lấy hoặc thay đổi toàn bộ nội dung HTML bên trong một phần tử, bao gồm cả thẻ con. Thuộc tính này thường dùng khi cần chèn nhanh một đoạn HTML mới vào trang.
- textContent: dùng để lấy hoặc thay đổi nội dung văn bản thuần của phần tử, không bao gồm thẻ HTML. Thuộc tính này an toàn hơn khi chỉ cần hiển thị chữ.
- classList: cho phép thêm, xoá hoặc kiểm tra các class CSS của phần tử, rất hữu ích khi thay đổi giao diện theo trạng thái.
- style: dùng để chỉnh sửa trực tiếp các thuộc tính CSS của phần tử như màu sắc, kích thước, ẩn/hiện,…
Ví dụ, để thay đổi nội dung văn bản của một tiêu đề, ta có thể viết:
const title = document.getElementById("title");
title.textContent = "Nội dung mới";
Phương thức DOM phổ biến
DOM cung cấp nhiều phương thức để truy xuất và thao tác phần tử, chẳng hạn:
- getElementById(): chọn một phần tử dựa trên giá trị id, thường dùng khi cần truy cập nhanh một phần tử cụ thể.
- getElementsByClassName(): chọn danh sách các phần tử có cùng class.
- querySelector(): chọn phần tử đầu tiên khớp với bộ chọn CSS.
- querySelectorAll(): chọn tất cả các phần tử khớp với bộ chọn CSS.
Ví dụ, để lấy một phần tử theo id và thay đổi nội dung của nó:
const message = document.getElementById("message");
message.textContent = "Chào mừng bạn đến với website!";
Nhờ các thuộc tính và phương thức này, JavaScript có thể xác định chính xác phần tử cần thao tác và cập nhật nội dung, giao diện của trang web một cách linh hoạt theo từng tình huống sử dụng.
4. Truy xuất phần tử trong mô hình DOM
Để thao tác DOM một cách hiệu quả, bạn cần nắm vững cách truy xuất và xác định đúng phần tử trong cây DOM. JavaScript cung cấp nhiều phương thức khác nhau để tìm kiếm và truy cập các phần tử HTML, giúp bạn dễ dàng thao tác nội dung, giao diện và xử lý sự kiện theo từng tình huống cụ thể.
Tùy vào cấu trúc trang web và mục đích sử dụng, việc truy xuất phần tử trong DOM thường được chia thành hai nhóm chính: truy xuất trực tiếp và truy xuất gián tiếp.
Truy xuất trực tiếp
Truy xuất trực tiếp là cách JavaScript tìm kiếm phần tử dựa trên các thông tin định danh sẵn có, chẳng hạn như id, class hoặc tên thẻ HTML. Đây là phương pháp phổ biến nhất và thường được sử dụng khi bạn biết rõ phần tử cần thao tác.
Cụ thể, JavaScript cho phép:
- Truy xuất phần tử theo id, vốn là giá trị duy nhất trong trang
- Truy xuất theo class để thao tác với một nhóm phần tử có chung đặc điểm
- Truy xuất theo tên thẻ HTML để xử lý các phần tử cùng loại
Cách truy xuất này có ưu điểm là nhanh, rõ ràng và dễ sử dụng, đặc biệt phù hợp với các trang có cấu trúc đơn giản hoặc khi phần tử đã được xác định từ trước.
Truy xuất gián tiếp
Bên cạnh việc truy xuất trực tiếp, JavaScript còn cho phép di chuyển trong cây DOM dựa trên mối quan hệ giữa các node. Phương pháp này được gọi là truy xuất gián tiếp và thường được dùng khi làm việc với các cấu trúc DOM phức tạp hoặc nội dung được tạo động.
Thông qua các thuộc tính của DOM, JavaScript có thể:
- Sử dụng parentNode để truy cập node cha
- Dùng children để truy cập các node con
- Sử dụng previousSibling và nextSibling để di chuyển giữa các node anh em
Cách truy xuất này giúp bạn thao tác linh hoạt hơn, đặc biệt trong những trường hợp không thể gán id hoặc class cho từng phần tử. Nhờ đó, JavaScript vẫn có thể xác định chính xác phần tử cần thao tác dựa trên vị trí và mối quan hệ trong cây DOM.
DOM là công cụ trung tâm giúp JavaScript kiểm soát toàn bộ nội dung và giao diện của trang web. Việc nắm vững cách thao tác DOM không chỉ giúp bạn xây dựng các website tương tác mà còn là nền tảng quan trọng để học các thư viện và framework JavaScript hiện đại.
VI. Các loại DOM mở rộng và ứng dụng thực tế
Trong phần này, bạn sẽ cùng DinhDai.Tech tìm hiểu các loại DOM mở rộng phổ biến như Virtual DOM, Shadow DOM, React DOM, cũng như một khía cạnh quan trọng liên quan đến bảo mật là DOM Based XSS. Đây đều là những kiến thức cần thiết khi bạn làm việc với các framework hiện đại và các dự án web thực tế.
1. Virtual DOM là gì?
Virtual DOM là một khái niệm quan trọng trong các thư viện và framework JavaScript hiện đại như React. Nó không phải là DOM thật của trình duyệt, mà là một bản sao nhẹ của DOM được lưu trữ trong bộ nhớ. Khi ứng dụng web ngày càng phức tạp và có nhiều thay đổi giao diện, việc thao tác trực tiếp với DOM thật có thể gây chậm và kém hiệu quả. Đó là lý do Virtual DOM ra đời để tối ưu quá trình cập nhật giao diện.
Virtual DOM hoạt động như thế nào?
Quy trình hoạt động cơ bản của Virtual DOM gồm các bước:
- Tạo một bản sao DOM trong bộ nhớ (Virtual DOM)
- Khi dữ liệu thay đổi, framework cập nhật Virtual DOM trước
- So sánh (diff) Virtual DOM mới với phiên bản cũ
- Chỉ cập nhật những phần thực sự thay đổi lên DOM thật
Nhờ cách làm này, trình duyệt không cần render lại toàn bộ trang mỗi khi có thay đổi nhỏ.
Lợi ích của Virtual DOM
Virtual DOM mang lại nhiều lợi ích quan trọng:
- Tăng hiệu suất khi cập nhật giao diện
- Giảm số lần render lại DOM thật
- Tối ưu trải nghiệm người dùng trên các ứng dụng lớn
- Dễ quản lý trạng thái giao diện
Virtual DOM là nền tảng giúp các framework hiện đại xử lý giao diện nhanh và hiệu quả hơn. Việc hiểu Virtual DOM không chỉ giúp bạn làm việc tốt với React mà còn nắm được tư duy tối ưu hiệu suất trong front-end.
2. Shadow DOM là gì?
Khi xây dựng các component có thể tái sử dụng, vấn đề xung đột CSS và phạm vi ảnh hưởng của style thường xuyên xảy ra. Shadow DOM được thiết kế để giải quyết chính xác vấn đề này.
Khái niệm Shadow DOM
Shadow DOM là một công nghệ cho phép tạo ra một DOM độc lập nằm bên trong DOM chính. Các phần tử trong Shadow DOM được cô lập hoàn toàn với DOM bên ngoài.
Điểm đặc biệt của Shadow DOM là:
- CSS bên ngoài không ảnh hưởng vào bên trong Shadow DOM
- CSS trong Shadow DOM không làm rò rỉ ra ngoài
- Tránh xung đột style và tên class
Ứng dụng của Shadow DOM
Shadow DOM thường được sử dụng trong:
- Web Components
- Xây dựng các component có thể tái sử dụng
- Tạo thư viện UI ổn định, không xung đột CSS
Nhờ Shadow DOM, các component hoạt động như những "hộp đen" độc lập, rất phù hợp cho các hệ thống lớn và nhiều nhóm phát triển cùng lúc. Shadow DOM giúp cô lập giao diện và logic của component, tạo nền tảng cho Web Components và các hệ thống UI lớn. Đây là công cụ quan trọng khi xây dựng thư viện giao diện chuyên nghiệp.
3. React DOM là gì?
Mặc dù React quản lý logic và trạng thái giao diện, nó không thể trực tiếp thao tác DOM của trình duyệt. React DOM đóng vai trò trung gian giúp React làm việc với DOM thật một cách hiệu quả.
React DOM dùng để làm gì?
React DOM là thư viện giúp kết nối React với DOM thật của trình duyệt. Nó chịu trách nhiệm render các component React và cập nhật giao diện khi trạng thái thay đổi.
React DOM không trực tiếp thao tác DOM từng phần tử như JavaScript thuần, mà thông qua Virtual DOM để tối ưu hiệu suất.
Mối quan hệ giữa React và DOM
Mối quan hệ giữa React và DOM có thể hiểu như sau:
- React quản lý logic và trạng thái giao diện
- Virtual DOM quyết định phần nào cần cập nhật
- React DOM áp dụng các thay đổi đó lên DOM thật
Nhờ cơ chế này, React giúp việc xây dựng giao diện phức tạp trở nên dễ kiểm soát, rõ ràng và hiệu quả hơn so với thao tác DOM thủ công.
React DOM giúp React cập nhật DOM tối ưu thông qua Virtual DOM, từ đó giảm tải cho trình duyệt và tăng hiệu suất ứng dụng. Hiểu rõ React DOM sẽ giúp bạn sử dụng React đúng cách và hiệu quả hơn.
4. DOM Based XSS là gì?
Bên cạnh hiệu suất và kiến trúc, bảo mật là yếu tố không thể bỏ qua khi thao tác DOM. Một trong những rủi ro phổ biến nhất liên quan đến JavaScript và DOM là DOM Based XSS.
Khái niệm DOM Based XSS
DOM Based XSS là một dạng lỗ hổng bảo mật, xảy ra khi JavaScript thao tác DOM không an toàn, dẫn đến việc mã độc được chèn và thực thi ngay trên trình duyệt người dùng.
Khác với XSS truyền thống, DOM Based XSS không cần can thiệp từ phía server mà khai thác trực tiếp logic JavaScript phía client.
Nguy cơ bảo mật liên quan đến DOM
DOM Based XSS thường xảy ra khi:
- Sử dụng dữ liệu người dùng nhập mà không kiểm tra
- Gán trực tiếp dữ liệu vào innerHTML
- Xử lý URL, cookie hoặc localStorage không an toàn
Hậu quả có thể bao gồm:
- Đánh cắp thông tin người dùng
- Thực thi mã độc
- Chiếm quyền kiểm soát phiên làm việc
DOM Based XSS là lời nhắc quan trọng rằng thao tác DOM cần đi kèm với kiểm soát dữ liệu chặt chẽ. Hiểu và phòng tránh lỗ hổng này giúp bạn xây dựng các ứng dụng web an toàn và đáng tin cậy hơn.
❓ Câu hỏi thường gặp
4 câu hỏi
Trong quá trình học và làm việc với JavaScript, DOM là một khái niệm xuất hiện rất thường xuyên và cũng gây không ít bối rối cho người mới. Phần câu hỏi thường gặp dưới đây DinhDai.Tech sẽ giúp bạn tóm tắt lại những kiến thức quan trọng nhất về DOM, đồng thời làm rõ một số thắc mắc phổ biến mà nhiều người mới học web thường gặp phải.
Kết luận
DOM là nền tảng cốt lõi cho phép JavaScript tương tác với trang web, từ việc thay đổi nội dung, cập nhật giao diện cho đến xử lý các sự kiện người dùng theo thời gian thực. Hầu hết các tính năng động trên website hiện đại đều được xây dựng dựa trên việc thao tác DOM, vì vậy việc hiểu rõ DOM là điều bắt buộc đối với bất kỳ ai học lập trình web.
Đối với người mới bắt đầu, nắm vững DOM giúp bạn xây dựng tư duy đúng về cách trang web hoạt động và cách JavaScript can thiệp vào giao diện. Đây cũng là tiền đề quan trọng để tiếp cận JavaScript nâng cao và các framework frontend hiện đại như React hay Vue, từ đó tiến gần hơn đến con đường trở thành Web Developer chuyên nghiệp.
Lê Đình Đài
- Kinh nghiệm 5 năm vận hành Shopee & TikTok Shop
- Xây shop thời trang nữ từ 0đ lên doanh thu 5 tỷ/tháng
Founder của dinhdai.tech - Nơi chia sẻ kiến thức, công cụ AI miễn phí và giải pháp tối ưu cho seller. Sứ mệnh của tôi là giúp mọi người kinh doanh hiệu quả hơn với công nghệ.