存在并且显示出来的DOM元素取不到，只有审查元素之后才能取到？

问题描述：有一个HTML中的元素，已经在页面里呈现了出来。但是无论是用document.getElementById("zz")还是jQuery中的$("#zz")方法都不能取到，在JS下和jQuery下分别返回null和[]，但是在审查元素过后，两种办法就都能取到了，特别奇怪。这是什么原因造成的啊？只有手动审查元素才能取到元素，不审查就在DOM上没有。（不管怎么刷新都没用，还是得审查才能找到元素）

1.网络解决办法

如果JavaScript代码在html里的head中引入； 获取DOM节点，需要在DOM结构加载完成才可以获取到；

/*jQuery方法*/
$(function() {
    var $div = $('#zz');
    console.log($div)
});

/*JavaScript原生方法*/
window.onload = function () {
    var obj = document.getElementById('zz');
    console.log(obj);
    console.log('DOM加载完毕')
};

/*建议使用*/
document.addEventListener('DOMContentLoaded', function(event) {
    var obj = document.getElementById('zz');
    console.log(obj);
    console.log('DOM加载完毕')
});

2.实际解决办法

采取上述方法问题仍未得到解决。通过检查发现，这是由于该元素写在iframe 下面，需要先获取iframe然后获取iframe中的元素才能取到。但是在学习如何获取iframe页面元素并采用多种写法后仍然没有取到，最后突然发现直接用document.getElementBy.val()就能够取到元素。

js 获取iframe页面元素

1.如何通过JS操作iframe里面的内容？

<!-- chart图表 -->
<iframe id="myframe" src="" height="100%" width="100%"></iframe>

2.通过父页面操纵子页面

获取iframe页面中的元素

操作	javascript	jQuery
方式一	document.getElementById("myframe").contentWindow.document.getElementById("V_ORGID").value = 111;	$("#myframe").contents().find("#V_ORGID").val('111');
方式二	document.frames["myframe"].document.getElementById("V_ORGID").value = 111;	$("#V_ORGID",document.frames("myframe").document).val('111');

调用iframe页面中的方法

操作	javascript	jQuery
方式一	document.getElementById("myframe").contentWindow.test();	无
方式二	document.frames["myframe"].test();	无

2.通过子页面操纵父页面

获取iframe页面中的元素

操作	javascript	jQuery
方式一	dwindow.parent.document.getElementById("ORGID").value = 111;	$("#ORGID",parent.document).val('111');

调用iframe页面中的方法

操作	javascript	jQuery
方式一	window.parent.test2();	无

说明：如果有多个父页面，可通过元素下标，精准获取到当前页面的父页面。 window.parent[4].document.getElementById("TABLENAME").value = TABLENAME;

3.通过子页面操纵父页面中的其它iframe页面

前提： iframe必须设置了id。

获取iframe页面中的元素

window.frames['id'].document.getElementById();

调用iframe页面中的方法

window.frames['id'].test();