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.
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:
<!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
- 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ư
<div>,<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:
<!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 đề".
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ằngtitleElementlà một phần tử thuộc loạiHTMLHeadingElement, giúp bạn truy cập thuộc tínhtextContentmà 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:
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.
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ànhHTMLInputElementđể TypeScript hiểutargetcó 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:
Bài viết liên quan
React Toastify là gì? Hướng dẫn sử dụng Toast Notification với React Toastify
Nov 21, 2024 • 7 min read
Hướng dẫn sử dụng Zustand trong NextJS
Nov 21, 2024 • 8 min read
Lazy Loading: Kỹ thuật Tối ưu Hiệu suất Website
Nov 17, 2024 • 14 min read
Hướng dẫn sử dụng Redux Toolkit và Redux Saga trong dự án React
Nov 15, 2024 • 10 min read
WebGL là gì? Hướng dẫn tạo đồ họa đơn giản với WebGL
Nov 13, 2024 • 7 min read
Test-Driven Development (TDD) là gì? Hướng dẫn thực hành TDD
Nov 13, 2024 • 6 min read