Articles
Giới thiệu về TypeScript
Các lớp được sử dụng để thao tác DOM/Xử lý sự kiện trong TypeScript

Các lớp được sử dụng để thao tác DOM/Xử lý sự kiện trong TypeScript

Trong bài viết này, chúng tôi sẽ giải thích các lớp được sử dụng để thao tác DOM/xử lý sự kiện trong TypeScript.

Bạn có thể tìm hiểu về lớp Document, các lớp Element và NodeList, và các lớp liên quan đến sự kiện thông qua các ví dụ về mã.

YouTube Video

Các lớp được sử dụng để thao tác DOM/Xử lý sự kiện trong TypeScript

Để thao tác DOM và xử lý sự kiện trong TypeScript, các giao diện của Document Object Model (DOM) được sử dụng chủ yếu. Trong thao tác DOM và xử lý sự kiện, các lớp và giao diện JavaScript tiêu chuẩn được sử dụng, nhưng trong TypeScript, thông tin kiểu được thêm vào, cho phép hoạt động an toàn hơn.

Dưới đây mô tả các lớp và giao diện thường được sử dụng trong thao tác DOM và xử lý sự kiện.

Các lớp/giao diện chính được sử dụng cho thao tác DOM

Document

Document là một đối tượng đại diện cho các tài liệu HTML hoặc XML. Được sử dụng để truy cập cây DOM hoặc tìm kiếm các phần tử.

Ví dụ mã 
 1// Get the element using getElementById
 2const element = document.getElementById('myElement') as HTMLDivElement | null;
 3if (element) {
 4    element.textContent = 'Hello, TypeScript!';
 5}
 6
 7// querySelector can specify a generic type for more precise typing
 8const button = document.querySelector<HTMLButtonElement>('#myButton');
 9button?.addEventListener('click', () => {
10    console.log('Button clicked!');
11
12    // Create a new element dynamically
13    const newDiv = document.createElement('div');
14    newDiv.textContent = 'New element created!';
15    document.body.appendChild(newDiv);
16});
Các phương thức chính
  • getElementById lấy một phần tử có thuộc tính id được chỉ định.
  • querySelector lấy một phần tử bằng cách sử dụng bộ chọn CSS.
  • createElement tạo một phần tử HTML mới.
Giải thích mã nguồn
  • Đoạn mã này lấy một phần tử có thuộc tính id bằng cách sử dụng getElementById và thay đổi nội dung văn bản của nó. Nó cũng lấy một phần tử nút bằng cách sử dụng querySelector và thêm bộ lắng nghe sự kiện nhấp chuột. Khi nhấn chuột, nó tạo một phần tử div mới bằng cách sử dụng createElement và thêm nó vào nội dung chính. Sử dụng generics và kiểm tra kiểu để đảm bảo an toàn kiểu trong quá trình thao tác DOM.

Element

Element là một giao diện đại diện cho các phần tử HTML riêng lẻ trong DOM. Nó được sử dụng phổ biến nhất khi thao tác với DOM.

Ví dụ mã 
 1// Use querySelector to manipulate element properties
 2const divElement = document.querySelector<HTMLDivElement>('.myClass');
 3if (divElement) {
 4    // Set innerHTML
 5    divElement.innerHTML = '<strong>Hello with innerHTML!</strong>';
 6
 7    // Set textContent
 8    divElement.textContent = 'Hello with textContent!';
 9
10    // Add a new class
11    divElement.classList.add('newClass');
12
13    // Set a custom attribute
14    divElement.setAttribute('data-role', 'content');
15}
Các thuộc tính và phương thức chính
  • Thuộc tính innerHTML cho phép bạn thiết lập hoặc lấy nội dung HTML của một phần tử.
  • Thuộc tính textContent cho phép bạn thiết lập hoặc lấy nội dung văn bản của một phần tử.
  • classList là một thuộc tính để thao tác với các lớp, cho phép bạn thêm, xóa và chuyển đổi các lớp.
  • Phương thức setAttribute thiết lập một thuộc tính cho một phần tử.
Giải thích mã nguồn
  • Đoạn mã này minh họa ví dụ về việc thiết lập nội dung bằng innerHTML và textContent cho các phần tử lấy bằng querySelector, thêm các lớp bằng classList, và thiết lập thuộc tính tùy chỉnh với setAttribute. Các thao tác được thực hiện một cách an toàn kiểu nhờ sử dụng generics.

NodeList và HTMLCollection

NodeList và HTMLCollection đại diện cho các tập hợp chứa nhiều phần tử DOM. Ví dụ, querySelectorAll trả về một NodeList, và getElementsByClassName trả về một HTMLCollection.

Ví dụ mã 
 1// NodeList supports forEach iteration
 2const divs: NodeListOf<HTMLDivElement> = document.querySelectorAll('div');
 3divs.forEach(div => {
 4    div.textContent = 'Updated!';
 5});
 6
 7// HTMLCollection is not directly iterable, convert it to an array
 8const spans: HTMLCollectionOf<HTMLSpanElement> =
 9    document.getElementsByClassName('span-item') as HTMLCollectionOf<HTMLSpanElement>;
10Array.from(spans).forEach(span => {
11    span.textContent = 'Changed!';
12});
  • Đoạn mã này minh họa việc thao tác trực tiếp với NodeList bằng forEach và chuyển đổi HTMLCollection sang một mảng để lặp qua.

Các lớp/giao diện chính được sử dụng cho xử lý sự kiện

Event

Event là lớp cơ bản cho tất cả các sự kiện xảy ra trong DOM. Nhiều sự kiện khác nhau như nhấp chuột, nhập dữ liệu và tải trang được mở rộng từ lớp Event.

Ví dụ mã 
 1const form = document.querySelector<HTMLFormElement>('#myForm');
 2form?.addEventListener('submit', (event: Event) => {
 3    // target refers to the element that triggered the event (the form)
 4    const target = event.target as HTMLFormElement;
 5
 6    // type shows the kind of event, e.g., "submit"
 7    console.log(`Event type: ${event.type}`);
 8
 9    // preventDefault disables the default form submission
10    event.preventDefault();
11    console.log('Form submission prevented.');
12});
Các thuộc tính và phương thức chính
  • Thuộc tính target đại diện cho phần tử (EventTarget) nơi sự kiện xảy ra.
  • type đại diện cho loại sự kiện đã xảy ra, như là click hoặc input.
  • Phương thức preventDefault hủy hành động mặc định của sự kiện.
Giải thích mã nguồn
  • Đoạn mã này minh họa cách thêm bộ lắng nghe sự kiện submit cho một biểu mẫu. target chỉ đến phần tử biểu mẫu nơi sự kiện xảy ra, và type chỉ loại sự kiện (trong trường hợp này là "submit"). Bằng cách gọi phương thức preventDefault, bạn có thể vô hiệu hóa các hành vi mặc định của việc gửi biểu mẫu như chuyển trang hoặc tải lại trang. Thay vào đó, một quá trình tùy chỉnh—ghi nhật ký kết quả—được thực hiện ở đây.

MouseEvent

MouseEvent đại diện cho các sự kiện liên quan đến thao tác chuột. Các sự kiện chuột như click và mousemove sử dụng lớp này.

Ví dụ mã 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • Đoạn mã này là ví dụ về sử dụng MouseEvent để ghi lại tọa độ của chuột.
Các Thuộc Tính Chính
  • clientX là tọa độ X của con trỏ chuột trong trang.
  • clientY là tọa độ Y của con trỏ chuột trong trang.
  • button chỉ định nút chuột nào đã được nhấn. 0 là nút bên trái, 1 là nút giữa, và 2 là nút bên phải.

KeyboardEvent

KeyboardEvent đại diện cho các sự kiện liên quan đến thao tác bàn phím. Các sự kiện keydown và keyup thuộc danh mục này.

Ví dụ mã 
 1document.addEventListener('keydown', (event: KeyboardEvent) => {
 2    // Show the key name (e.g., "Enter", "a")
 3    console.log(`Key pressed: ${event.key}`);
 4
 5    // Show the physical key code (e.g., "Enter", "KeyA")
 6    console.log(`Key code: ${event.code}`);
 7
 8    // Check if Alt/Ctrl/Shift key was pressed
 9    console.log(`Alt pressed: ${event.altKey}`);
10    console.log(`Ctrl pressed: ${event.ctrlKey}`);
11    console.log(`Shift pressed: ${event.shiftKey}`);
12
13    if (event.key === 'Enter') {
14        console.log('Enter was pressed');
15    }
16});
Các Thuộc Tính Chính
  • key là tên của phím đã được nhấn, như là Enter hoặc a.
  • code là mã tương ứng với một phím trên bàn phím.
  • altKey, ctrlKey và shiftKey là các thuộc tính cho biết các phím Alt, Ctrl hoặc Shift đã được nhấn hay chưa.
Giải thích mã nguồn
  • Đoạn mã này sử dụng KeyboardEvent để ghi lại tên của phím đã nhấn (key), mã phím tương ứng (code), cũng như kiểm tra xem các phím bổ trợ (altKey, ctrlKey, shiftKey) có được nhấn hay không. Ngoài ra, nó còn thực hiện một hành động đặc biệt khi phím Enter được nhấn.

FocusEvent

FocusEvent liên quan đến các sự kiện lấy hoặc mất tiêu điểm. Các sự kiện focus và blur thuộc danh mục này.

Ví dụ mã 
 1const inputElement = document.getElementById('myInput');
 2if (inputElement) {
 3    inputElement.addEventListener('focus', (event: FocusEvent) => {
 4        console.log('Input focused');
 5    });
 6
 7    inputElement.addEventListener('blur', (event: FocusEvent) => {
 8        console.log('Input lost focus');
 9    });
10}
  • Đoạn mã này là ví dụ về việc sử dụng FocusEvent để phát hiện và ghi lại khi một trường nhập liệu được focus hoặc mất focus.

Gõ Kiểu Trong TypeScript

Khi sử dụng TypeScript, việc kiểm tra kiểu trong thao tác DOM và xử lý sự kiện được cải thiện. Dưới đây là các ví dụ về thao tác DOM và xử lý sự kiện an toàn kiểu trong TypeScript.

Trình Nghe Sự Kiện Được Gõ Kiểu

Khi thêm trình nghe sự kiện, việc chỉ định loại sự kiện thực hiện kiểm tra kiểu và ngăn chặn truy cập vào các thuộc tính không hợp lệ.

1const input = document.querySelector<HTMLInputElement>('#myInput');
2// Event listener with explicit type annotation for safety
3input?.addEventListener('input', (event: Event) => {
4    // event.target is EventTarget, so it needs to be cast to the correct type
5    const target = event.target as HTMLInputElement;
6    console.log(`Current value: ${target.value}`);
7});
  • Đoạn mã này là ví dụ về việc sử dụng một bộ lắng nghe sự kiện có kiểu để xử lý sự kiện nhập liệu và lấy, ghi lại giá trị hiện tại của trường nhập một cách an toàn.

Xử Lý Sự Kiện Tổng Quát

Sử dụng generics trong TypeScript, bạn có thể thực hiện xử lý sự kiện tổng quát hỗ trợ nhiều loại sự kiện khác nhau.

 1// Generic event handler function
 2function handleEvent<T extends Event>(event: T) {
 3    console.log(`Event type: ${event.type}`);
 4    if (event.target instanceof HTMLElement) {
 5        console.log(`Target element: ${event.target.tagName}`);
 6    }
 7}
 8
 9const input = document.querySelector<HTMLInputElement>('#myInput');
10input?.addEventListener('input', handleEvent);
  • Đoạn mã này là ví dụ về một bộ xử lý sự kiện sử dụng generic, ghi lại loại sự kiện và tên thẻ của phần tử đích.

Tóm tắt

Trong TypeScript, các kiểu được áp dụng vào các API DOM tiêu chuẩn trong thao tác DOM và xử lý sự kiện, tăng cường độ an toàn và dễ đọc của mã. Bằng cách sử dụng các lớp như Document và Element, và các lớp liên quan đến sự kiện như Event, MouseEvent, và KeyboardEvent, việc phát triển an toàn kiểu là có thể. Ngoài ra, việc sử dụng querySelector<T>() hoặc HTMLCollectionOf<T> cho phép thao tác DOM an toàn về kiểu dữ liệu.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Thao tác DOM trong TypeScript