How to access nested document objects in the same DOM console?

Question

I'm trying to access the contents contained in a nested document which is deep inside the html. I've just located the selector using document.getElementsByClassName('top')

However I noticed it is recieving a nested document from the src url.

I need to some how query the document in the same console, for a couple reasons. Firstly because the url version of the document doesn't actually contain all the contents of the document, and secondly because I haven't be able to communicate between two separate page consoles.

Here are the inner contents of the document, standard header and body tags.

I also tried to access the document like so with no luck (not too surprised)

document.getElementsByClassName('top').querySelector('#document')

The only option I found was to enter the document by returning the url

document.getElementsByClassName('top').src

And opening in a new tab. But of course I can't proceed further with this method.

Are you trying to alter the external page or get info about it? — Daniel_Knights, Aug 07 '20 at 23:48
Is the iframe even of the same domain and context? If not you're still going to have to figure out how to overcome [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) but either way there's not much info in your question about what you're trying to do specifically and I'm not sure what you mean by "same page console" but a reproducible example instead of screen shots would help. — Chris W., Aug 07 '20 at 23:50
Sure, apologies, i'm not a web developer, more of a mobile dev. I'm referring to the fact I can only enter the document by taking the `src` url and pasting it in another tab. In that url console I'm able to access the contents of the document, but I can't do so in the original console. I don't understand what you mean by context? Is there no way I can query to enter a nested document in the same dom? — srb633, Aug 07 '20 at 23:52

score 1 · Accepted Answer · answered Aug 08 '20 at 00:03

1

You can access the information in an iframe by accessing the contentWindow property:

// reference to iframe with id 'ifrm'
var ifrm = document.getElementById('ifrm');
// using reference to iframe (ifrm) obtained above
var win = ifrm.contentWindow; // reference to iframe's window
// reference to document in iframe
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
// reference to form named 'demoForm' in iframe
var form = doc.getElementById('demoForm');

Taken from here.

But this is only if you have permitted access to the URL specified in src. Otherwise, it's a huge security risk.

answered Aug 08 '20 at 00:03

Daniel_Knights

5,599
3
10
32

Okay I understand. I'm able to get into the document by manually opening the containers in the dom, does that not necessarily indicate that it's permitting me access to query inside of the document though? – srb633 Aug 08 '20 at 00:05
Do you own the `random.org` URL? – Daniel_Knights Aug 08 '20 at 06:11
No I don't, if it can be accessed by clicking through the dom, why can't it be queried in the console? It doesn't appear to be dynamic or anything, the document is always visible in the dom. Just nested. – srb633 Aug 08 '20 at 09:44
For security reasons. Viewing it in the DOM and having access to it's data in your code are two different things – Daniel_Knights Aug 08 '20 at 09:50

How to access nested document objects in the same DOM console?

1 Answers1