title: access child DOM object from parent in dotted notation
body: <p>Is there a way to select a child DOM object by treating it as data member of its parent DOM object?  Imagine I have this code:</p>
  
  <pre><code>&lt;div id=div1&gt;
     &lt;div id=innerdiv1&gt;&lt;/div&gt;
     &lt;div id=innerdiv2&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id=div2&gt;
     &lt;div id=innerdiv1&gt;&lt;/div&gt;
     &lt;div id=innerdiv2&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This example won't work in real life because both pairs of child divs have the same id's (innerdiv1, innerdiv2), but that's exactly what bothers me about the "id" thing.<br>
  Is there some way in javascript to access a child element as a data member, something like <code>document.getElementById('div1.innerdiv1')</code>, which would return a different object from <code>document.getElementById('div2.innerdiv1')</code>.<br>
  I can't stand that each id has to be unique throughout the document.  It becomes a major issue when you have a lot of code and you accidentally use the same id twice. It makes for really nasty bugs that are difficult to squash.</p>