TypeScript与DOM操作:深入理解相关类型及实战示例

TypeScript与DOM操作:深入理解相关类型及实战示例

基础类型介绍

Document

代表整个文档的根节点。它是所有DOM操作的起点。

示例

typescript 复制代码
const docTitle = document.documentElement.title; // 获取文档标题
document.title = "新标题"; // 设置文档标题

Element

表示一个DOM元素,是所有元素节点的基类。

示例

typescript 复制代码
const element = document.createElement("div"); // 创建一个新的div元素

HTMLElement

继承自Element,特指HTML元素,提供了针对HTML元素的特定属性和方法。

示例

typescript 复制代码
const div = document.createElement("div") as HTMLElement;
div.style.backgroundColor = "blue"; // 设置样式

NodeListHTMLCollection

  • NodeList:表示一组节点的集合,通常由querySelectorAll返回。
  • HTMLCollection:与NodeList相似,但特指HTML元素集合,通常由getElementsByTagName等方法返回。

示例

typescript 复制代码
const allDivs = document.querySelectorAll("div"); // NodeList
const firstDivs = document.getElementsByTagName("div"); // HTMLCollection

EventTarget

所有能触发事件的对象都实现了这个接口,包括ElementDocument等。

示例

typescript 复制代码
document.addEventListener("click", (event: Event) => {
    console.log("Clicked!");
});

扩展类型与自定义属性

接口扩展

TypeScript允许通过接口扩展来增强现有类型,这对于给DOM元素添加自定义属性非常有用。

示例

typescript 复制代码
interface HTMLElement {
    customAttribute: string;
}

document.body.customAttribute = "Custom Value";
console.log(document.body.customAttribute); // 输出: Custom Value

类型断言与非空断言

在处理DOM选择时,常需使用类型断言或非空断言来确保类型安全。

示例

typescript 复制代码
const myDiv = document.getElementById("myDiv") as HTMLDivElement;
// 或
const safeDiv = document.getElementById("myDiv")!; // 确信此元素存在

实战技巧

利用泛型获取精确元素类型

使用querySelectorquerySelectorAll时,可以通过泛型指定预期的元素类型。

示例

typescript 复制代码
const header = document.querySelector("header") as HTMLElement;
const paragraphs = document.querySelectorAll("p") as NodeListOf<HTMLParagraphElement>;

安全的事件处理

为事件处理器指定精确的事件类型,提高代码的可读性和安全性。

示例

typescript 复制代码
document.getElementById("myButton")!.addEventListener("click", (event: MouseEvent) => {
    const button = event.target as HTMLButtonElement;
    console.log(button.textContent);
});
相关推荐
北海-cherish2 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch3 小时前
网球馆自动预约系统的反调试
javascript·网络
2501_915909063 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist4 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师5 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang5 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。5 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡5 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_5 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含5 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js