Articles
TypeScript 簡介
用於 DOM 操作/事件處理的 TypeScript 類別

用於 DOM 操作/事件處理的 TypeScript 類別

在本文中，我們將解釋 TypeScript 用於 DOM 操作/事件處理的類別。

您可以通過程式碼範例學習 Document 類、Element 和 NodeList 類，以及各種與事件相關的類別。

YouTube Video

用於 DOM 操作/事件處理的 TypeScript 類別

在 TypeScript 中進行 DOM 操作和事件處理時，主要使用 Document Object Model (DOM) 接口。在 DOM 操作和事件處理中，會使用標準的 JavaScript 類別和接口，但在 TypeScript 中，它們被添加了類型訊息，使操作更加安全。

以下描述了在 DOM 操作和事件處理中常用的類別和接口。

DOM 操作中使用的主要類別/接口

Document

Document 是代表 HTML 或 XML 文件的對象。用於訪問 DOM 樹或查找元素。

程式碼範例 
 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});
主要方法
  • getElementById 會取得具有指定 id 屬性的元素。
  • querySelector 會使用 CSS 選擇器來取得元素。
  • createElement 可建立新的 HTML 元素。
程式碼說明
  • 此程式碼使用 getElementById 取得具有 id 屬性的元素並更改其文字內容。它還使用 querySelector 取得按鈕元素並加入點擊（click）事件監聽器。當點擊時，它會使用 createElement 創建一個新的 div 元素並將其加入主要內容區域。在 DOM 操作過程中，使用泛型與型別斷言來確保型別安全性。

Element

Element 是代表 DOM 中單個 HTML 元素的接口。在操作 DOM 時最常使用。

程式碼範例 
 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}
主要屬性和方法
  • innerHTML 屬性可用來設置或取得元素的 HTML 內容。
  • textContent 屬性可用來設置或取得元素的文字內容。
  • 「classList」是一個用來操作類別的屬性，允許你新增、移除及切換類別。
  • setAttribute 方法可於元素上設定屬性。
程式碼說明
  • 此程式碼展示了如何對經 querySelector 取得的元素使用 innerHTML 與 textContent 設定內容，利用 classList 添加樣式類別，並用 setAttribute 設定自訂屬性。所有操作都通過泛型以型別安全的方式執行。

NodeList 和 HTMLCollection

NodeList 和 HTMLCollection 是包含多個 DOM 元素的集合。例如，querySelectorAll 返回一個 NodeList，而 getElementsByClassName 返回一個 HTMLCollection。

程式碼範例 
 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});
  • 這段程式碼示範如何直接用 forEach 操作 NodeList，以及將 HTMLCollection 轉為陣列來遍歷。

事件處理中使用的主要類別/接口

Event

Event 是 DOM 中所有事件的基類。各種事件（如點擊、輸入和頁面加載）都繼承自 Event 類。

程式碼範例 
 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});
主要屬性和方法
  • target 屬性代表事件發生的元素（EventTarget）。
  • type 代表所發生事件的類型，如 click 或 input。
  • preventDefault 方法取消事件的預設行為。
程式碼說明
  • 此程式碼示範如何為表單新增 submit 事件監聽器。target 指向發生事件的表單元素，而 type 代表事件類型（在本例中是 "submit"）。透過呼叫 preventDefault 方法，您可以防止預設的表單提交行為，例如頁面跳轉或重新載入。取而代之的是，這裡會執行自訂流程，例如輸出日誌。

MouseEvent

MouseEvent 表示與滑鼠操作相關的事件。滑鼠事件（例如：click 和 mousemove）使用此類別。

程式碼範例 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • 這段程式碼是使用 MouseEvent 記錄滑鼠座標的範例。
主要屬性
  • clientX 表示滑鼠指標在頁面內的 X 座標。
  • clientY 表示滑鼠指標在頁面內的 Y 座標。
  • button 表示按下的是哪個滑鼠按鈕。0 代表左鍵，1 代表中鍵，2 代表右鍵。

KeyboardEvent

KeyboardEvent 表示與鍵盤操作相關的事件。keydown 和 keyup 事件屬於此類別。

程式碼範例 
 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});
主要屬性
  • key 為被按鍵的名稱，例如 Enter 或 a。
  • code 是對應於鍵盤上某個按鍵的代碼。
  • altKey、ctrlKey 和 shiftKey 屬性用來判斷是否按下了 Alt、Ctrl 或 Shift 鍵。
程式碼說明
  • 此程式碼使用 KeyboardEvent 紀錄被按下的按鍵名稱（key）、對應的鍵碼（code），以及是否有按下修飾鍵（altKey、ctrlKey、shiftKey）。同時，當按下 Enter 鍵時會執行特殊動作。

FocusEvent

FocusEvent 與獲得或失去焦點的事件相關。focus 和 blur 事件屬於此類別。

程式碼範例 
 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}
  • 這段程式碼範例使用 FocusEvent，用來偵測及記錄輸入欄位取得或失去焦點的時機。

在 TypeScript 中的類型化

使用 TypeScript 時，DOM 操作和事件處理的類型檢查將得到增強。以下是 TypeScript 中類型安全的 DOM 操作和事件處理範例。

類型化的事件監聽器

添加事件監聽器時，指定事件類型可以進行類型檢查並防止訪問錯誤的屬性。

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});
  • 這段程式碼是使用型別化事件監聽器來處理輸入事件，安全地取得並記錄輸入欄位當前值的範例。

通用事件處理

在 TypeScript 中使用泛型，可以進行支持多種事件類型的通用事件處理。

 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);
  • 這段程式碼範例為使用泛型的通用事件處理器，會記錄事件型別及目標元素的標籤名稱。

總結

在 TypeScript 中，對 DOM 操作和事件處理時標準 DOM API 應用了類型，增強了代碼的安全性和可讀性。通過使用例如 Document 和 Element 的類別，以及 Event、MouseEvent 和 KeyboardEvent 等與事件相關的類別，可以實現類型安全的開發。此外，使用 querySelector<T>() 或 HTMLCollectionOf<T> 可以實現型別安全的 DOM 操作。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

在 TypeScript 中操作 DOMTypeScript 中的 Shadow DOM