Question

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:

<div id=div1>
   <div id=innerdiv1></div>
   <div id=innerdiv2></div>
</div>
<div id=div2>
   <div id=innerdiv1></div>
   <div id=innerdiv2></div>
</div>

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.
Is there some way in javascript to access a child element as a data member, something like document.getElementById('div1.innerdiv1'), which would return a different object from document.getElementById('div2.innerdiv1').
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.

Answer 1

You can use document.querySelector in modern browsers. document.getElementById is pretty much obsolete.

document.querySelector('#div1 #innerdiv1')