What are the javascript performance tradeoffs in adding id's to dom elements?
        Posted  
        
            by Blinky
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Blinky
        
        
        
        Published on 2010-04-15T19:29:33Z
        Indexed on 
            2010/04/15
            19:33 UTC
        
        
        Read the original article
        Hit count: 256
        
For example, I have a website which has a dynamically-generated segment of its dom which looks roughly like this:
<div id="master">
  <div class="child"> ... </div>
  <div class="child"> ... </div>
  <div class="child"> ... </div>
  ...
  <div class="child"> ... </div>
</div>
There might be hundreds of child elements in this manner, and they, too, might have yet more children. At present, none of them have id's except for the master. Javascript manipulates them via dom-walking. It's a little scary.
I'd like to add id's, e.g.:
<div id="master">
  <div id="child1" class="child"> ... </div>
  <div id="child2" class="child"> ... </div>
  <div id="child3" class="child"> ... </div>
  ...
  <div id="childN" class="child"> ... </div>
</div>
What are the tradeoffs in adding id's to these divs? Certainly, jQuery must maintain a hash of id's, so there's going to be some sort of performance hit. Any general guidelines in when adding additional id's is a bad idea? Is jQuery so awesome that, in practice, it doesn't matter?
© Stack Overflow or respective owner