DOM API中接口的定义与使用机制：JS实例关联DOM接口的疑问

首先得明确：DOM里说的“接口”是Web标准层面的抽象定义，和你熟悉的Java接口不是一回事，也和JS语言本身的语法无关。

1. DOM接口是规范层面的契约 #

W3C/WHATWG在制定DOM标准时，用“接口（Interface）”来描述一类DOM对象必须具备的属性、方法集合。比如HTMLImageElement接口就规定了所有图片元素必须有src、alt属性，必须实现decode()、complete等方法——这是给浏览器厂商定的实现标准，确保不同浏览器的图片对象行为一致。

2. JS里的HTMLImageElement是接口的具体实现 #

浏览器厂商按照标准把这些接口落地成了JS里的构造函数（类）。你看到的HTMLImageElement就是这个接口在JS中的载体，而Image是历史遗留的别名——它和HTMLImageElement指向同一个构造函数：

const img = new Image();
console.log(Image === HTMLImageElement); // 输出 true

这就是为什么img instanceof Image和img instanceof HTMLImageElement都返回true——本质上是同一个构造函数创建的实例。

3. 原型链实现接口的继承关系 #

DOM接口之间存在继承关系（比如HTMLImageElement继承HTMLElement，HTMLElement又继承Element），浏览器通过JS的原型链来实现这种继承：HTMLImageElement.prototype的原型指向HTMLElement.prototype，以此类推。所以图片实例会拥有所有上层接口定义的属性和方法，比如addEventListener（来自EventTarget接口）、style（来自HTMLElement接口）。

简单说：DOM的“接口”是标准的抽象描述，JS里的HTMLXXXElement是浏览器实现这个标准的具体类，而像Image这种是历史遗留的快捷命名，和对应的HTMLImageElement完全等价。

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