How to add my own methods to HTMLElement object?

Question

For example for this.parentNode I would like to just write this.p or instead of document.getElementById('someid') just write document.g('someid'). Of course that are simple examples, I just want to know what is the correct way to do it.

(I know I can use jQuery or Prototype, but I'd like to learn how it is really done in JS)

Answer 1

Although you can prototype on the HTMLElement in many browsers - Internet Explorer (6,7,8) is NOT one of them. AFAIK, IE9 does support this (though I haven't tested it).

For browsers that do handle it, you can do:

HTMLElement.prototype.doHello = function(thing){
  console.log(this + ' says: ' + thing)
}

document.body.doHello('hello')

Answer 2

I would strongly suggest not attempting to do this, for a few reasons:

• Browser compatibility. While it is possible in several browsers, it isn't possible in IE <= 8.
• DOM elements are host objects. Host objects (i.e. those provided by the environment that aren't native JavaScript objects) have no obligation to play by the same rules as native JavaScript objects and other than specified DOM behaviour can essentially do what they like. So, even if some browsers provide an HTMLElement prototype and allow you to augment it, there's no guarantee that it will work as you expect.
• Compatibility with other code in your page. If any other code in your page (such as Prototype) messes with the HTMLElement prototype, you risk naming collisions and hard-to-detect bugs.

Instead, I would suggest creating wrapper objects around DOM nodes as jQuery, YUI and other libraries do.

Kangax has written a good article on DOM extensibility, covering all these points and more.

Answer 3

In a word, don't. It is best not to modify objects you don't own.

This is particularly true for HTMLElement, which you cannot modify in some browsers.

Answer 4

This article from perfectionkills.com will probably give you some insight into how it's done, and why you shouldn't do it.

(By the way, jQuery doesn't extend DOM elements. They use DOM wrappers instead.)

Answer 5

This might not be what you are looking for if you want to wrap a global object like document, but you can get a similar effect with custom-elements [1] [2] to create your own HTMLElement-like nodes.

1. create custom-element
2. add method to custom-element class
3. you can call the method

export class CustomElementInput extends HTMLElement {

  log(){
    alert("log")
  }

  // you can even overwrite methods like so
  remove(){
    alert("removing this node")
    super.remove()
  }
}

customElements.define("custom-element-input", CustomElementInput)

// somewhere else...
// in your HTML something like:
// <custom-element-input></custom-element-input> 

const el = document.querySelector("custom-element-input")
el.log() // creates alert()