Articles
TypeScript简介
用于 TypeScript 中 DOM 操作/事件处理的类

用于 TypeScript 中 DOM 操作/事件处理的类

在本文中，我们将讲解 TypeScript 中用于 DOM 操作/事件处理的类。

您可以通过代码示例学习Document类、Element和NodeList类，以及各种与事件相关的类。

YouTube Video

用于 TypeScript 中 DOM 操作/事件处理的类

在 TypeScript 中进行 DOM 操作和事件处理时，主要使用 文档对象模型 (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 获取按钮元素，并添加点击事件监听器。点击时，它会使用 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中的DOM操作TypeScript中的Shadow DOM