Articles
Giới thiệu về TypeScript
Thao tác DOM trong TypeScript

Thao tác DOM trong TypeScript

Bài viết này giải thích về cách thao tác DOM trong TypeScript.

Bạn sẽ học cách thao tác với các phần tử DOM, cũng như cách thêm hoặc xóa phần tử khỏi cây DOM thông qua các ví dụ mã nguồn.

YouTube Video

Thao tác DOM trong TypeScript

Việc thao tác DOM trong TypeScript được thực hiện tương tự như JavaScript, nhưng TypeScript cung cấp kiểm tra kiểu, giúp các thao tác an toàn hơn. DOM (Document Object Model) là một mô hình đối tượng dùng để thao tác các tài liệu HTML và XML thông qua lập trình. Nó cho phép bạn truy cập các trang đang hiển thị trong trình duyệt, thêm hoặc xóa phần tử, hoặc thay đổi kiểu hiển thị.

Chúng ta hãy giới thiệu các phương pháp cơ bản để thao tác DOM bằng TypeScript.

Lấy các phần tử DOM

Sử dụng đối tượng document để lấy các phần tử HTML. Các phương pháp sau thường được sử dụng:.

  1. document.getElementById document.getElementById lấy phần tử với thuộc tính ID đã chỉ định.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById lấy phần tử với ID đã chỉ định và cho phép bạn truy cập nội dung của nó nếu nó tồn tại.`.
  1. document.querySelector document.querySelector lấy phần tử đầu tiên phù hợp với bộ chọn CSS.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector lấy phần tử đầu tiên phù hợp với bộ chọn CSS đã chỉ định và cho phép bạn truy cập nội dung của nó nếu nó tồn tại.`.
  1. document.querySelectorAll document.querySelectorAll lấy tất cả các phần tử phù hợp với bộ chọn CSS.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll lấy tất cả các phần tử phù hợp với bộ chọn CSS đã chỉ định và cho phép bạn truy cập nội dung của chúng thông qua việc lặp.`.

Xác minh kiểu phần tử

Trong TypeScript, việc xác định rõ ràng kiểu phần tử cho phép bạn sử dụng các thuộc tính và phương thức cụ thể hơn.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • as là toán tử xác nhận kiểu trong TypeScript, được sử dụng để nói rõ với trình biên dịch rằng hãy xử lý một giá trị như một kiểu cụ thể.
  • Trong TypeScript, bạn có thể sử dụng xác nhận kiểu để xử lý phần tử lấy được như một kiểu cụ thể và truy cập thuộc tính hoặc phương thức dành riêng cho kiểu đó.

Thao tác với DOM

Việc thao tác DOM được thực hiện thông qua các thuộc tính của phần tử. Điều này cho phép bạn linh hoạt kiểm soát việc thay đổi văn bản hoặc thuộc tính, áp dụng kiểu dáng và cập nhật nội dung hiển thị.

  1. Thay đổi văn bản của phần tử

    Bạn có thể thay đổi văn bản hoặc HTML của một phần tử bằng thuộc tính textContent hoặc innerHTML.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • Bạn có thể sử dụng textContent hoặc innerHTML của một phần tử để thay đổi văn bản hiển thị hoặc nội dung HTML của nó.

  1. Thay đổi kiểu hiển thị của phần tử

    Bạn có thể thay đổi kiểu hiển thị nội dòng bằng thuộc tính style của phần tử.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Đoạn mã này lấy một phần tử cụ thể, đổi màu chữ của nó thành màu xanh và đặt cỡ chữ thành 20px.

  1. Thay đổi thuộc tính của phần tử

    Nếu muốn thay đổi thuộc tính của phần tử, hãy dùng setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Đoạn mã này thay đổi thuộc tính href của phần tử liên kết đầu tiên trên trang thành https://example.com.

  1. Thao tác với lớp của phần tử

    Để thêm hoặc xóa lớp của phần tử, hãy sử dụng classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Đoạn mã này thêm lớp active và xóa lớp inactive khỏi một phần tử cụ thể.

Thêm và xóa phần tử DOM

Bạn cũng có thể thêm các phần tử mới hoặc xóa những phần tử hiện có. Điều này giúp có thể thay đổi cấu trúc trang một cách linh hoạt để phản hồi lại các thao tác của người dùng hoặc trạng thái của ứng dụng.

  1. Tạo và thêm phần tử mới

    Sử dụng document.createElement để tạo một phần tử mới và thêm vào DOM.

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body
  • Đoạn mã này tạo một phần tử <div> mới, đặt văn bản cho nó và thêm nó vào <body> của trang.

  1. Xóa phần tử

    Để xóa một phần tử, hãy sử dụng phương thức removeChild hoặc remove.

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}
  • Đoạn mã này cho thấy cách xóa phần tử con cụ thể khỏi phần tử cha của nó và cách xóa trực tiếp chính phần tử đó.

Thêm sự kiện

Trong TypeScript, bạn có thể thêm bộ lắng nghe sự kiện cho các phần tử để thực hiện các hành động dựa trên tương tác của người dùng.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}
  • Đoạn mã này thêm một lắng nghe sự kiện để hiển thị thông báo trong bảng điều khiển khi nút được nhấp.
  • Bằng cách sử dụng addEventListener, bạn có thể lắng nghe và xử lý nhiều sự kiện khác nhau như nhấn chuột, di chuyển chuột và nhập bàn phím.

Những điểm cần lưu ý khi thao tác DOM trong TypeScript

Khi thao tác DOM với TypeScript, chú ý đến định nghĩa kiểu của phần tử và kiểm tra giá trị null có thể giúp ngăn ngừa lỗi và cho phép bạn viết mã nguồn vững chắc.

  1. Kiểm tra null

    Vì một phần tử DOM có thể không tồn tại, nên bạn nên kiểm tra null trước khi thao tác với các phần tử trong TypeScript.

  2. Xác minh kiểu rõ ràng

    Khi thao tác với một phần tử cụ thể (ví dụ như HTMLInputElement), bạn thường cần sử dụng xác minh kiểu (as) để chỉ định kiểu và sử dụng các thuộc tính đặc thù như value.

Ghi nhớ những điều này, thao tác DOM với TypeScript cho phép bạn viết mã an toàn và dễ dự đoán hơn bằng cách kết hợp tính linh hoạt của JavaScript với tính an toàn về kiểu của TypeScript.

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

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