0

我想制作一个基本上<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');我不确定。

谢谢。

4

1 回答 1

1
  1. document.createElement应始终在文档的上下文中执行。在这里使用.callor.apply没有意义。
  2. 使用创建的元素document.createElement不继承自（它甚至不是构造函数！）。document.createElement.prototypeDOM 元素正在实现接口。当一个方法/属性都在 和 上定义时Node，Element则 fromElement优先。一般来说，这应该是“继承”的顺序：
    Node > Element > HTMLElement > HTML Name Element。

当您想添加自定义属性时，请扩展这些原型之一，例如

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 { ... }
于 2012-07-01T09:25:43.560 回答