Comment ajouter mes propres méthodes à l'objet HTMLElement?

Par exemple pour this.parentNode j'aimerais simplement écrire this.p ou au lieu de document.getElementById('someid') suffit d'écrire document.g('someid') . Bien sûr, ce sont des exemples simples, je veux juste savoir quelle est la manière correcte de le faire.

(Je sais que je peux utiliser jQuery ou Prototype, mais j'aimerais savoir comment cela se fait vraiment dans JS)

Bien que vous puissiez HTMLElement prototype sur le HTMLElement dans de nombreux navigateurs – Internet Explorer (6,7,8) n'est PAS l' un d'entre eux. AFAIK, IE9 prend en charge ceci (bien que je ne l'ai pas testé).

Pour les navigateurs qui le gèrent, vous pouvez:

 HTMLElement.prototype.doHello = function(thing){ alert('Hello World from ' + thing); }; 

Je dirais fortement ne pas tenter de le faire, pour quelques raisons:

  • Compatibilité du navigateur . Bien qu'il soit possible dans plusieurs navigateurs, il n'est pas possible dans IE <= 8.
  • Les éléments DOM sont des objets hôtes . Les objets hôtes (c.-à-d. Ceux fournis par l'environnement qui ne sont pas des objets JavaScript natifs) n'ont aucune obligation de jouer selon les mêmes règles que les objets JavaScript natifs et autres que le comportement DOM spécifié peuvent essentiellement faire ce qu'ils aiment. Ainsi, même si certains navigateurs fournissent un prototype HTMLElement et vous permettent de l'augmenter, rien ne garantit que cela fonctionnera comme vous l'attendez.
  • Compatibilité avec un autre code dans votre page . Si un autre code de votre page (tel que Prototype) HTMLElement avec le prototype HTMLElement , vous risquez de HTMLElement des collisions et des bugs difficiles à détecter.

Au lieu de cela, je suggérerais de créer des objets wrapper autour des nœuds DOM que jQuery, YUI et d'autres bibliothèques le font.

Kangax a écrit un bon article à ce sujet , couvrant tous ces points et plus encore.

En un mot, ne le faites pas. Il est préférable de ne pas modifier les objets que vous ne possédez pas .

Ceci est particulièrement vrai pour HTMLElement , que vous ne pouvez pas modifier dans certains navigateurs.

Cet article de perfectionkills.com vous donnera probablement un aperçu de la façon dont il est fait, et pourquoi vous ne devriez pas le faire.

(Par ailleurs, jQuery ne prolonge pas les éléments DOM. Ils utilisent plutôt les wrappers DOM).