用自定義類型包裝document.createElement（）

我想製作一個視口類型，基本上用一些自定義樣式選項包裝<div>標記，但我不知道如何將元素方法添加到我的視口類型，我是嘗試這樣的事情：用自定義類型包裝document.createElement（）

var viewport = function(){ 
    document.createElement.call(this, 'div'); 
    // additional custom properties... 
    this.customStuff = ExtraProperty; 
} 

//would this work? 
viewport.prototype = Object.create(document.createElement.prototype); 

// additional custom methods... 
viewport.prototype.constructor = viewport;

我希望我的視口對象能夠像Element對象一樣使用。所以，我可以這樣調用：

var myVP = new viewport(); 
myVP.appendChild(someotherElementType);

我只是不知道如何正確/有效，因爲我不知道在哪裏的.appendChild等方法活等。如果使用了類似包裝使用document.createElement一個典型的構造函數，我知道我可以使用上面的模式，但因爲你不需要寫new document.createElement('type');我不確定。

謝謝。

來源

2012-07-01 0xor1

document.createElement應始終在文檔的上下文中執行。使用.call或.apply在這裏沒有意義。
使用document.createElement做的元素做不是繼承自document.createElement.prototype（它甚至不是構造函數！）。 DOM元素正在實現接口。當在Node和Element上定義方法/屬性時，則來自Element的方法優先。通常，這應該是「繼承」的順序：
Node>Element>HTMLElement> HTML 名稱元素。

當您想要添加自定義屬性時，請擴展其中一個原型（例如，

Node.prototype.foo = 1; 
console.log(document.createElement('div').foo); //"1"

但這些都不能作爲一個構造函數：

new HTMLDivElement; // TypeError: HTMLDivElement.prototype is not a constructor 
Object.create(HTMLLIElement).innerHTML; // undefined 
Object.create(HTMLAnchorElement).href ; // undefined

但是你不能定義一個全局HTML 名稱 Element對象創建自定義元素：

window.HTMLHelloElement = HTMLDivElement; // Expected: Create alias for div 
document.createElement('hello');   // Result: [object HTMLUnknownElement]

兼容性：

IE 7-不暴露任何可繼承的原型
IE8：元素僅從Element.prototype繼承。
IE9 +/Chrome 1+/Firefox 1+/Opera 8+/Safari 3+：遵循標準。

「我想打，基本上包裝標籤與一些自定義樣式選項視型」

類名和CSS更適合定義類特定的風格。例如：

var foo = document.createElement('div'); 
foo.className = 'type-viewport';  // CSS style sheet: .type-viewport { ... }

來源

2012-07-01 09:25:43

用自定義類型包裝document.createElement（）

回答

相關問題