Can I subclass a DOM-class?

Question

I was wondering if I can create a subclass of HTMLDivElement. Like this.

MyDivElement.prototype.pickColor = function()
{
    return this.picked;
}
function MyDivElement()
{
    this = new HTMLDivElement();
    this.picked = 'unknowd';
}
alert(this.picked); // print: 'unkowd'

Is (something like) this possible? If not, what is the best way to achieve this?

Answer 1

In browsers where __proto__ is exposed and mutable you can sub class DOM elements. It looks like this:

function CustomEl () {
    var el = document.createElement('div')
    el.__proto__ = CustomEl.prototype
    return el
}
CustomEl.prototype.__proto__ = HTMLDivElement.prototype

I also played with it in more detail on jsFiddle. Unfortunately though IE and Opera don't allow __proto__ access and have no plans to in the future as far as I know.

Answer 2

new HTMLDivElement(); throws a TypError "Illegal constructor" in Chrome - so it's not possible.

Update: I've tested in other current browsers, and they throw various types of errors - but they all throw.

---

Actually, this would work:

function MyDivElement() {
    this.picked = 'unknowd';
}

MyDivElement.prototype = document.createElement('div');

var mydiv = new MyDivElement();

But I'm not sure how you could use this pattern...

Answer 3

In some browsers, you can extend the prototype, in others, no. I'll let you guess the ones where you can't. :-) That's not really the same as extending a DOM element, but it does let you do a certain subset of the things for which you might want that facility. The thing is, DOM elements aren't really JavaScript entities; they're only simulacrums provided by the runtime system. (Maybe someday all the jsdom work will actually come to fruition.)

Well ok I'll tell you about the problematic browsers: IE doesn't like that at all. However others do. If you've ever looked at the Prototype library, you'll come across a manifestation of that fact all the time via nasty irritating IE-only bugs when you forget to Prototype-ize a DOM element reference.

(IE9 may be different, but I sort-of doubt it.)

This is the kind of thing that's dirt simple to test over at jsfiddle.