为什么querySelector不能及时获取元素

为什么使用querySelector获取元素时，使用class不能及时获取到元素，但是id可以

<script>
        window.addEventListener('load',function () {
          // 1. 获取元素
          var cloud = document.querySelector('.cloud');
          var c_nav = document.querySelector('.c_nav');
          var lis = c_nav.querySelectorAll('li');
    </script>

 调试如下：

1.不能获取到c_nav元素

2.但是querySelector报错后，可以获取到。

使用id获取c_nav时却可以直接获取到

<script>
        window.addEventListener('load',function () {
          // 1. 获取元素
          var cloud = document.querySelector('.cloud');
          var c_nav = document.querySelector('#c_nav');
          var lis = c_nav.querySelectorAll('li');
</script>

 调试如下：

想请问一下是为什么？

你的dom怎么生成的，而且加了样式c_nav了没有？

不是说放到load事件中所有dom都能获取的，如ajax异步加载的可能ajax未返回就执行load事件了。获取ajax动态返回的需要在ajax回调中获取