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

.appendChild やその他のメソッドがどこにあるかわからないため、document.createElement を適切に/効果的にラップする方法がわかりません。典型的なコンストラクターのように使用された場合、上記のパターンを使用できることはわかっていますが、あなたのようにわからないから書く必要new document.createElement('type');はない。

ありがとう。

4

1 に答える 1

1
  1. document.createElement常にドキュメントのコンテキストで実行する必要があります。ここで使用する.callか.apply、意味がありません。
  2. を使用して作成された要素は、から継承しdocument.createElementませんdocument.createElement.prototype（コンストラクターでもありません！）。DOM要素はインターフェースを実装しています。メソッド/プロパティがとで定義されNodeているElement場合、からのものElementが優先されます。一般に、これは「継承」の順序である必要があります：
    ノード>要素> HTML要素>HTML名要素。

カスタムプロパティを追加する場合は、これらのプロトタイプの1つを拡張します。

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

ただし、グローバルHTMLNameElementオブジェクトを定義してカスタム要素を作成することはできません。

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

互換性：

  • IE7-継承可能なプロトタイプを公開しません
  • 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 に答える