Using object wrappers to extend the JavaScripts DOM?

Question

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.com/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 common 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?

Why do you need to extend the dom? Are you looking to add functionality which is not common to libraries like jQuery? — Neil
– Neil, Commented Apr 29, 2013 at 12:51
no, the functionality is common 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
– 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
– user1106925, Commented Apr 29, 2013 at 12:58
If you need an example for DOM (collection) wrappers, look at jQuery. — Bergi
– 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
– user1106925, Commented Apr 29, 2013 at 13:00

2 revs, 2 users 99% user1106925 · Accepted Answer · 2016-07-26 10:34:34Z

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.

neo · Accepted Answer · 2013-04-29 12:54:56Z

0

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();

answered Apr 29, 2013 at 12:54

neo

8117 silver badges7 bronze badges

2 Comments

Bergi Over a year ago

No, it's not additional functionality - it's just a different functionality

neo Over a year ago

I probably did not understand the question since you can simply implement addClass in the above manner.

beardedlinuxgeek · Accepted Answer · 2016-07-26 12:16:16Z

-1

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.

edited Jul 26, 2016 at 12:16

beardedlinuxgeek

1,66217 silver badges26 bronze badges

answered Apr 29, 2013 at 13:07

haudoing

6038 silver badges20 bronze badges

4 Comments

Bergi Over a year ago

Extending the DOM != Extending native objects. And he read that article already, that's why he's asking. And it's hardly important whether you like something or not.

haudoing Over a year ago

I know that it's not the same, but the concept of downside in this article is the same. I don't know that he read that before, seems the link I provide is different.

Bergi Over a year ago

Yes, different and not relevant. The concept downside is explained well in perfectionkills.com/whats-wrong-with-extending-the-dom which he linked.

haudoing Over a year ago

I apologize. the link he provide is much relevant and more description about the stuff. My concern is too less that only think about the conflict.

Collectives™ on Stack Overflow

Using object wrappers to extend the JavaScripts DOM?

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related