javascript - 向 DOM 元素添加新属性与扩展 DOM 元素原型(prototype)

Question

两者有什么区别？

假设你有

var e = document.getElementById("myelement")

我看到这样的例子:

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

与向 DOM 元素添加新属性的示例:

e.accessed = true;

将访问的属性添加到元素的位置。

这两个示例似乎都在向元素添加新的属性/属性，只是前者将属性添加到原型(prototype)，以便所有继承原型(prototype)的对象也获得新属性？

因此，如果 myelement 是从其原型(prototype)继承的唯一对象，那么以下内容是否等同于我发布的第一个示例？

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

Answer 1

尝试使用document.registerElement 。请参阅Custom Elements , Introduction to Custom Elements

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>