How best to associate two DOM elements?

Discussion in 'Javascript' started by Austin Matzko, Dec 3, 2009.

  1. 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?
     
    Austin Matzko, Dec 3, 2009
    #1
    1. Advertising

  2. Austin Matzko wrote:

    > 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
     
    Thomas 'PointedEars' Lahn, Dec 3, 2009
    #2
    1. Advertising

  3. On Dec 3, 11:54 am, Thomas 'PointedEars' Lahn <>
    wrote:
    > 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.
     
    Austin Matzko, Dec 3, 2009
    #3
  4. Austin Matzko wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> 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.


    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
     
    Thomas 'PointedEars' Lahn, Dec 4, 2009
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Angel
    Replies:
    2
    Views:
    596
    Kikoz
    Dec 26, 2003
  2. Chris Seberino
    Replies:
    3
    Views:
    756
    Stefan Behnel
    Jun 12, 2009
  3. iadb
    Replies:
    0
    Views:
    828
  4. jonjon
    Replies:
    0
    Views:
    106
    jonjon
    Oct 9, 2003
  5. Ricardo Nuno

    How associate two HashMaps

    Ricardo Nuno, May 8, 2012, in forum: Java
    Replies:
    4
    Views:
    416
Loading...

Share This Page