Articles
TypeScript 簡介
在 TypeScript 中操作 DOM

在 TypeScript 中操作 DOM

本文將說明如何在 TypeScript 中操作 DOM。

你將通過程式碼範例學習如何操作 DOM 元素，以及如何向 DOM 樹新增或移除元素。

YouTube Video

在 TypeScript 中操作 DOM

在 TypeScript 中操作 DOM 與 JavaScript 類似，但 TypeScript 提供了型別檢查，使操作更加安全。DOM（文件物件模型）是一種用於以程式方式操作 HTML 和 XML 文件的物件模型。它允許你存取瀏覽器中顯示的頁面、新增或移除元素，或更改樣式。

讓我們介紹在 TypeScript 中操作 DOM 的基本方法。

獲取 DOM 元素

使用 document 物件獲取 HTML 元素。常用的方法如下：。

  1. document.getElementById document.getElementById 取得具有指定 ID 屬性的元素。
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById 會取得具有指定 ID 的元素，並且如果該元素存在，可以存取其內容。
  1. document.querySelector document.querySelector 取得符合 CSS 選擇器的第一個元素。
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector 會取得符合指定 CSS 選擇器的第一個元素，並且如果該元素存在，可以存取其內容。
  1. document.querySelectorAll document.querySelectorAll 取得符合 CSS 選擇器的所有元素。
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll 會取得符合指定 CSS 選擇器的所有元素，並且可以透過迭代方式存取它們的內容。

元素型別斷言

在 TypeScript 中，明確斷言元素的型別可以讓你使用更專屬於該元素的方法和屬性。

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • as 關鍵字是 TypeScript 裡的型別斷言運算子，用來明確告訴編譯器將某個值視為特定型別。
  • 在 TypeScript 中，您可以使用型別斷言將取得的元素當作特定型別來處理，並存取該型別特有的屬性或方法。

操作 DOM

透過元素的屬性操作 DOM。這使您能夠靈活地控制文字或屬性的變化、套用樣式，以及更新顯示內容。

  1. 更改元素文字

    你可以使用元素的 textContent 或 innerHTML 來更改其文字或 HTML 內容。

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • 您可以使用元素的 textContent 或 innerHTML 屬性來變更顯示的文字或 HTML 內容。

  1. 更改元素樣式

    你可以透過元素的 style 屬性修改行內樣式。

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • 這段程式碼會取得特定元素，將其文字顏色改為藍色，並設為 20px 的字型大小。

  1. 更改元素屬性

    如果要更改元素的屬性，可以使用 setAttribute。

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • 這段程式碼會將頁面上第一個連結元素的 href 屬性改為 https://example.com。

  1. 操作元素類別

    可以透過 classList 來新增或移除元素類別。

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • 這段程式碼會為特定元素加入 active 類別並移除 inactive 類別。

新增和移除 DOM 元素

您也可以新增元素或移除現有的元素。這使得您可以根據用戶操作或應用程式狀態動態地改變頁面結構。

  1. 建立及新增新元素

    使用 document.createElement 來建立新元素並新增至 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
  • 這段程式碼會建立一個新的 <div> 元素，設定其文字，並加到頁面的 <body> 中。

  1. 移除元素

    要移除元素，可以使用 removeChild 或 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}
  • 這段程式碼說明如何從父元素移除特定子元素，以及如何直接將該元素移除。

新增事件

在 TypeScript 中，你可以為元素新增事件監聽器，根據使用者互動執行對應操作。

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}
  • 這段程式碼會加入事件監聽器，當按鈕被點擊時，在主控台顯示訊息。
  • 利用 addEventListener，你可以監聽和處理各種事件，例如點擊、滑鼠移動及鍵盤輸入等。

在 TypeScript 操作 DOM 時的注意事項

使用 TypeScript 操作 DOM 時，留意元素的型別定義和 null 檢查，有助於防止錯誤並撰寫更健壯的程式碼。

  1. 空值檢查

    由於 DOM 元素可能不存在，建議在 TypeScript 操作元素前先進行空值（null）檢查。

  2. 明確型別斷言

    當操作特定元素（例如 HTMLInputElement）時，通常會用斷言（as）指定型別，並使用該元素特有的屬性（如 value）。

只要注意這些重點，便能將 JavaScript 的彈性與 TypeScript 的型別安全性結合，讓 DOM 操作更加安全且可預測。

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

YouTube Video

TypeScript 中的 window 對象用於 DOM 操作/事件處理的 TypeScript 類別