TypeScript中扩展DOM元素与NodeList：构建自定义选择器与方法
在前端开发中，我们经常需要对DOM元素或元素集合进行批量操作，原生的DOM API虽然功能全面，但部分场景下操作不够简洁。本文将以TypeScript为例，介绍如何扩展DOM的NodeList和HTMLElement，添加自定义的选择器与方法，让日常开发更高效。
扩展NodeList：添加批量操作方法
原生的NodeList本身是类数组对象，虽然现代浏览器支持forEach等方法，但缺少一些常用的批量操作能力。我们可以通过接口扩展的方式，为NodeList添加自定义方法。
首先我们需要在TypeScript的类型声明中扩展NodeListOf接口，添加我们想要的方法定义，然后在原型上实现这些方法。下面的代码实现了两个常用方法：on用于批量绑定事件，css用于批量设置样式。
// 扩展NodeListOf接口的类型声明
interface NodeListOf<TNode extends Node> {
// 批量绑定事件
on(eventType: string, handler: (event: Event) => void): void;
// 批量设置样式
css(styles: Partial<CSSStyleDeclaration>): void;
}
// 实现on方法
NodeListOf.prototype.on = function (eventType: string, handler: (event: Event) => void): void {
this.forEach((node) => {
if (node instanceof HTMLElement) {
node.addEventListener(eventType, handler);
}
});
};
// 实现css方法
NodeListOf.prototype.css = function (styles: Partial<CSSStyleDeclaration>): void {
this.forEach((node) => {
if (node instanceof HTMLElement) {
Object.assign(node.style, styles);
}
});
};
// 使用示例
// 选中所有class为btn的元素
const buttons = document.querySelectorAll('.btn');
// 批量绑定点击事件
buttons.on('click', (e) => {
const target = e.target as HTMLElement;
console.log('点击了按钮：', target.textContent);
});
// 批量设置样式
buttons.css({
backgroundColor: '#409eff',
color: '#fff',
padding: '8px 16px'
});上面的代码中，我们首先通过接口合并的方式扩展了NodeListOf的类型定义，让TypeScript编译器能够识别我们新增的方法。然后在原型上实现具体逻辑：on方法遍历所有节点，为其中的HTMLElement实例绑定指定事件；css方法则遍历节点，批量合并传入的样式对象到元素的style属性中。
扩展HTMLElement：添加自定义选择器方法
除了扩展元素集合，我们也可以为单个HTMLElement添加自定义方法。比如实现一个链式调用的选择器方法，让元素可以在自身范围内查找子元素，同时支持链式调用其他扩展方法。
下面的代码为HTMLElement扩展了find方法，用于在元素内部查找符合条件的子元素，返回的结果同样支持我们之前给NodeList扩展的方法。
// 扩展HTMLElement接口
interface HTMLElement {
// 在元素内部查找子元素，返回NodeList
find(selector: string): NodeListOf<HTMLElement>;
}
// 实现find方法
HTMLElement.prototype.find = function (selector: string): NodeListOf<HTMLElement> {
return this.querySelectorAll(selector);
};
// 使用示例
// 获取容器元素
const container = document.querySelector('#container') as HTMLElement;
if (container) {
// 在容器内部查找所有p标签
const paragraphs = container.find('p');
// 直接链式调用NodeList扩展的css方法
paragraphs.css({
lineHeight: '1.8',
marginBottom: '12px'
});
// 也可以链式绑定事件
paragraphs.on('click', (e) => {
const target = e.target as HTMLElement;
target.style.color = '#f56c6c';
});
}这里的扩展逻辑和NodeList类似，先扩展HTMLElement的类型声明，再在原型上实现方法。find方法内部直接调用原生的querySelectorAll，返回的结果类型是NodeListOf<HTMLElement>，因此可以直接使用我们之前给NodeList扩展的on、css等方法，实现链式调用的效果。
注意事项
在对DOM原生对象进行扩展时，有几个点需要特别注意：
- 原型扩展是全局生效的，如果项目中使用了多个第三方库，可能会出现方法名冲突的情况，建议给自定义方法添加特定的前缀，比如
myOn、myCss，降低冲突概率。 - TypeScript的接口扩展只对类型检查生效，实际运行时的逻辑还需要在原型上实现，否则会出现运行时错误。
- 扩展的方法要尽量保持功能单一，避免过于复杂的逻辑，否则会降低代码的可维护性。
- 如果项目需要兼容旧版本浏览器，需要确认扩展中用到的原生API（比如
Object.assign、forEach）在目标浏览器中是否支持，必要时添加polyfill。
总结
通过TypeScript的接口扩展配合原型方法实现，我们可以很方便地为原生DOM对象添加自定义功能，减少重复代码，提升开发效率。这种方式既保留了原生API的能力，又可以根据项目需求定制个性化的操作方法，适合在中大型前端项目中复用通用逻辑。
TypeScriptDOM扩展NodeList原型HTMLElement原型自定义选择器 本作品最后修改时间：2026-05-22 14:20:13