向DOM元素添加新属性与扩展DOM元素原型

Adding new attributes to DOM elements vs extending DOM elements prototype

本文关键字：元素 DOM 原型 属性 扩展 添加 新属性      更新时间：2023-09-26

两者之间有什么区别？

假设你有

var e = document.getElementById("myelement")

我看到一个类似的例子：

e.prototype.print = function(){
 if(this.nodeType==3)
   console.log(this.nodeText);
}

vs向DOM元素添加新属性示例：

e.accessed = true;

在其中您将被访问的属性添加到元素。

这两个例子似乎都在向元素添加一个新的属性/属性，只是前者将属性添加到原型中，这样所有继承原型的对象都会获得新的属性？

所以，如果myelement是从它的原型继承的唯一对象，那么下面的例子会与我发布的第一个例子等效吗？

e.print=function(){
 if(this.nodeType==3)
   console.log(this.nodeText);
}

尝试使用document.registerElement。参见自定义元素，自定义元素介绍

var proto = Object.create(HTMLDivElement.prototype);
proto.print = function() {
  console.log(this.nodeName, this.textContent);
  return this
}
document.registerElement("x-component", {
  extends: "div",
  prototype: proto
});
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
  if ("print" in divs[i]) {
    console.log(divs[i].print())
  }
}
document.registerElement("x-foo", {
  prototype: Object.create(HTMLParagraphElement.prototype, {
    print: {
      get: function() {
        console.log(this.nodeName, this.textContent)
        return this;
      },
      enumerable: true,
      configurable: true
    }
    //,
    // specify more members for your prototype.
  }),
  extends: "p"
});
var foo = document.createElement("p", "x-foo");
foo.innerHTML = 123;
document.body.appendChild(foo);
console.log(foo.print);
<div is="x-component">abc</div>
<div>def</div>

相关文章：