jQuery中为什么script脚本写在body前面时，其中的console.log输出是undefined？

jQuery中为什么script脚本写在body前面时，其中的console.log输出是undefined？
代码如下：

<script src="jquery-3.3.1.min.js"></script> 
    <script type="text/javascript">
            console.log($("#div1").html());
            console.log($("#div2").html());
            console.log($("#div2 span").html());
            console.log($("#input1").html());
            console.log($("#input2").html());
            console.log($("#button1").html());
    </script>
</head>
<body>
 <div id="div1">div有文本内容</div>
    <div id="div2">
        div2内的文本
        <span>span内有文本内容</span>
    </div>
    <input type="text" id="input1" value="这是一个input标签">
    <input type="text" name="" id="input2" placeholder="能成功获取">
    <button id="button1" value="这是一个button标签"></button>
</body>

控制台输出：图片说明
而脚本放在body下面就能正确输出。请问，为什么在body上面就是undefined啊<br> 已解决，写在$(function(){<br> })中即可。</p>

当console.log代码执行时，body还没加载，所以找不到这个对象。一般放在body后面或者用window.onload事件包裹

在全局环境下的代码是在页面加载阶段从上到下一边加载一边执行的，这时处于代码下面的页面元素还没有加载完，访问不到。

script 代码执行时。 BODY没有处理，对象没有生成，值当然为没有定义
解决的方法是移动BODY的尾部

整个页面是按从上到下的顺序加载的，你的js代码加载的时候就执行了，可这个时候里面用到一系列元素都还没加载出来，所以都是undefined
可以把js代码放在后面，或者用window.onload()事件，告诉它在页面加载完以后再执行