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

说你有

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

来源

2015-11-04 Steven Hsu

涉及该'prototype'财产是错误的，是行不通的例子。 – Pointy

如果是myelement.prototype.print？ –

DOM元素没有“原型”属性。建设者有原型。 – Pointy

尝试使用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>

来源

2015-11-04 05:30:10 guest271314

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

回答

相关问题