Come aggiungere i miei metodi all’object HTMLElement?

Ad esempio per this.parentNode vorrei scrivere this.p o al posto di document.getElementById('someid') basta scrivere document.g('someid') . Ovviamente sono semplici esempi, voglio solo sapere qual è il modo corretto per farlo.

(So ​​che posso usare jQuery o Prototype, ma mi piacerebbe sapere come è fatto davvero in JS)

Sebbene sia ansible eseguire il prototipo su HTMLElement in molti browser, Internet Explorer (6,7,8) NON è uno di questi. AFAIK, IE9 supporta questo (sebbene non l’abbia provato).

Per i browser che lo gestiscono, puoi fare:

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

Consiglio vivamente di non tentare di farlo, per alcuni motivi:

  • Compatibilità con il browser . Sebbene sia ansible in diversi browser, non è ansible in IE <= 8.
  • Gli elementi DOM sono oggetti host . Gli oggetti host (ad esempio quelli forniti dall’ambiente che non sono oggetti JavaScript nativi) non hanno l’obbligo di giocare con le stesse regole degli oggetti JavaScript nativi e diversi dal comportamento DOM specificato possono essenzialmente fare ciò che vogliono. Quindi, anche se alcuni browser forniscono un prototipo HTMLElement e ti permettono di aumentarlo, non c’è alcuna garanzia che funzionerà come previsto.
  • Compatibilità con altro codice nella tua pagina . Se qualsiasi altro codice nella tua pagina (come Prototype) HTMLElement con il prototipo HTMLElement , rischierai di nominare collisioni e bug difficili da rilevare.

Invece, suggerirei di creare oggetti wrapper attorno ai nodes DOM come fanno jQuery, YUI e altre librerie.

Kangax ha scritto un buon articolo su questo , coprendo tutti questi punti e altro ancora.

In una parola, non farlo. È meglio non modificare oggetti che non possiedi .

Questo è particolarmente vero per HTMLElement , che non è ansible modificare in alcuni browser.

Questo articolo di perfectionkills.com ti darà probabilmente alcune informazioni su come è fatto e perché non dovresti farlo.

(A proposito, jQuery non estrae elementi DOM. Utilizzano invece i wrapper DOM.)