Javascript Objects Cannot Have Complex Index Values
This was just a shot in the dark, but I wanted to see if Javascript Objects could be indexed by other objects rather than just strings (yes I know Strings are technically objects too). I wanted to see if something along these lines would work:
var objIndex = {
DOMElement: { ... },
DOMElement: { ... },
DOMElement: { ... },
... etc ...
};
Basically, I wanted to see if Javascript objects could act like Java HashTables that can take any type of object as an index value.
After some quick testing, I realized that this did not work. At first, though, I thought it might because no errors were thrown. Javascript actually lets you do this; but, not in the I wanted - what it actually does (from what I can gather) is that it creates an index value in the following manner:
var objIndex = {
DOMElement: { ... }
};
... becomes:
var objIndex = {
DOMElement.toString(): { ... }
};
I believe that Javascript objects requires string-based indexing and therefore takes any object that you pass to it (to be used as an index value) and converts it to a string. Part of the problem is that this string version of the object is rather generic. The P and SPAN tags convert to the following regardless of markup (in FireFox):
[object HTMLParagraphElement]
[object HTMLSpanElement]
Therefore, all P and SPAN tags would be indexed using the same values (respectively) no matter how many there were in the page.
Anyway, it was just a thought.
Want to use code from this post? Check out the license.
Reader Comments
If you override an object's toString() method, then you can control how JavaScript sets the key.
domElement.toString = function() {
return this.id;
};
Sadly, IE doesn't let you override for DOM objects. But this works for custom objects in all browsers.
@Dave,
That's an interesting approach. To be honest, though, I just discovered a jQuery method that will make this path almost completely unnecessary:
www.bennadel.com/index.cfm?dax=blog:1404.view
While not exactly the same thing, the jQuery Data() method allows us to store arbitrary data with any DOM element. Bad ass!