storing html-nodes as key in array

I want to store elements as the keys in my array and object as values,for example -

var arr = [];
arr[ document.getElementById('something') ] = { data: 'something' , fn : function(){ } };

Bu开发者_如何学运维t the problem is: If I will add another element with the key of : document.getElementById('otherthing'). And later will try to get the value of : arr[ document.getElementById('something') ].data , I will get the value of arr[ document.getElementById('otherthing') ].

For Example :

var arr = [];
arr[ document.getElementById('something') ] = { data: 'something' , fn : function(){ } };
arr[ document.getElementById('otherthing') ] = { data: 'otherthing' , fn : function(){ alert('k'); } };
alert( arr[ document.getElementById('otherthing') ].data ); // alerts "otherthing"
alert( arr[ document.getElementById('something') ].data ); // alerts "otherthing" but suppose to alert "something"

How I can fix this problem,I can`t save by id,because I want to support other nodes with no-id

Thanks,Yosy.

EDIT:My answer to this,If you have better answer please write it :) (Inspired by casablanca`s answer)

array for id: key-integer the node id, value the node it self

and the array with data and fn with key of my id,It will look like this :

var idArray = [],nodeArray = [];

idArray[0] = document.getElementById('hello_ducks');
nodeArray[0] = { data: 'hello ducks!!' , fn : function(){ alert('k'); } };

idArray[1] = document.getElementById('hello');
nodeArray[1] = { data: 'hello' , fn : function(){ } };

var testNode = document.getElementById('hello_ducks'), foundId = -1 /*found id*/;
// Do we have testNode in our array?
for(var i = 0 ; i < idArray.length; i++ ){
  if( idArray[i] === testNode ){
    foundId = i;
   }
}

// Do we found our element?
if(foundId >= 0) {
    alert( nodeArray[foundId].data ); // "hello ducks!!"
}

---

I can`t save by id,because I want to support other nodes with no-id

You should keep in mind that in order to get back a node from the array, you have to somehow identify it. If a node doesn't have any such unique identifier, then how do you retrieve it later from the array, or even store it in the first place?

In lower-level languages like C++, every object implicitly has a unique address, but there is no such thing you can use in JavaScript, so you need to manually provide some way of identifying an object, and the DOM ID is the most convenient way of doing this.

If some of your nodes don't initially have an ID, the best way to proceed is to simply assign your own unique ID.

---

Update: The solution you posted will work, but it's not very efficient because you need to search the entire array every time you need to find a node. Why not simply assign your own ID to those elements which don't have one? For example:

var nextID = 0;
function getID(elem) {
  if (elem.hasAttribute('id') == false || elem.id == '')
    elem.id = 'dummy-' + (++nodeID);
  return elem.id;
}

This way you can always use the ID as a key:

var nodeArray = [];

var e = document.getElementById('hello');
nodeArray[getID(e)] = { ... };

var e = /* element obtained from somewhere, doesn't have an ID */
nodeArray[getID(e)] = { ... }; // still works

---

I would suggest that instead of using an array for this purpose, you take advantage of the DOM-elements being objects:

document.getElementById('something').info = {data: 'something', fn: function () { } };

but you may end up with some issues with memory leaks in certain older browsers (read: ie6). That is fixed if you use jQuery's data storage instead:

$("#something").data("info", {data: 'something', fn: function () { } });