Question

两者有什么区别？

说你有

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);
}

Answer 1

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

＆＃13;

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);

＆＃13;

<div is="x-component">abc</div>
<div>def</div>

＆＃13;

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

1 个答案: