DOM là gì? Tìm hiểu mối quan hệ giữa DOM với Javascript

Sự kết hợp giữa DOM và JavaScript đã mở ra nhiều khả năng mới, cho phép các lập trình viên chuyên về website có thể tạo ra những trải nghiệm người dùng tuyệt vời hơn. Vậy cụ thể thì DOM là gì?

Tổng quan khái niệm

DOM là gì?

Giải thích cho câu hỏi “DOM là gì” thì nó là viết tắt của Document Object Model (Mô hình Đối tượng Tài liệu), là một khái niệm quan trọng trong lĩnh vực lập trình web, được định nghĩa bởi W3C (World Wide Web Consortium - Tổ chức Web Toàn cầu). Đây là một mô hình tiêu chuẩn hóa để biểu diễn cấu trúc của tài liệu HTML và XML.

Trong DOM, mỗi phần tử của tài liệu (ví dụ: thẻ HTML, nội dung văn bản, thuộc tính,...) được biểu diễn dưới dạng một đối tượng. Các đối tượng này được tổ chức theo cấu trúc cây phân cấp, với đối tượng gốc là đối tượng document. Mỗi đối tượng trong cây DOM đều có các thuộc tính và phương thức riêng, cho phép truy cập hay thao tác trên chính nó hoặc các đối tượng con.

DOM là gì - hình 1

Các thẻ HTML được đại diện bởi các đối tượng Element, có thuộc tính và phương thức tương ứng để truy cập, thay đổi nội dung, cấu trúc hoặc kiểu dáng của chúng. Ví dụ, một thẻ <p> sẽ có đối tượng Element tương ứng, với các thuộc tính như textContent để truy cập nội dung văn bản, classList để quản lý các lớp CSS, và các phương thức như appendChild() để thêm phần tử con mới.

Sự phân cấp và các thuộc tính của các thẻ HTML này được gọi là “selectors” trong DOM, và chúng cho phép chúng ta truy cập, thao tác các phần tử thuận lợi. Chúng ta có thể sử dụng các phương thức như getElementById(), getElementsByTagName(), querySelector() cùng những phương thức khác trong JavaScript để lấy tham chiếu đến các đối tượng DOM tương ứng.

DOM là gì - hình 2

Một điểm quan trọng cần lưu ý là tất cả các thẻ HTML đều được quản lý bên trong đối tượng document. Đối tượng document là đối tượng gốc của DOM, và nó cung cấp các phương thức cũng như thuộc tính cho phép truy cập và thao tác toàn bộ nội dung của trang web. Giờ thì bạn đã biết thuật ngữ DOM là gì rồi chứ!

HTML DOM là gì?

Sau khi đã tìm hiểu DOM là gì, tiếp theo hãy cùng đi vào chi tiết để nắm rõ hơn về HTML DOM nhé!

HTML DOM là một mô hình lập trình tiêu chuẩn cho phép truy cập, thay đổi cũng như tạo mới các phần tử của một tài liệu HTML hoặc XML. Nó cung cấp cách tiếp cận có cấu trúc và hướng đối tượng để tương tác với các thành phần của trang web.

DOM là gì - hình 3

Trong HTML DOM, mỗi phần tử HTML được biểu diễn dưới dạng một đối tượng riêng biệt, với các thuộc tính và phương thức tương ứng. Các đối tượng này được tổ chức theo một cấu trúc cây phân cấp, phản ánh mối quan hệ lồng nhau của các phần tử HTML trong tài liệu. HTML DOM cho phép người dùng truy cập, thao tác với các phần tử một cách có hệ thống.

Sử dụng HTML DOM, các lập trình viên có thể thực hiện các tác vụ như:

Truy cập và thay đổi nội dung: Đọc, sửa đổi hoặc thêm nội dung văn bản của các phần tử HTML.
Thay đổi thuộc tính: Thay đổi các thuộc tính của phần tử HTML như id, class, src, href,…
Thay đổi kiểu dáng: Sửa đổi các thuộc tính CSS của phần tử HTML để thay đổi kiểu dáng.
Tạo, thêm hoặc xóa phần tử: Tạo mới, thêm hoặc xóa các phần tử HTML trong tài liệu.
Xử lý sự kiện: Đăng ký và xử lý các sự kiện như click, hover, keypress,… trên các phần tử HTML.

DOM là gì - hình 4

Cây cấu trúc DOM

Node (Nút)

Trong HTML DOM, mọi thành phần trong tài liệu HTML được xem như một node (nút), và tất cả các node này được tổ chức trong một cấu trúc dạng cây gọi là DOM Tree. Các node trong DOM Tree được phân loại thành nhiều loại khác nhau, với ba loại quan trọng nhất là node gốc (document node), node phần tử (element node) và node văn bản (text node):

Node gốc (Document node): Đây là node đại diện cho toàn bộ tài liệu HTML, thường được biểu diễn bởi thẻ <html>. Node này là gốc của cây DOM, tất cả các node khác đều là con của nó.
Node phần tử (Element node): Đây là node biểu diễn cho các phần tử HTML. Mỗi thẻ HTML như <div>, <p>, <img>,... đều là một element node. Các node phần tử có thể chứa các node khác, bao gồm cả node phần tử con và node văn bản.
Node văn bản (Text node): Mỗi đoạn văn bản trong tài liệu HTML là một node văn bản. Node văn bản nằm bên trong các thẻ HTML và chứa nội dung ký tự của các phần tử này. Ví dụ, tên trang web trong thẻ <title>, tên đề mục trong thẻ <h1>, hay một đoạn văn trong thẻ <p> đều là các node văn bản.

Ngoài ba loại node chính này, còn có các loại node khác như:

Node thuộc tính (Attribute node): Biểu diễn các thuộc tính của phần tử HTML, như id, class, src,... Tuy nhiên, trong mô hình DOM hiện đại, các thuộc tính thường được coi là một phần của node phần tử thay vì là các node riêng lẻ.
Node chú thích (Comment node): Biểu diễn các chú thích trong mã HTML, được đặt trong . Các node chú thích không ảnh hưởng đến việc hiển thị nội dung trên trình duyệt, nhưng có thể hữu ích cho việc ghi chú trong mã nguồn.

DOM là gì - hình 5

Các node trong DOM Tree tạo nên một cấu trúc có tổ chức và thứ bậc, cho phép các lập trình viên truy cập, thao tác với tài liệu HTML một cách có hệ thống. Bằng cách sử dụng các phương thức hay thuộc tính của DOM, chúng ta có thể thêm, xóa, thay đổi cũng như cập nhật các node trong tài liệu, giúp trang web trở nên sinh động hơn.

Quan hệ giữa các node

Các node có mối quan hệ phân cấp và thứ bậc rõ ràng, hỗ trợ tổ chức, quản lý tài liệu HTML hiệu quả. Mối quan hệ giữa các node trong DOM bao gồm node gốc, node cha, node con và node anh em:

Node gốc (Document node): Đây là node gốc của toàn bộ tài liệu HTML, thường được biểu diễn bởi thẻ <html>. Node gốc không có node cha.
Node cha (Parent node): Bất kỳ node nào không phải là node gốc đều có thể là node cha. Node cha là node chứa các node con bên trong nó. Ví dụ, một thẻ <ul> có thể là node cha chứa các node con <li>.
Node con (Child node): Các node nằm bên trong một node cha được gọi là node con. Một node có thể có một hoặc nhiều node con, hoặc có thể không có node con nào. Ví dụ, các thẻ <li> bên trong một thẻ <ul> đều là các node con của <ul>.
Node anh em (Sibling nodes): Các node con của cùng một node cha được gọi là các node anh em. Node anh em có cùng cấp độ trong cây DOM, nằm cạnh nhau. Ví dụ, các thẻ <li> bên trong cùng một thẻ <ul> là những node anh em.
- Node con cả (First child): Node đầu tiên trong danh sách các node con của một node cha, được gọi là con cả.
- Node con út (Last child): Node cuối cùng trong danh sách các node con của một node cha, được gọi là con út.

DOM là gì - hình 6

Nhiệm vụ của DOM trong Javascript

Trong JavaScript, DOM (Document Object Model) có bốn nhiệm vụ cơ bản:

Truy xuất các thẻ HTML: Sử dụng các phương thức như getElementById, getElementsByClassName, getElementsByTagName, và querySelector để tìm và truy cập các phần tử HTML.

DOM là gì - hình 7

Thay đổi thuộc tính HTML: Cập nhật các thuộc tính như src, href, id bằng setAttribute hoặc gán trực tiếp.

DOM là gì - hình 8

Thay đổi CSS HTML: Thay đổi kiểu dáng các thẻ HTML thông qua thuộc tính style.

DOM là gì - hình 9

Xóa, sửa, thêm, tạo phần tử HTML: Sử dụng các phương thức như appendChild, removeChild, replaceChild, và createElement để thao tác cấu trúc tài liệu.

DOM là gì - hình 10

Tổng hợp các loại DOM trong Javascript

DOM được chia thành nhiều loại khác nhau trong JavaScript để phục vụ cho các mục đích hay nhiệm vụ cụ thể. Dưới đây là một số loại DOM phổ biến:

DOM Document: Lưu trữ, quản lý toàn bộ cấu trúc của tài liệu HTML. DOM Document cung cấp các phương thức và thuộc tính để truy xuất, thao tác với các phần tử trong tài liệu.
DOM Element: Chủ yếu dùng để truy xuất các phần tử HTML bằng cách xác định các thuộc tính như Class, ID hoặc name có trong HTML. Đây là phần cơ bản và quan trọng nhất của DOM.
DOM HTML: Hỗ trợ thay đổi nội dung hay giá trị thuộc tính trong HTML. DOM HTML cung cấp các phương thức để thao tác với các phần tử HTML ví dụ như thêm, xóa, sửa nội dung cũng như thuộc tính.
DOM CSS: Được sử dụng để thay đổi định dạng CSS của các phần tử HTML. DOM CSS cho phép bạn thay đổi các thuộc tính CSS của các phần tử để điều chỉnh giao diện của trang web.
DOM Event: Nó được sử dụng để gán các hành động và sự kiện như onclick, onload, onmouseover,… cho các phần tử HTML.
DOM Listener: Hỗ trợ nghe, xử lý các sự kiện đã tác động vào các phần tử HTML, cho phép bạn xử lý các hành động người dùng như click, hover và submit.
DOM Navigation: Cung cấp các thuộc tính, phương thức để duyệt qua cấu trúc cây của tài liệu và truy cập các phần tử cha, con, anh chị em của một phần tử cụ thể.
DOM Node, Nodelist: Sử dụng để thao tác với các phần tử HTML thông qua đối tượng. Node đại diện cho một phần tử cụ thể trong DOM, trong khi NodeList là một tập hợp các node.

DOM là gì - hình 11

Thao tác với DOM trong JavaScript

Thao tác với DOM trong JavaScript giống như việc bạn có quyền thay đổi bản đồ của một thế giới ảo. Thông qua DOM, bạn có khả năng tương tác, điều chỉnh các phần tử trên trang web như một người sửa đổi địa hình và kiến trúc trong một thế giới ảo. Tất cả những thay đổi mà bạn thực hiện, từ việc thêm mới, di chuyển, đổi màu sắc cho đến việc xóa bỏ đều có thể thực hiện được.

Thuộc tính và phương thức phổ biến

Thuộc tính

Các thuộc tính phổ biến khi bạn tiến hành thao tác với DOM trong JavaScript bao gồm:

ID: Được sử dụng để truy xuất một phần tử cụ thể trong DOM. ID là duy nhất trên mỗi trang, thường được sử dụng để xác định các phần tử quan trọng.
ClassName: Tương tự như ID, nhưng có thể được sử dụng để truy xuất nhiều phần tử cùng một lúc, khi chúng có cùng một lớp CSS.
TagName: Là tên thẻ HTML của một phần tử, cho phép bạn xác định loại phần tử bạn đang làm việc.
InnerHTML: Trả về mã HTML của phần tử, bao gồm cả các phần tử và văn bản bên trong, dưới dạng chuỗi ký tự.
OuterHTML: Tương tự như InnerHTML, nhưng bao gồm cả mã HTML của phần tử hiện tại.
TextContent: Trả về nội dung văn bản của phần tử, bỏ qua các phần tử con.
Attribute: Là một tập hợp các thuộc tính của phần tử như ID, Name, Class, Href, Title,...
Style: Là một tập hợp các định dạng CSS của phần tử, cho phép bạn thay đổi các thuộc tính CSS của phần tử.
Value: Được sử dụng để lấy giá trị của một phần tử đầu vào, ví dụ như ô văn bản hoặc ô chọn.

DOM là gì - hình 12

Phương thức

Các phương thức phổ biến để làm việc với DOM trong JavaScript bao gồm:

getElementById(ID): Phương thức này truy xuất đến một phần tử duy nhất trong DOM thông qua ID của nó. ID là duy nhất trên mỗi trang, do đó phương thức này trả về phần tử duy nhất có ID tương ứng.
getElementsByTagName(TagName): Truy xuất đến tất cả các phần tử HTML trong DOM thông qua tên thẻ HTML của chúng. Ví dụ, nếu bạn truy cập “div”, phương thức này sẽ trả về một NodeList chứa tất cả các phần tử div trên trang.
getElementsByName(Name): Truy xuất đến tất cả các node trong DOM có thuộc tính name cần tìm, thường được sử dụng với các phần tử như input hoặc form để truy xuất các phần tử theo tên.
getAttribute(Attribute Name): Lấy giá trị của một thuộc tính cụ thể của một phần tử trong DOM.
setAttribute(Attribute Name, value): Được sử dụng để sửa giá trị cho một thuộc tính cụ thể của một phần tử trong DOM.
appendChild(Node): Được dùng khi bạn muốn thêm một node con vào cuối của một node hiện tại, thường được sử dụng để thêm phần tử mới vào trong DOM.
removeChild(Node): Để xóa một node con khỏi node hiện tại trong DOM, loại bỏ các phần tử không cần thiết hoặc đã không cần sử dụng đến nữa.

DOM là gì - hình 13

Thuộc tính quan hệ

ParentNode: Đại diện cho node cha của một node, hỗ trợ truy cập trực tiếp đến node cha.
ChildNodes: Danh sách các node con của một node cha, cung cấp một danh sách để truy cập và thao tác với các node con.
FirstChild: Đại diện cho node con đầu tiên của một node cha, giúp truy cập trực tiếp đến node con đầu tiên.
LastChild: Đại diện cho node con cuối cùng của một node cha, giúp truy cập trực tiếp đến node con cuối cùng.
NextSibling: Đại diện cho node anh em tiếp theo (cùng cấp) của một node, hỗ trợ truy cập đến node anh em liền kề sau.
PreviousSibling: Đại diện cho node anh em liền kề trước của một node, người dùng có thể truy cập đến node anh em liền kề trước.

DOM là gì - hình 14

Truy xuất các phần tử

Truy xuất gián tiếp

Truy xuất gián tiếp trong DOM là quá trình tìm kiếm, điều hướng qua các nút trong cây DOM bằng cách sử dụng các thuộc tính quan hệ. Dưới đây là sáu thuộc tính quan hệ quan trọng:

parentNode: Trả về nút cha của nút hiện tại trong cây DOM. Bằng cách sử dụng thuộc tính này, bạn có thể đi ngược lại từ một nút con lên đến nút cha của nó.
childNodes: Tham chiếu tất cả các nút con trực tiếp của nút hiện tại, dưới dạng một mảng các đối tượng. Bạn có thể sử dụng thuộc tính này để truy cập các nút con của một nút cụ thể.
firstChild: Trả về nút con đầu tiên của nút hiện tại.
lastChild: Tham chiếu đến nút con cuối cùng của nút hiện tại.
nextSibling: Tham chiếu đến nút anh em (cùng cấp) nằm liền kề sau với nút hiện tại trong cây DOM.
previousSibling: Trả về nút anh em (cùng cấp) nằm liền kề trước với nút hiện tại trong cây DOM.

DOM là gì - hình 15

Truy xuất trực tiếp

Truy xuất trực tiếp trong DOM là một cách nhanh chóng, tiện lợi để truy cập các phần tử trên trang web mà không cần phải hiểu biết quá sâu về cấu trúc DOM. Dưới đây là ba phương thức truy xuất trực tiếp phổ biến:

getElementById(id): Phương thức này trả về phần tử duy nhất có ID tương ứng trong tài liệu, nó hữu ích khi bạn chỉ cần truy xuất một phần tử cụ thể và biết ID của nó.
getElementsByTagName(tagName): Truy xuất tất cả các phần tử có tên thẻ tương ứng trong DOM, được dùng khi bạn muốn truy xuất một nhóm các phần tử có cùng loại thẻ.
getElementsByName(name): Truy xuất tất cả các phần tử có thuộc tính name tương ứng trong DOM. Đây là lựa chọn phù hợp khi bạn cần truy xuất các phần tử dựa trên tên của chúng.

DOM là gì - hình 16

Tạm kết

Hy vọng rằng khi tham khảo bài viết này, bạn đã có thể hiểu DOM là gì cùng những khái niệm liên quan đến thuật ngữ này. Thông qua DOM, bạn có thể thực hiện các tác vụ như thay đổi nội dung văn bản, thêm hoặc xóa phần tử HTML, thay đổi kiểu dáng CSS, xử lý sự kiện người dùng làm cho trang web trở nên thú vị, đáp ứng được nhu cầu của người dùng trong thời đại kỹ thuật số hiện nay. Chúc bạn thành công!

Hãy tham khảo các sản phẩm công nghệ như máy tính bảng, điện thoại, PC,… hay các thiết bị gia dụng với vô vàn ưu đãi hấp dẫn tại website của FPT Shop nhé. Bài viết xin đề xuất tới bạn các sản phẩm laptop bán chạy nhất của cửa hàng:

Laptop

Xem thêm:

DOM là gì? Giải thích thuật ngữ và tìm hiểu chi tiết mối quan hệ giữa DOM với Javascript