<!DOCTYPE html>
<!--
为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量？
在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执行的
这时处于代码下面的页面元素还没有加载完，访问不到。
解决方法： 在 body 标签的后面 script 标签中定义 JS 全局变量
-->
<html>
<head>
<script>
var id = document.getElementById("test");
alert(id); //获取不到 div 的对象
function testDemo(){
var id2 = document.getElementById("test");
alert(id2); //可以获取到 div 对象
}
</script>
</head>
<body>
<div id="test">test</div>
<hr boder="solid red 3px"/>
<button onclick="testDemo()">测试按钮</button>
</body>
</html>
<script>
var id = document.getElementById("test");
alert(id); //获取不到 div 的对象
</script>