Subclassing from (extending) an HTML element?
dom, html, javascript
Solution
No you can't. (At least not reliably across today's browsers down to IE6; I don't know if the situation has recently changed in cutting-edge browsers.)
Problem
I'd love it if I could make my own class that extended an HTML element class, e.g. HTMLDivElement or HTMLImageElement. Assuming the standard inheritance pattern: ``` // class A: function ClassA(foo) { this.foo = foo; } ClassA.prototype.toString = function() { return "My foo is " + this.foo; }; // class B: function ClassB(foo, bar) { ClassA.call(this, foo); this.bar = bar; } ClassB.prototype = new ClassA(); ClassB.prototype.toString = function() { return "My foo/bar is " + this.foo + "/" + this.bar; }; ``` I'm not able to figure out what to call in the constructor: ``` function Image2() { // this doesn't work: Image2.prototype.constructor.call(this); // neither does this (only applies to <img>, no equivalent for <span> etc.): Image.call(this); } Image2.prototype = new Image(); // or document.createElement("img"); Image2.prototype.toString = function() { return "My src is " + this.src; }; ``` Is this just not possible? Or is there some way? Thanks. =)