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

Question

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

PS：浏览器是较新版的chrome，因为是同事写的代码，现在已经删了换处理方式了，所以没法贴出来，希望有遇到过同样问题的大神能够指导一下。

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