On Mar 25, 12:02 am, Glen <a...@usa.com> wrote:
> I would like to use Prototype's class inheritance to derive a class
> from Element as below:

> The current structure of Element and Class does not support such.

> I was wondering if anyone had anything more elegant.

I have the same issue - I want to create my own classes that "inherit"
from standard DOM elements, so I can do something like:
var Button = Class.create(Element, {
  initialize: function($super, content) {
document.body.appendChild(new Button("submit"));

But as you noted, Element in prototype is not a prototype Class that
can be extended using Class.create. I decided not to muck about with
that and instead write something else. So I create
Class.createElement() that works like as you would expect, with the
very serious caveat that you can't override most native methods (not
sure why - I can override some, but not others).

The implementation looks like this (and is mostly copied from

Class.createElement = function(tagname, impl) {
        var IS_DONTENUM_BUGGY = (function() {
                for ( var p in { toString : 1 }) {
                        // check actual property name, so that it works with 
                        // Object.prototype
                        if (p === 'toString')
                                return false;
                return true;

        return function() {
                var elm = new Element(tagname);
                properties = Object.keys(impl);

                // IE6 doesn't enumerate `toString` and `valueOf` (among other 
                // `Object.prototype`) properties,
                // Force copy if they're not Object.prototype ones.
                // Do not copy other Object.prototype.* for performance reasons
                if (IS_DONTENUM_BUGGY) {
                        if (impl.toString != Object.prototype.toString)
                        if (impl.valueOf != Object.prototype.valueOf)

                for ( var i = 0, length = properties.length; i < length; i++) {
                        var property = properties[i], value = impl[property];
                        if (Object.isFunction(value) && 
value.argumentNames()[0] ==
"$super") {
                                var method = value;
                                value = (function(m) {
                                        return function() {
                                                return elm[m].apply(this, 

                                value.valueOf = method.valueOf.bind(method);
                                value.toString = method.toString.bind(method);
                        impl[property] = value;
                return elm;

You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to