HTML元素是否有原型？如何在Element.prototype上挂载自定义方法？

你想要的DOM元素链式调用自定义方法的需求完全可以实现，Element.prototype就是你要找的挂载入口，以下是具体说明：

核心实现方案 #

所有HTML DOM元素的原型链最终都会继承自Element，你只需要将自定义方法挂载到Element.prototype上，所有DOM元素实例都可以直接调用该方法：

// 挂载自定义move方法到Element原型
Element.prototype.move = function(offsetX = 0, offsetY = 0, aniDuration = 400) {
  // 方法内的this指向当前调用该方法的DOM元素实例
  this.style.transition = `all ${aniDuration}ms ease-in-out`;
  this.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
  // 你可以在这里补充更多动画逻辑，比如动画结束回调、多属性过渡等
}

挂载完成后就可以直接使用你期望的调用形式：

document.getElementById("item").move(100, 200);

你之前挂载Object.prototype失效的原因 #

DOM元素的原型链层级为：具体元素构造函数（如HTMLDivElement） → HTMLElement → Element → Node → EventTarget → Object
你挂载到Object.prototype上的方法理论上所有对象都能访问到，失效大概率是以下两种原因：

• 方法内部的this指向处理错误，没有绑定到当前元素实例
• 调用方法时getElementById未匹配到对应元素，返回了null，调用方法时报错

注意事项 #

• 避免命名冲突：不要使用过于通用的方法名，避免和未来浏览器原生新增的Element原型方法重名导致覆盖，建议给自定义方法加专属前缀，比如customMove
• 如需限制方法仅对某类元素生效，可以挂载到对应元素的构造函数原型上，比如仅允许div元素调用就挂载到HTMLDivElement.prototype，仅允许图片调用就挂载到HTMLImageElement.prototype

内容的提问来源于stack exchange，提问作者Infigon