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

Question

昨天同事写JS代码遇到一个问题，就是有一个HTML中的元素，这里用<div id="zz"></div>代替那个元素。这一个元素，已经在页面里呈现了出来。但是无论是用document.getElementById("zz")还是jQuery中的$("#zz")方法都不能取到，在JS下和jQuery下分别返回null和[]，但是在审查元素过后，两种办法就都能取到了，特别奇怪。这是什么原因造成的啊？只有手动审查元素才能取到元素，不审查就在DOM上没有。（不管怎么刷新都没用，还是得审查才能找到元素）PS：浏览器是较新版的chrome，因为是同事写的代码，现在已经删了换处理方式了，所以没法贴出来，希望有遇到过同样问题的大神能够指导一下。补充：这个元素是iframe中的元素。

Answer 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加载完毕')

});