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

问题描述

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

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

问题解答

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