Question

我想创建一个基本上包含<div>标签的视口类型，其中包含一些自定义样式选项，但我不确定如何将元素方法添加到我的视口类型中，我正在尝试类似这样：

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

我只是不确定如何正确/有效地包装document.createElement，因为我不确定.appendChild和其他方法在哪里等等。如果它像一个典型的构造函数一样使用我知道我可以使用上面的模式，但因为你不需要写new document.createElement('type');我不确定。

感谢。

Answer 1

document.createElement应始终在文档的上下文中执行。使用.call或.apply在这里没有意义。
使用document.createElement创建的元素不继承自document.createElement.prototype（它甚至不是构造函数！）。 DOM元素正在实现 interfaces 。如果在Node和Element上定义了方法/属性，则Element中的方法/属性优先。一般来说，这应该是“继承”的顺序：
Node＆gt; Element＆gt; HTMLElement＆gt; 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 名称元素对象来创建自定义元素：

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 { ... }

使用自定义类型包装document.createElement（）

1 个答案: