Question

I was wondering if it was possible to assign values to an element object. In this case, I wish to assign the returns from the setTimeout() function to an object within an element object.

For example:

var elem = document.getElementById('target');
elem.timeouts = new Object();
elem.timeouts.sometimeout = setTimeout('...', 1000);

So I could then do:

clearTimeout(elem.timeouts.sometimeout);

I know this might seem bad practice etc, but is it possible or will it cause browsers to catch fire and turn on their user etc.

Thanks.

Answer 1

DOM elements are Host objects (aka non-native) and as such they can do almost anything they want. It’s not guaranteed that your expandos will work. In particular IE used to have problems with them. It’s highly recommended to read this article:

What’s wrong with extending the DOM by @kangax
(it is from one of the Prototype.js developers who experienced the drawbacks of such bad habits. They’ve rewritten the whole library just to save themselfs from more headaches)

Now if you add uniqueID to elements in non-IE browsers (IE has it by default) and then your data function becomes a simple lookup ~ O(1). The real information will be stored in a closure.

It’s 2-4x faster than jQuery.data (test)

data(elem, "key", "value");

1.) Hash table

var data = (function () {
    var storage = {};
    var counter = 1;
    return function (el, key, value) {
        var uid = el.uniqueID || (el.uniqueID = counter++);
        if (typeof value != "undefined") {
            storage[uid] || (storage[uid] = {});
            storage[uid][key] = value; // set
        } else if (storage[uid]) {
            return storage[uid][key]; // get
        }
    };
})();

2.) Array

If you want to avoid expandos all together you can use an array to hold elements (but it’s slower)

var data = (function () {
    var elements = [];
    var storage = [];
    return function (el, key, value) {
        var i = elements.indexOf(el);
        if (typeof value != "undefined") {
            if (i == -1) {
                i = elements.length;
                elements[i] = el;
                storage[i] = {};
            }
            storage[i][key] = value; // set
        } else if (storage[i]) {
            return storage[i][key]; // get
        }
    };
})();

Array.prototype.indexOf (fallback)

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (item) {
        var len = this.length >>> 0;
        for (var i = 0; i < len; i++) {
            if (this[i] === item) {
                return i;
            }
        }
        return -1;
    };
}

You’re welcome! 🙂