I have a sample HTML structure like below where there are two DOM available on the same HTML. I am trying to access the <h1> tag, using Javascript in the HTML which is embedded inside the <object> tag. I have tried using the following javascript and couldnt get the text value of the H1.Please note, I want to achieve this using plain javascript only not using jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test JS</title>
</head>
<body>
<div class="parent">
<h1 class="header_Child">I am inside parent html</h1>
<div class="objectWrapper">
<object type="text/html">
#document
<!DOCTYPE html>
<html>
<head>
<title>I am an embedded HTML</title>
</head>
<body>
<h1 class="header_Child">I am inside child html</h1>
</body>
<html>
</object>
</div>
</div>
</body>
Javascript:
var obj = document.getElementsByTagName('object');
var header= obj[1].querySelectorAll('h1').innerHTML;
<object>instead of<iframe>? It has more or less the same effect except that the wayiframesare handled (especially around JS) is much better documented.