How best to associate two DOM elements?

[Austin Matzko]

Given one DOM element, el1, what's the most robust way to retrieve
another arbitrarily associated element, el2?

It seems that it's common just to create a custom property, like so:

el1.myAssociatedElement = el2

However, from what I understand this creates potential problems: some
browsers may disallow such expando properties, and they could lead to
memory leaks.

The best I've been able to think of is to loop through a multi-
dimensional array of the associated elements:

[[el1, el2], [el3, el4], ... ]

Is there a better way?

 

[Thomas 'PointedEars' Lahn]

Given one DOM element, el1, what's the most robust way to retrieve
another arbitrarily associated element, el2?

It seems that it's common just to create a custom property, like so:

el1.myAssociatedElement = el2

I do not know whether it is common; it is certainly foolish, though.

However, from what I understand this creates potential problems: some
browsers may disallow such expando properties, and they could lead to
memory leaks.

Exactly, but it is not so much a matter of the browser, but of the DOM
implementation, which complicates the matter.

The best I've been able to think of is to loop through a multi-
dimensional array of the associated elements:

[[el1, el2], [el3, el4], ... ]

Is there a better way?

Suppose "el1" corresponds with (not: refers to) element object #1 that
represents element #1, and `el2' stores a reference to element object #2
that represents element #2:

var assoc = {
el1: el2
};

Then

assoc.el1

or

assoc["el1"]

yields the value of `el2'.

Or, if `el1' is a reference to the element object representing element #1
with ID "el1" instead:

assoc[el1.id]

(This mapping is probably the most efficient and flexible approach, so what
one could reasonably consider the best one.)

Or, if the object referred to by `assoc' stores IDs instead of object
references:

document.getElementById(assoc[el1.id])

(But you can see that this is not as efficient, although relatively
flexible.)

Another possibility is using fixed ID prefixes or (here) suffixes.

var el2 = document.getElementById(el1.id + "foo")

(That assumes that if "el1" is the ID of element #1 represented by the
object referred to by `el1', then "el1foo" is the ID of element #2
represented by the object referred to by `el2'. But you can see that this
is not as flexible.)

There are other approaches, such as CSS class names, parent-child element
relationships aso. But you can see that these tend to not be as flexible,
and in some cases even less efficient than the approaches presented here.


PointedEars

 

[Austin Matzko]

Suppose "el1" corresponds with (not: refers to) element object #1 that
represents element #1, and `el2' stores a reference to element object #2
that represents element #2:

var assoc = {
el1: el2
};

Thanks for your reply. I should have mentioned originally that I
can't be certain that the elements have IDs. Would it be a good idea
to generate IDs for those elements lacking them? Otherwise I don't
know how I could get an element-corresponding string like "el1" in
your example.

 

[Thomas 'PointedEars' Lahn]

Thanks for your reply.

You are welcome.

I should have mentioned originally that I can't be certain that the
elements have IDs. Would it be a good idea to generate IDs for those
elements lacking them?

Maybe. What exactly do you mean by that?

Otherwise I don't know how I could get an element-corresponding string
like "el1" in your example.

You have asked a very general question, mostly about an alternative to your
solution to what appears to be a particular sub-problem. Perhaps a bit
more of the context of your original problem would prove helpful.

<http://jibbering.com/faq/#posting>
<http://jibbering.com/faq/faq_notes/clj_posts.html#ps1CntX>
<http://www.catb.org/~esr/faqs/smart-questions.html#goal>


PointedEars