typescript类型
1. Document
表示整个 HTML 或 XML 文档。
const doc: Document = document;
2. HTMLElement
表示所有 HTML 元素的基类。
const element: HTMLElement | null = document.getElementById('myElement');
3. HTMLInputElement
表示 元素。
const inputElement: HTMLInputElement | null = document.querySelector('input[type="text"]');
4. HTMLButtonElement
表示 元素。
const buttonElement: HTMLButtonElement | null = document.querySelector('button');
5. Event
表示所有事件的基类。
document.addEventListener('click', (event: Event) => {
console.log('Document clicked');
});
6. MouseEvent
表示鼠标事件。
document.addEventListener('click', (event: MouseEvent) => {
console.log(`Mouse clicked at (${event.clientX}, ${event.clientY})`);
});
7. KeyboardEvent
表示键盘事件。
document.addEventListener('keydown', (event: KeyboardEvent) => {
console.log(`Key pressed: ${event.key}`);
});
操作 DOM 元素
1. 获取元素
使用 document.getElementById、document.querySelector 等方法获取 DOM 元素。
const divElement: HTMLElement | null = document.getElementById('myDiv');
const inputElement: HTMLInputElement | null = document.querySelector('input[type="text"]');
2. 修改元素属性
可以直接修改元素的属性和样式。
if (divElement) {
divElement.innerText = 'Hello, TypeScript!';
divElement.style.color = 'blue';
}
if (inputElement) {
inputElement.value = 'TypeScript is awesome!';
}
3. 事件处理
为元素添加事件监听器。
if (buttonElement) {
buttonElement.addEventListener('click', (event: MouseEvent) => {
alert('Button clicked!');
});
}
类型断言
有时 TypeScript 不能自动推断出具体的 DOM 元素类型，这时可以使用类型断言。
const element = document.getElementById('myInput') as HTMLInputElement;
element.value = 'New value';
示例：综合使用 DOM 类型
以下是一个综合示例，展示如何在 TypeScript 中操作 DOM 元素并处理事件。
// 获取元素
const inputElement = document.querySelector('input[type="text"]') as HTMLInputElement;
const buttonElement = document.querySelector('button') as HTMLButtonElement;
const divElement = document.getElementById('output') as HTMLElement;
// 修改元素属性
if (inputElement) {
inputElement.value = 'TypeScript is awesome!';
}
if (divElement) {
divElement.innerText = 'Waiting for input...';
}
// 事件处理
if (buttonElement) {
buttonElement.addEventListener('click', () => {
if (inputElement && divElement) {
divElement.innerText = `You entered: ${inputElement.value}`;
}
});
}
