向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元素原型

回答

相關問題