Cách ứng dụng DOM trong Javascript hiệu quả bạn nên biết

Nếu muốn phát triển tốt trong ngành lập trình thì bạn không nên bỏ qua các kiến thức liên quan đến DOM. Bởi đây chính là nền tảng năng nâng cao trải nghiệm web bằng các tiện ích cơ bản. Vậy đặc điểm của HTML DOM là gì? Có bao nhiêu loại DOM trong Javascript? Các thao tác với DOM được thực hiện như thế nào? Mời bạn cùng FPT Shop tìm hiểu đáp án ngay sau đây!

Một số khái niệm cơ bản cần biết

DOM là gì?

DOM (viết tắt của Document Object Model) biểu thị phương pháp tiếp cận ngôn ngữ tiêu chuẩn để biểu diễn và tương tác với cấu trúc của trang web hoặc tài liệu XML. DOM không phải là một ngôn ngữ lập trình mà là một cơ chế hỗ trợ truy cập, thay đổi, thêm và xóa các phần tử hoặc nội dung của trang web, tài liệu XML.

Những kiến thức cơ bản liên quan đến DOM

Hệ thống DOM chia các phần tử của trang web thành một cây có cấu trúc phân cấp, trong đó mỗi phần tử được biểu diễn bằng một đối tượng trong DOM. Điều này cho phép các ngôn ngữ lập trình web như JavaScript tương tác với cấu trúc của trang web một cách hiệu quả.

DOM được sử dụng rộng rãi trong phát triển web để tạo ra các ứng dụng web nâng cao khả năng tương tác. Bằng cách sử dụng DOM mà các nhà phát triển có thể thay đổi nội dung, cấu trúc và kiểu dáng của trang web dựa trên sự tương tác của người dùng.

HTML DOM là gì?

HTML DOM (Document Object Model) là một yếu tố quan trọng trong quá trình tương tác với trang web HTML. Nền tảng đại diện cho cấu trúc dữ liệu của trang web HTML dưới dạng một cây đối tượng. Trong đó, mỗi phần tử HTML trên trang web được biểu diễn bằng một đối tượng trong DOM.

Hệ thống tương tác trên trang web

Nhờ vào HTML DOM, người phát triển web có thể tương tác với các phần tử HTML. Các hoạt động tiêu biểu chính là thay đổi nội dung, thuộc tính hoặc kiểu dáng của chúng và tạo ra các phản ứng động khi người dùng tương tác với trang web.

Ví dụ, thông qua HTML DOM giúp bạn có thể thay đổi màu sắc, kích thước và nội dung của một phần tử HTML. Điều này diễn ra khi người dùng click vào nút cài đặt sẵn hoặc thậm chí tải thêm dữ liệu từ máy chủ mà không cần tải lại trang web.

HTML DOM cung cấp API (Interface Lập trình Ứng dụng) mạnh mẽ cho việc tương tác với trang web HTML. Công nghệ được sử dụng rộng rãi trong lập trình web để tạo ra các trang web tương tác và động.

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

Nút

Như đã đề cập trong phần trên, mỗi phần tử HTML trên trang web được biểu diễn bằng một "nút" trong cây DOM. Cấu trúc cây DOM bắt đầu với một nút gốc, đại diện cho thẻ <html> trong tài liệu HTML. Từ nút gốc, mọi phần tử khác trên trang web như <head>, <body> và các phần tử HTML khác đều là con của nút gốc.

Các phần tử bên trong cấu trúc

Nút phần tử (Element Node): Đại diện cho các thẻ HTML trên trang web, chẳng hạn như <div>, <p>, <a>...
Nút văn bản (Text Node): Chứa văn bản hoặc nội dung không phải là thẻ HTML, nằm bên trong một phần tử.
Nút thuộc tính (Attribute Node): Đại diện cho các thuộc tính của một phần tử HTML, chẳng hạn như id, class, href...
Nút comment: Đại diện cho các comment trong mã nguồn HTML.

Mô hình cây DOM phản ánh cấu trúc cơ bản của tài liệu HTML. Nền tảng cho phép người phát triển tương tác với trang web một cách linh động thông qua mã JavaScript để thay đổi, thêm hoặc xóa các nút trong cây DOM.

Quan hệ giữa các nút

Các nút trong DOM được tổ chức theo mối quan hệ cha con (parent-child relationship) và mối quan hệ anh em (sibling relationship):

Theo dõi các mối quan hệ chung

Mối quan hệ cha con (parent-child relationship): Mối quan hệ giữa các nút cha và nút con trong cây DOM. Một nút cha có thể có nhiều nút con và mỗi nút con chỉ có một nút cha.
Mối quan hệ anh em (sibling relationship): Mối quan hệ giữa các nút cùng có một nút cha. Nếu hai nút cùng có một nút cha, chúng được gọi là anh em. Các nút anh em đều có cùng một nút cha và trực tiếp đứng cạnh nhau trong cây DOM.

Từ quan hệ giữa các nút giúp chúng ta xác định cơ sở truy cập và thao tác với các phần tử trong trang web thông qua mã JavaScript. Bằng cách sử dụng các mối quan hệ này, người phát triển có thể duyệt qua cây DOM để thay đổi thuộc tính, nội dung và cấu trúc của trang web theo cách hiệu quả hơn.

Phân biệt các loại DOM trong Javascript

Trong JavaScript áp dụng một số loại DOM mà bạn có thể thường xuyên gặp phải khi làm việc với mã nguồn và tương tác với trang web. Dưới đây là một số loại DOM quan trọng:

Các loại ngôn ngữ được sử dụng rộng rãi

Document Object: Đại diện cho toàn bộ tài liệu HTML và cung cấp phương thức để tương tác với toàn bộ trang web. Bạn có thể truy cập vào Document Object thông qua biến document.
Element Object: Đại diện cho một phần tử HTML trên trang web, chẳng hạn như <div>, <p>, <a>. Element Object cung cấp phương thức và thuộc tính để tương tác và thay đổi các phần tử trên trang web.
Node Object: Là một lớp cơ sở cho cả Element Object, Text Object, Comment Object. Mọi thứ trong cây DOM đều là Node Object. Node Object cung cấp các phương thức và thuộc tính chung cho tất cả các loại nút trong DOM.
Event Object: Khi xảy ra sự kiện trên trang web, JavaScript tạo ra một đối tượng sự kiện để đại diện cho sự kiện đó. Đối tượng sự kiện cung cấp thông tin về sự kiện và cho phép người phát triển xử lý các sự kiện như click, hover, submit.

Các loại DOM này cung cấp cơ sở tiếp cận rõ ràng và mạnh mẽ cho việc tương tác với trang web trong JavaScript. Công nghệ cho phép người lập trình thay đổi và điều khiển nội dung của trang web vô cùng tiện lợi.

Hướng dẫn thực hiện thao tác với DOM

Người dùng có thể sử dụng rất nhiều thuộc tính và phương pháp khi làm việc với DOM trong JavaScript. Dưới đây giới thiệu danh sách các thuộc tính và phương thức quan trọng:

Những loại hình thuộc tính trung lập

Thuộc tính phổ biến của các phần tử DOM

innerHTML: Thuộc tính này chứa hoặc cho phép bạn thiết lập HTML nội dung bên trong một phần tử.
textContent: Chứa hoặc cho phép bạn thiết lập văn bản thuần túy bên trong một phần tử, không bao gồm HTML.
id: Thuộc tính này cung cấp ID duy nhất cho phần tử.
className: Chứa các lớp của phần tử.

Thuộc tính truy xuất cơ sở DOM

Node.parentNode: Tham chiếu đến nút cha của nút hiện tại, và nút cha này là duy nhất cho mỗi nút.
Node.childNodes: Tham chiếu đến các nút con trực tiếp của nút hiện tại, và kết quả là một mảng các đối tượng. Lưu ý rằng, các nút con không bị phân biệt bởi loại nút nên kết quả mảng trả về có thể bao gồm 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à tương đương với việc gọi 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à tương đương với việc gọi Node.childNodes[Element.childNodes.length-1].
Node.nextSibling: Tham chiếu đến nút anh em nằm liền kề sau với nút hiện tại.
Node.previousSibling: Tham chiếu đến nút anh em nằm liền kề trước với nút hiện tại.

Thuộc tính được dùng trong hệ

Chọn lọc các thuộc tính bên ngoài

parentNode: Tham chiếu đến nút cha của nút hiện tại.
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, và kết quả là một mảng các đối tượng.
firstChild: Tham chiếu đến 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 liền kề sau với nút hiện tại.
previousSibling: Tham chiếu đến nút anh em liền kề trước với nút hiện tại.

Phương thức phổ biến của các phần tử DOM

querySelector: Phương thức này trả về phần tử con đầu tiên phù hợp với một bộ chọn CSS cụ thể.
getElementById: Phương thức này trả về phần tử với ID cụ thể.
getElementsByClassName: Phương thức này trả về một danh sách các phần tử chứa một lớp cụ thể.
addEventListener: Phương thức này cho phép bạn đính kèm một bộ xử lý sự kiện cho một phần tử, cho phép tương tác với các sự kiện như click, hover.

Quy trình xuất các phần tử trong DOM mô hình

Để xuất các phần tử trong mô hình DOM, bạn có thể sử dụng các phương thức và thuộc tính DOM trong JavaScript. Dưới đây là một ví dụ về cách xuất các phần tử trong DOM:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>DOM Example</title>

</head>

<body>

<div id="container">

<p>Hello, world!</p>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

</div>

<script src="app.js"></script>

</body>

</html>

JavaScript (app.js)

// Lấy phần tử theo ID

const container = document.getElementById('container');

console.log(container);

// Lấy tất cả phần tử con của một phần tử

const listItems = container.getElementsByTagName('li');

console.log(listItems);

// Lấy tất cả phần tử con của một phần tử dựa trên CSS selector

const paragraphs = container.querySelectorAll('p');

console.log(paragraphs);

// Thêm sự kiện click cho phần tử

container.addEventListener('click', function() {

alert('Container clicked!');

});

Trong ví dụ trên, chúng ta đã sử dụng document.getElementById để lấy phần tử có ID là "container", getElementsByTagName để lấy tất cả các phần tử <li> con của phần tử "container", querySelectorAll để lấy tất cả các phần tử <p> con của phần tử "container" và addEventListener để thêm sự kiện click cho phần tử "container".

Qua đây cho thấy người dùng có thể sử dụng các phương thức và thuộc tính DOM để truy cập, triển khai thao tác với các phần tử trong mô hình DOM theo cách tương tự.

Một số kỹ thuật truy xuất phần tử khác

Để truy cập các phần tử trong mô hình DOM, bạn có thể tham khảo thêm một số kỹ thuật dưới đây:

Nhiều công nghệ truy xuất khác được ứng dụng

Truy cập phần tử theo ID:

Sử dụng phương thức document.getElementById để lấy phần tử dựa trên ID.

Ví dụ:

const element = document.getElementById('myElementId');

Truy cập phần tử theo lớp:

Sử dụng phương thức document.getElementsByClassName để lấy tất cả phần tử có cùng lớp.

Ví dụ:

const elements = document.getElementsByClassName('myClass');

Truy cập phần tử theo thẻ

Sử dụng phương thức document.getElementsByTagName để lấy tất cả các phần tử có cùng thẻ.

Ví dụ:

const elements = document.getElementsByTagName('div');

Truy cập phần tử theo các trình lựa chọn CSS

Sử dụng phương thức document.querySelector hoặc document.querySelectorAll để truy cập phần tử dựa trên trình lựa chọn CSS.

Ví dụ:

const element = document.querySelector('.myClass');

// hoặc

const elements = document.querySelectorAll('p');

Tạm kết

Như vậy là FPT Shop đã giúp bạn đọc cập nhật rất nhiều kiến thức quan trọng liên quan đến DOM. Hy vọng bạn đọc có thể nắm bắt đặc điểm, cấu trúc và những cơ sở ứng dụng nền tảng hiệu quả.

Xem thêm:

Tại FPT Shop cung cấp nhiều mẫu máy tính xách tay và điện thoại đến từ các thương hiệu uy tín. Bạn có thể ghé thăm cửa hàng hoặc theo dõi trang chủ để tìm kiếm sản phẩm giá tốt và đáp ứng nhu cầu công việc hiệu quả.