How to access item values nested within the DOM ?

Question

Hi,

Hoping someone can assist but I need to access a value within a form and an iframe from the parent form that is nested 3 and 4 levels deep.

Basically, the tree hierarchy (DOM) seems to be as follows:

<form name="formname" ....>
   <iframe id="refframe">
     <form name="formname" ...>              ==> Level 3
       <iframe id="iframe1">                 ==> Level 4

Now I have a item value at Level 3 (say myValue), that I would like to access from the top level (parent - Level 1)

With javascript, how could I access this item "myValue" from the parent top level?

The same goes with accessing an item at Level 4, within the iframe id of iframe1

Any help/examples would be much appreciated.

Thanks.

Based on the above as I still am not sure how to access information but if I have the following HTML code:

<div class="tabs0">

<iframe id="refframe" width="1210px" height="584px" frameborder="0" align="left"

overflow="auto" src="http://www.abc.com" home="" name="Site1">
</iframe>

</div>

<div class="tabs1">
<iframe id="refframe" width="1210px" height="584px" frameborder="0" align="left"  `overflow="auto" src="http://www.def.com" name="Site2">`

How can I access the src value within tabs1 class iframe from the parent window, i.e.

src="http://www.def.com"

Thanks again

Answer 1

Just use id as a unique value (as it should be -- see e.g. here, section 7.5.2) -- then, GetElementById does just what you want, without requiring you to navigate any complex hierarchies.

Answer 2

Is the content in the iframe loaded from the same domain as the parent document? If not, then due to browser security restrictions (same domain policy), you won't be able to access it via javascript.

If it is from the same domain, you should be able to use getElementById without any problems.

Answer 3

<form name="formname" .... id="form-first">
    <iframe id="one" src="iframe2.html">
    </iframe>
</form>


function iframeRef( frameRef ) {
    return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}

var inside = iframeRef( document.getElementById('one') )

var secondIframe = inside.getElementsByTagName('iframe')
alert( secondIframe.id ) // make sure theres an iframe with an id in the iframe2.html.

You can use iframeRef to grab the reference inside of the iframe, and just do keep doing that to get to child iframes. This should work for IE.