Difference between contentDocument and contentWindow javascript iframe/frame access properties

Question

• What is the difference between these two properties (contentDocument and contentWindow)?
• Is there any difference in the way they acces the content in the frame/iframe?
• Is there any performance issues?
• Should I use contentXXXXX.document.getElementsBy... or contentXXXXX.getElementsBy...?

I've been searching around in the web but haven't found too much information and before I did a big research I thought I could ask the great community here at stackoverflow. As a comment I'm doing a script that counts inputs on a web page, accessing all levels of frames or iframes and adding those inputs found inside the frames/iframes to the global count. All content is supposed to be from the same domain so no there should be no problems with same-origin-policy, I believe. For the script I'm using pure JavaScript no jQuery or any frameworks/libraries that make life easier u_u jaja. This is a practice script and if anyone would like a look at the code I'll post it, no problem. Thanks for anyone who takes the time to explain this!

Answer 1

I think the <iframe> MDN documentation explains it well:

From the DOM iframe element, scripts can get access to the window object of the included HTML page via the contentWindow property. The contentDocument property refers to the document element inside the iframe (this is equivalent to contentWindow.document), but is not supported by Internet Explorer versions before IE8.

So you would use contentWindow the same way you use window and contentDocument as you use document.