Trang chủ » DOM là gì? Các Thao Tác Cơ Bản DOM Trong Javascript

DOM là gì? Các Thao Tác Cơ Bản DOM Trong Javascript

18/10/2023
LANIT JSC

JavaScript là ngôn ngữ lập trình đa chức năng và là công cụ tương tác với các tài liệu HTML. JavaScript sử dụng một cơ chế gọi là DOM để thực hiện các công việc trên. Vậy DOM là gì và nó có nhiệm vụ gì trong Javascript?

DOM là gì?

DOM, hay Document Object Model, là một chuẩn được W3C (Tổ Chức Web Toàn Cầu) định nghĩa. Nó cho phép truy cập và thay đổi tài liệu có cấu trúc HTML hoặc XML bằng các ngôn ngữ lập trình phổ biến như Javascript, PHP…

Để tìm hiểu và thao tác với DOM trong Javascript, ta cần hiểu rằng mỗi thẻ HTML có thuộc tính và có mối quan hệ cha-con với các thẻ HTML khác. Trong DOM, việc xử lý các vấn đề như thay đổi thuộc tính hoặc cấu trúc của các thẻ HTML này được thực hiện thông qua các selector.

Tất cả các thẻ HTML được quản lý trong đối tượng document. Trong đó, thẻ cao nhất là thẻ html, theo sau là body và head. Trong head, chúng ta có các thẻ như style, title,… còn trong body chứa vô số các thẻ HTML khác. Do đó, khi làm việc với các thẻ HTML trong Javascript, chúng ta cần sử dụng đối tượng document để thao tác.

HTML DOM là gì?

HTML DOM là một cơ chế mạnh mẽ giúp quản lý dữ liệu theo mô hình hướng đối tượng. Trong một tài liệu có cấu trúc, mỗi phần tử được định nghĩa dưới dạng đối tượng, với phương thức và thuộc tính riêng, tạo ra một cách truy xuất dễ dàng mà vẫn bảo toàn cấu trúc ban đầu.

Mỗi phần tử tồn tại như một thực thể riêng biệt, sở hữu tập hợp thuộc tính và phương thức đa dạng để thao tác với chúng, bao gồm việc thêm, xóa, chỉnh sửa, hay cập nhật. Ngoài ra, việc thêm hoặc loại bỏ các phần tử một cách linh hoạt cũng giúp duy trì tính động của nội dung và cấu trúc trang web.

Để mô tả cụ thể hơn, HTML elements được xem như các đối tượng, mỗi đối tượng có một tập hợp thuộc tính đặc trưng, và các phương thức giúp truy cập đến các HTML elements tất cả. Ngoài ra, các sự kiện được kích hoạt cho tất cả các HTML elements, tạo điều kiện cho sự tương tác đa dạng trên trang web.

Cây cấu trúc trong DOM

Sau khi tìm hiểu về khái niệm DOM là gì, thì hãy cùng chúng tôi đi đến khái niệm cây cấu trúc DOM. Cây cấu trúc DOM là mô hình biểu diễn cấu trúc của một tài liệu HTML hoặc XML dưới dạng cây. Cây DOM bao gồm các nút (nodes) mô tả cấu trúc của tài liệu và mối quan hệ giữa chúng. Dưới đây là các chi tiết cây cấu trúc của DOM:

Node Gốc (Document Node): Đây là nút cao nhất trong cây DOM, đại diện cho toàn bộ tài liệu. Trong trường hợp của tài liệu HTML, node gốc thường được biểu diễn bằng thẻ <html>.
Node Phần Tử (Element Node): Đây là các nút đại diện cho các phần tử HTML, bao gồm các thẻ như <div>, <p>, <a>, và nhiều loại phần tử khác. Mỗi phần tử sẽ trở thành một node trong cây DOM.
Node Văn Bản (Text Node): Mỗi đoạn văn bản trong tài liệu HTML sẽ được xem như một nút văn bản trong cây DOM. Các đoạn văn bản này thường xuất hiện trong các thẻ như <p>, <span>, và thậm chí cả trong các thẻ như <title> hoặc <h1>.
Node Thuộc Tính (Attribute Node): Một số phần tử HTML có thể chứa các thuộc tính, và mỗi thuộc tính sẽ được xem như một nút thuộc tính trong cây DOM.
Node Chú Thích (Comment Node): Các chú thích trong tài liệu HTML sẽ được đại diện bởi các nút chú thích trong cây DOM.

Mỗi nút trong cây DOM có thể có mối quan hệ với các nút khác:

Mỗi nút không phải là nút gốc đều có một nút cha (parent node).
Một nút có thể có một hoặc nhiều nút con (children nodes).
Các nút cùng cấp được gọi là các nút anh em (siblings).
Nút đầu tiên trong danh sách các nút con của một nút được gọi là nút con cả (first child node), và nút cuối cùng trong danh sách các nút con được gọi là nút con út (last child node).

Phân loại các DOM trong Javascript

DOM trong JavaScript được chia thành nhiều loại để quản lý và tương tác với cấu trúc HTML và CSS một cách linh hoạt. Dưới đây là các phân loại cơ bản của DOM:

DOM Document: Đại diện cho toàn bộ tài liệu HTML. Nó cung cấp phương thức để tạo, tải, và xử lý toàn bộ tài liệu HTML.
DOM Element : Đại diện cho các phần tử HTML trên trang web. Có thể truy cập các phần tử bằng ID, tên lớp, hoặc tên thẻ.
DOM HTML: Dùng để thay đổi nội dung và thuộc tính của các phần tử HTML. Nó cho phép bạn thêm, xóa hoặc chỉnh sửa các phần tử và thuộc tính của chúng.
DOM CSS : Được sử dụng để thay đổi và tương tác với các thuộc tính CSS của các phần tử HTML. Bạn có thể điều chỉnh các kiểu, màu sắc, vị trí, và các thuộc tính khác của phần tử.
DOM Event : Được sử dụng để gán và xử lý các sự kiện trên các phần tử HTML, chẳng hạn như bấm chuột, nhấn phím, hoặc tải trang.
DOM Navigation: Dùng để điều hướng qua các phần tử HTML, tìm kiếm phần tử theo mối quan hệ cha con, anh em hoặc hàng xóm.
DOM Node và NodeList: Đại diện cho các nút trong cây DOM, cho phép thao tác với cấu trúc của các phần tử và các nhóm phần tử.

Nhiệm vụ chính của DOM trong JavaScript

Trong JavaScript, DOM có vai trò cực kỳ quan trọng. Trong đó có bốn nhiệm vụ cơ bản:

Truy xuất đến các thẻ HTML: DOM cho phép truy cập và tương tác với các phần tử HTML trên trang web. Bạn có thể truy xuất các phần tử dựa trên ID, lớp, hoặc thẻ HTML để thay đổi nội dung hoặc thuộc tính của chúng.
Thay đổi thuộc tính của HTML: Bạn có thể thay đổi các thuộc tính của các phần tử HTML, chẳng hạn như giá trị của thuộc tính ‘src’ cho hình ảnh, ‘href’ cho liên kết, hoặc các thuộc tính khác.
Thay đổi CSS của HTML: DOM cho phép bạn điều chỉnh các thuộc tính CSS của các phần tử HTML, chẳng hạn như màu sắc, font chữ, độ rộng, chiều cao và vị trí của phần tử.
Thêm, sửa, xóa hoặc tạo trên HTML: Bạn có thể thêm các phần tử HTML mới, sửa đổi hoặc xóa các phần tử hiện có, hoặc tạo các phần tử HTML hoàn toàn mới trong trang web.

Một số thao tác cơ bản với DOM trong JavaScript

Các thuộc tính và phương thức làm việc phổ biến trong DOM

Dưới đây là một số thuộc tính và phương thức phổ biến khi làm việc với DOM, giúp bạn dễ dàng thao tác với các phần tử trên trang web bằng JavaScript:

Thuộc tính

ID: Được sử dụng để truy xuất trực tiếp đến một phần tử cụ thể trong DOM.
ClassName: Tương tự như ID, ClassName cũng được sử dụng để truy xuất đến nhiều phần tử hơn trong DOM.
TagName: Đại diện cho tên thẻ HTML của một phần tử cụ thể.
InnerHTML: Trả về đoạn mã HTML bên trong phần tử hiện tại, bao gồm cả các phần tử và nút văn bản, dưới dạng chuỗi ký tự.
OuterHTML: Trả về đoạn mã HTML của phần tử hiện tại cùng với tất cả nội dung bên trong.
TextContent: Trả về một chuỗi ký tự chứa nội dung của nút văn bản hiện tại.
Attributes: Bao gồm tập hợp các thuộc tính như ID, Name, Class, Href, Title, và nhiều thuộc tính khác.
Style: Được sử dụng để truy cập và chỉnh sửa các thuộc tính định dạng của phần tử hiện tại.
Value: Lấy giá trị của phần tử đang được chọn và gán cho một biến.

Phương thức

getElementById(ID): Truy xuất một phần tử duy nhất thông qua ID của nó.
getElementsByTagName(Tagname): Truy xuất tất cả các phần tử HTML dựa trên tên thẻ cụ thể.
getElementsByName(Name): Truy xuất tất cả các nút có thuộc tính name cụ thể.
getAttribute(Attribute Name): Lấy giá trị của một thuộc tính cụ thể.
setAttribute(Attribute Name, value): Sửa đổi giá trị của một thuộc tính cụ thể.
appendChild(Node): Sử dụng để thêm một nút con vào nút hiện tại.
removeChild(Node): Xóa một nút cụ thể khỏi nút hiện tại.

Cách truy xuất DOM

Để truy xuất DOM, bạn có thể sử dụng hai phương thức khác nhau: truy xuất gián tiếp và truy xuất trực tiếp.

Truy xuất gián tiếp

Mỗi nút trên sơ đồ DOM có sẵn sáu thuộc tính quan hệ giúp bạn truy xuất các nút khác dựa trên vị trí của chúng:

Node.parentNode: Để tham chiếu đến nút cha của nút hiện tại. Đôi khi bạn cần nối thuộc tính này nhiều lần để đạt tới nguồn gốc xa hơn của một nút, ví dụ: Node.parentNode.parentNode.
Node.childNodes: Để tham chiếu đến tất cả các nút con trực tiếp của nút hiện tại. Các nút con không được phân biệt theo loại, do đó mảng kết quả trả về có thể chứa nhiều loại nút khác nhau.
Node.firstChild: Để tham chiếu đến nút con đầu tiên của nút hiện tại, ví dụ: Node.childNodes[0].
Node.lastChild: Để tham chiếu đến nút con cuối cùng của nút hiện tại, ví dụ: Node.childNodes[Element.childNodes.length-1].
Node.nextSibling: Để tham chiếu đến nút anh em đứng sau nút hiện tại.
Node.previousSibling: Để tham chiếu đến nút anh em đứng trước nút hiện tại.

Truy xuất trực tiếp

Cách truy xuất trực tiếp này thường nhanh hơn và đơn giản hơn vì bạn không cần phải xác định mối quan hệ hay vị trí của nút. Dưới đây là ba phương thức truy xuất trực tiếp mà bạn có thể sử dụng:

document.getElementById(‘id_cần_tìm’)
document.getElementsByTagName(‘tên_thẻ’)
document.getElementsByName(‘tên_cần_tìm’)

Cách tạo, xóa, thay thế DOM trong JavaScript

Dưới đây là hướng dẫn về cách tạo mới, thêm, xoá và thay thế phần tử HTML bằng JavaScript.

Cách tạo một phần tử HTML

Chúng ta có thể tạo mới một phần tử HTML bằng các cách sau:

document.createElement(tag_name): Sử dụng để tạo một phần tử với thẻ tag_name như a, p, div,…
element.cloneNode(): Sử dụng để nhân bản một phần tử hiện có.
document.createTextNode(text): Sử dụng để tạo một nút văn bản.

Xóa phần tử HTML

Để loại bỏ một phần tử HTML, bạn cần chọn phần tử cha trước khi sử dụng phương thức removeChild(node).

Ví dụ:

var parent = document.getElementById("demo");

var child = document.getElementById("p1");

parent.removeChild(child);

Hoặc bạn cũng có thể sử dụng phương thức parentNode.removeChild(child) để bỏ qua bước tìm phần tử cha trong DOM.

Ví dụ:

var child = document.getElementById(“p1”);

child.parentNode.removeChild(child);

Thay thế phần tử HTML

Để thay thế một phần tử HTML bằng một phần tử HTML khác, bạn có thể sử dụng cú pháp element.replaceChild(newNode, oldNode), trong đó element là nút cha.

Ví dụ:

var p = document.createElement("p");

p.innerText = 'New Text';

var parent = document.getElementById("demo");

var child = document.getElementById("p1");

parent.replaceChild(p, child);

FAQs về DOM

DOM implementation là gì?

DOM implementation đề cập đến phần mềm hoặc giao diện cung cấp khả năng tương tác với tài liệu XML hoặc HTML thông qua giao diện DOM. Một trình duyệt web thường chứa một triển khai DOM để xử lý các tác vụ liên quan đến tài liệu.

HTML DOM và DOM trong JavaScript khác nhau như thế nào?

DOM là một mô hình lập trình cho phép truy cập và tương tác với các phần tử trong tài liệu. HTML DOM là một phần của DOM, tập trung vào việc truy cập và thao tác với các phần tử HTML cụ thể trong tài liệu. Nó cho phép bạn tương tác với các phần tử HTML, thay đổi cấu trúc và dữ liệu của chúng thông qua JavaScript.

DOM có thể được sử dụng cho ngôn ngữ lập trình nào khác ngoài JavaScript không?

DOM có thể được sử dụng trong nhiều ngôn ngữ lập trình khác nhau, không chỉ riêng JavaScript. Nó cung cấp một cách tiếp cận đối với cấu trúc tài liệu và cho phép tương tác với các phần tử trong tài liệu không phụ thuộc vào ngôn ngữ lập trình cụ thể. DOM có thể được sử dụng trong môi trường lập trình như VBScript, Scheme, Java, C++, Perl, Python và nhiều ngôn ngữ khác nữa.

Lời kết

Sau khi đọc bài viết, hy vọng bạn đã hiểu một số kiến thức cơ bản về DOM là gì, một khái niệm quan trọng trong lập trình. Chúc bạn có thể tận dụng hiệu quả DOM trong quá trình lập trình!

LANIT JSC

Được thành lập năm 2017, Công ty cổ phần công nghệ và truyền thông LANIT (LANIT JSC) đã sớm khẳng định được vị trí của mình là một trong những đơn vị cung cấp dịch vụ lưu trữ dữ liệu hàng đầu với chất lượng tốt nhất, cùng chi phí hợp lý nhất.