DOM là gì? Kiến thức nền tảng cho Web Developer

Ms Gao27/03/20256

Chia sẻ

DOM là gì? Kiến thức nền tảng cho Web Developer

Chia sẻ

DOM (Document Object Model) là một trong những khái niệm quan trọng nhất trong lập trình web. Nếu bạn đang bắt đầu học về lập trình web, bạn sẽ gặp phải DOM ở rất nhiều nơi, đặc biệt là khi làm việc với HTML và JavaScript.

Bài viết này sẽ giúp bạn hiểu rõ hơn về DOM, cách hoạt động của nó và cách tương tác với DOM bằng TypeScript.

Mục lục nội dung

1. DOM là gì?

DOM (Document Object Model) là một cấu trúc dữ liệu hình cây đại diện cho nội dung tài liệu HTML hoặc XML. Mỗi thành phần trong tài liệu, như các thẻ HTML, thuộc tính của thẻ, hoặc nội dung văn bản, đều được biểu diễn dưới dạng một “node” (nút) trong cây.

Khi trình duyệt tải một trang web, HTML của trang đó được chuyển đổi thành một cây DOM.

Điều này cho phép JavaScript và TypeScript có thể truy cập, thay đổi và tương tác với nội dung, cấu trúc của trang web. Ví dụ nếu bạn có đoạn code HTML đơn giản như thế này:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>200Lab</title>
  </head>
  <body>
    <h1>Hello, DOM!</h1>
    <p>Đây là một đoạn văn bản.</p>
  </body>
</html>

Khi trình duyệt tải tài liệu này, nó sẽ tạo ra một cây DOM trông thế này

Text

- Document
  - html
    - head
      - title ("Trang web mẫu")
    - body
      - h1 ("Hello, DOM!")
      - p ("Đây là một đoạn văn bản.")

2. Cấu trúc của DOM

DOM được tổ chức theo mô hình cây, trong đó các thành phần (node) có mối quan hệ cha – con. Dưới đây là các loại node chính trong DOM:

Document Node: đây là nút gốc của toàn bộ tài liệu. Tất cả các thành phần khác trong tài liệu đều nằm dưới Document.
Element Node: đại diện cho các thẻ HTML như <p>, <h1>, <p>,…
Text Node: đại diện cho văn bản trong các thẻ HTML. Text Node là con của Element Node.
Attribute Node: đại diện cho các thuộc tính của thẻ HTML như id, class, src,… Mỗi thẻ có thể có nhiều Attribute Node, và các Attribute này gắn với các Element Node.

3. Các cách tương tác với DOM

Bạn có thể sử dụng Javascript hay TypeScript để truy cập các thành phần DOM, thay đổi nội dung hoặc kiểu dáng của chúng, thêm hoặc xóa phần tử từ trang web đều được nha.

3.1 Truy cập và thay đổi nội dung

Để truy cập và thay đổi nội dung của phần tử HTML, bạn có thể sử dụng phương thức getElementById, querySelector, hoặc getElementsByClassName.

Ví dụ bạn có đoạn code HTML sau:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="title">Hello, 200Lab!</h1>
    <button id="changeTitleButton">Đổi tiêu đề</button>

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

Bây giờ, mình sẽ sử dụng TypeScript để thay đổi nội dung của thẻ <h1> khi người dùng nhấn vào button “Đổi tiêu đề”.

Typescript

const titleElement = document.getElementById('title') as HTMLHeadingElement;
const buttonElement = document.getElementById('changeTitleButton') as HTMLButtonElement;

buttonElement.addEventListener('click', () => {
  titleElement.textContent = '200Lab đã thay đổi tiêu đề!';
});

document.getElementById('title'): lấy phần tử HTML có id là “title”.
as HTMLHeadingElement: đảm bảo rằng titleElement là một phần tử thuộc loại HTMLHeadingElement, giúp bạn truy cập thuộc tính textContent mà không gặp lỗi.
addEventListener: thêm sự kiện click vào button, khi bạn click vào, tiêu đề sẽ thay đổi.

3.2 Thêm phần tử mới vào DOM

Bạn có thể thêm các phần tử mới vào DOM bằng cách sử dụng phương thức createElement và appendChild. Ví dụ dưới đây sẽ thêm một đoạn văn mới vào trang mỗi khi người dùng click vào button:

Typescript

const bodyElement = document.body;
const button = document.getElementById('changeTitleButton') as HTMLButtonElement;

button.addEventListener('click', () => {
  const newParagraph = document.createElement('p');
  newParagraph.textContent = '200Lab đã thêm mới vào DOM';
  
  bodyElement.appendChild(newParagraph);
});

4. Event trong DOM

Events (sự kiện) là những hành động hoặc sự thay đổi xảy ra trong tài liệu mà bạn có thể phản hồi, chẳng hạn như khi bạn click vào một button, hover vào một phần tử, hoặc khi một website được tải. Khi làm việc với DOM, việc xử lý các sự kiện là rất quan trọng.

Typescript

const inputElement = document.createElement('input');
inputElement.type = 'text';
document.body.appendChild(inputElement);

inputElement.addEventListener('input', (event) => {
  const target = event.target as HTMLInputElement;
  console.log(`Giá trị hiện tại: ${target.value}`);
});

Khi người dùng nhập vào input, sự kiện input sẽ được kích hoạt.
event.target được ép kiểu thành HTMLInputElement để TypeScript hiểu target có thuộc tính value.

5. Một số thuộc tính quan trọng của DOM

getElementById: trả về phần tử có id được chỉ định.
querySelector: trả về phần tử đầu tiên khớp với bộ chọn CSS.
appendChild: thêm một phần tử con vào phần tử cha.
removeChild: xóa một phần tử con khỏi phần tử cha.
innerHTML: lấy hoặc đặt nội dung HTML của phần tử.
textContent: lấy hoặc đặt nội dung văn bản của phần tử.

6. Kết luận

DOM là một phần không thể thiếu khi bạn là developer. Hy vọng qua bài viết này, bạn đã nắm được những kiến thức cơ bản về DOM cũng như sử dụng Typescript để thao tác với DOM.

Các bài viết liên quan: