wrapping document.createElement() avec le type personnalisé

Question

Je souhaite créer un type de fenêtre qui enveloppe essentiellement une balise <div> avec des options de style personnalisées, mais je ne suis pas sûr de savoir comment ajouter les méthodes d'éléments à mon type de fenêtre, je suis essayer quelque chose comme ceci:

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; 

Je veux que mes objets viewport puissent être utilisés comme un objet Element. Donc, je pourrais appeler comme ceci:

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

Je ne suis pas sûr de savoir comment emballer correctement document.createElement/efficacement que je ne suis pas sûr où l'.appendChild et d'autres méthodes, etc. vivent si elle était utilisée comme un constructeur typique Je sais que je pourrais utiliser le modèle ci-dessus, mais comme vous n'avez pas besoin d'écrire new document.createElement('type'); Je ne suis pas sûr.

Merci.

Answer 1

1. document.createElement doit toujours être exécuté dans le contexte d'un document. Utiliser .call ou .apply n'a pas de sens ici.
2. Les éléments créés en utilisant document.createElement font et non héritent de document.createElement.prototype (ce n'est même pas un constructeur!). Les éléments DOM implémentent les interfaces . Lorsqu'une méthode/propriété est définie sur Node et Element, alors celle de Element a priorité. En général, cela devrait être l'ordre de «héritage»:
   Node>Element>HTMLElement> HTML Nom Élément.

Lorsque vous souhaitez ajouter une propriété personnalisée, étendez l'un de ces prototypes, par ex.

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

Mais ceux-ci ne peuvent pas être utilisés comme un constructeur:

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

Mais vous ne pouvez pas créer des éléments personnalisés en définissant un HTML global Nom objet Element:

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

Compatibilité:

• IE 7- n'expose aucun prototype héritable
• IE8: Les éléments héritent uniquement de Element.prototype.
• IE9 +/Chrome 1+/Firefox 1+/Opera 8+/Safari 3+: Suit la norme.

---

« Je veux faire un type de fenêtre qui enveloppe essentiellement une étiquette avec quelques options de style personnalisées »

Les noms de classe et CSS sont plus appropriés pour définir des styles spécifiques à chaque classe.Par exemple:

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