I'm trying to add simple functions to the JavaScript DOM, e.g. an addClass function, I implemented this first with the following code:

Element.prototype.addClass = function(className) {
    this.className += ' ' + className;
}; 

However after much reading (/ was good) it seems this is a terrible way to extend the DOM for a number of reasons.

The above article states:

One of the most mon alternatives to this whole mess of DOM extension is object wrappers

Which is fine, apparently the general consensus is to use Object wrappers if you want to extend the DOM. The problem is I can't find any good examples anywhere on how you actually use object wrappers to extend the DOM ...

Can anybody give me an example of how to do so? Maybe using the above code?

I'm trying to add simple functions to the JavaScript DOM, e.g. an addClass function, I implemented this first with the following code:

Element.prototype.addClass = function(className) {
    this.className += ' ' + className;
}; 

However after much reading (http://perfectionkills./whats-wrong-with-extending-the-dom/ was good) it seems this is a terrible way to extend the DOM for a number of reasons.

The above article states:

One of the most mon alternatives to this whole mess of DOM extension is object wrappers

Which is fine, apparently the general consensus is to use Object wrappers if you want to extend the DOM. The problem is I can't find any good examples anywhere on how you actually use object wrappers to extend the DOM ...

Can anybody give me an example of how to do so? Maybe using the above code?

• javascript

• Why do you need to extend the dom? Are you looking to add functionality which is not mon to libraries like jQuery? – Neil Commented Apr 29, 2013 at 12:51
• no, the functionality is mon to libraries like jQuery (pretty sure jQuery has an addClass function?) but I can't use a library for a project I'm working on and wanted to simplify my life by creating a few standard functions – Sean Commented Apr 29, 2013 at 12:53
• @SeanDunwoody: Which browsers are you supporting? I haven't looked into it recently, but I'm guessing things have evened out a bit since that article was written. – user1106925 Commented Apr 29, 2013 at 12:58
• 2 If you need an example for DOM (collection) wrappers, look at jQuery. – Bergi Commented Apr 29, 2013 at 13:00
• ...also, I know it was just an example, but keep in mind that new browsers have the .classList property on elements, which is an object with methods for manipulating the .className property. – user1106925 Commented Apr 29, 2013 at 13:00

3 Answers 3

Object wrappers are more expensive than extensions because you need to create a new object, but they are safer.

A simple implementation that wraps only a single element could look like this:

(function() {
    window.wrap = function(el) {
        return new Wrapper(el);
    };

    function Wrapper(el) {
        this.element = el;
    }

    Wrapper.prototype.addClass = function(cls) {
        if (this.element)
            this.element.className += " " + cls;
    }
    Wrapper.prototype.swap = function(el) {
        this.element = el;
    }
})();

Then you could make a new wrapper, and to be more efficient, you could reuse it with various elements.

var wrp = wrap(document.body);

wrp.addClass("foo");
wrp.swap(document.body.firstElementChild);
wrp.addClass("bar");

Another feature you could implement would be to add return this; to all the wrapper methods. That way you could chain your function calls if you like.

var wrp = wrap(document.body);

wrp.addClass("foo")
   .swap(document.body.firstElementChild)
   .addClass("bar");

You could also implement your wrapper to hold multiple elements at numeric indices like an Array, or better, simply hold an Array of elements.

I think that jQuery is a big example of object wrapper. Mainly you just use it like $(domElement) to get some additional functionality.

You can do sth like:

var wrapper = function(el){
  return {
    go: function(){
      console.log('go with', el);
    }
  }
};
wrapper(someEl).go();

I think that to extend the native behavior in javascript is not good.

And I find another post in the same website you post extending-built-in-native-objects-evil-or-not

So I'll say that I don't like to extend the stuff javascript provide us.