Can't access a nested <div> element

[barb]

Hi,
I have two <divs> in my page. One inside the other:

<div id="mainDiv">
<div id="subDiv">
</div>
</div>

Based on which browser I'm using, I have to adjust the position of the subDiv. I have tried every combination known to man of trying to access the subDiv. I've tried:

document.getElementById('mainDiv').document.getElementById('subDiv');
document.getElementById('mainDiv').getElementById('subDiv');
document.mainDiv.document.subDiv;
document.mainDiv.subDiv;
document.layers['mainDiv'].document.layers['subDiv'];

Does anyone know a sure fire way to access these inner divs?

[Bill Posters]

Given that you already know the id of the div you wish to target, is there any reason you can't simply target it directly?
It seems a little redundant to target an id div within an ided div.

document.getElementById('subDiv')

ids being unique (per page), you can reliably target the subDiv div directly without fear of hitting the wrong div.

[Kor]

on the other hand you may use the index of the subdivs, so that there is no need to give an id to each subdiv.

<div id="mainDiv">
<div>...</div>
<div>...</div>
<div>...</div>
</div>

Now the first subdiv is to be refered by it's tag name:
document.getElementById('mainDiv).getElementsByTagName('div')[0]
the second is
document.getElementById('mainDiv).getElementsByTagName('div')[1]

To operate dynamically, you may set first the collection

var subd = document.getElementById('mainDiv).getElementsByTagName('div');

now your subdivs are subd[0], subd[1], subd[2] .... and so on. You may treat them almost like the elements of an array. I said almost because a collection of objects is not exactly an array, and it will not support some array's methods, such as join()....

[barb]

Given that you already know the id of the div you wish to target, is there any reason you can't simply target it directly?
It seems a little redundant to target an id div within an ided div.

document.getElementById('subDiv')

ids being unique (per page), you can reliably target the subDiv div directly without fear of hitting the wrong div.


Yep, I tried that one. Makes sense to me, but it doesn't want to work.

[barb]

Now the first subdiv is to be refered by it's tag name:
document.getElementById('mainDiv).getElementsByTagName('div')[0]
the second is
document.getElementById('mainDiv).getElementsByTagName('div')[1]




GENIUS!!! It worked!!!
Thank you SO much.

[Bill Posters]

Yep, I tried that one. Makes sense to me, but it doesn't want to work.

Any chance you could show me/us your markup and js?
I'm curious to know what's going wrong and preventing a direct reference to 'subDiv'.

A link to an online page would be preferable.

[mdybwad]

I've got a series of divs that all have the same name and ID, and I need to target the first child of one to change its class. Obviously this.child.className isn't working, how do I proceed? thx.

<div name="checkItem" class="checkOff" id="checkItem" onmouseover="this.className='checkOn'; this.child.className='checkOnBox';">
<div name="checkBox" class="checkOffBox" id="checkBox">
<!-- filler for IE -->
</div>
Contribute</div>

[Kor]

I've got a series of divs that all have the same name and ID, and I need to target the first child of one to change its class. Obviously this.child.className isn't working, how do I proceed? thx.
First at all, two mistakes:

1. Elements can not have the same id. The id must be unique on page/session.
2. Only form's elements can bear names.

Now your problem; here's a possible solution:

onmouseover="this.className='checkOn'; this.getElementsByTagName('div')[0].className='checkOnBox';"


But I would have rather called a single function placed in a code, say, in head, and passed the this self reference to that function:

<script type="text/javascript">
function rollOn(obj){
obj.className='checkOn';
obj.getElementsByTagName('div')[0].className='checkOnBox';
}
</script>

and

onmouseover="rollOn(this)"