为什么可以'；我在JavaScript中使用DOM元素作为原型

我正在尝试学习JavaScript，希望您能帮助我理解为什么下面的内容不起作用。 以下是HTML：

<canvas id="MyCanvas" width="640" height="480"></canvas>

---

当我将原型设置为id属性具有该值的对象时，我会预期“MyCanvas”会收到警报。您可以检查以下内容：

问题在于画布没有自己的

id

属性：

// Setup
var c = document.createElement('canvas');
c.id = "MyCanvas";
// Tests
c.hasOwnProperty('id'); // false
HTMLCanvasElement.prototype.hasOwnProperty('id'); // false
HTMLElement.prototype.hasOwnProperty('id'); // false
Element.prototype.hasOwnProperty('id'); // true

基本上，

id

属性只在

元素.prototype

中定义，它有一个getter和一个setter。当您设置或获取它时，信息存储在该

元素的内部属性中或从该
实例的内部属性中读取

但是这里您在
MyCanvas
的一个实例上使用了属性
id
，该实例不是真正的元素（尽管它是
元素的一个实例）。然后，
Element.prototype.id
的getter和setter不起作用。
Uhm，它为我提醒
MyCanvas
？在Chrome中起作用，但在Firefox中不起作用（
TypeError:Value不实现接口元素。
在
alert（c.id）；
行）；还没有测试其他元素。
TypeError:“id”getter调用了一个未实现接口元素的对象。
从特定元素设置原型非常奇怪。原型通常用于多次实例化的对象。问题是，您的所有实例都将指向MyCanvas（在支持它的浏览器中）。创建2个实例并更改其中一个实例的id，另一个实例将具有相同的id。这是您想要的吗？尝试扩展DOM通常不是一个好主意，有很多内部的东西（属性描述符、私有构造函数……），当然这取决于DOM的浏览器实现，这是一个无法控制的事情。
// Setup
var c = document.createElement('canvas');
c.id = "MyCanvas";
// Tests
c.hasOwnProperty('id'); // false
HTMLCanvasElement.prototype.hasOwnProperty('id'); // false
HTMLElement.prototype.hasOwnProperty('id'); // false
Element.prototype.hasOwnProperty('id'); // true