如何在 JavaScript 中使用 Object.create() 创建 HTML DOM 节点？

Question

我正在阅读Chromium webui source code: ui.js（+48、+95 行），它使用__proto__ 将一个类转变为继承其他一些类。

然后我看了一些帖子学习__proto__：

• This 和 this 表示原型链由 JS VM 内部维护并始终存在，您可以使用 __proto__ 伪属性（访问器）对其进行修改。
• Another post 说，通过连接内部原型，您可以手动将一个类变形为从另一个类派生的。
• 4th post 表示某些浏览器不会公开其内部原型链，因此您应该避免扩展（使用）HTMLXXXElement.prototype。
• 最后，MDN said __proto__ 已弃用。

然后很自然地，我认为应该有另一种方法来使用Object.create()创建一个DOM节点，然后将其插入到DOM中，但是我尝试了以下并失败了：

var xt = document.querySelector('#list > div:nth-child(2)');
var list = xt.parentNode;
var o = Object.create(HTMLElement.prototype);
o.innerHTML = 'This should be a Element Node';
list.insertBefore(o, xt);   // this line throws error

Chrome 给我错误：

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

我想我一定是误解了HTML元素Node类，我使用Object.create（）的方式一定是错误的......但是我不知道如何表达这个问题，经过大量搜索我仍然无法找出答案。

我必须使用document.createElement('a tag name') 来创建 DOM 节点吗？

是否可以使用Object.create(HTMLElement.prototype)创建一个DOM节点，同时避免使用__proto__？

谢谢一百万。

Answer 1

您在创建对象时所做的只是将其 __proto__ 属性或原型分配给 HTMLElement。这不会自动使其成为 Node，它仍然只是一个常规的 Javascript 对象，尽管它可以通过其原型链访问 HTMLElement 方法。

你是对的，你需要使用 createElement 来创建一个 DOM 节点。重要的是要记住 DOM 不是 Javascript 中固有的东西。它实际上只是一种特殊的“接口”，它使用 Javascript 进行构建。

document.createElement() 是浏览器提供的一种方法，专门用于构建符合浏览器 DOM 实现的 HTML 元素。理论上您可以创建一个模仿 Chromiums 实现的函数，但这是徒劳的。

Object.create() 是一个内置的 Javascript 函数。它可以以所有形式创建 Javascript 对象。 document.createElement() 不是内置的 Javascript 函数，它由浏览器提供，用于 DOM 操作。