<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{border: 1px solid black;width:300px; height: 300px;}
</style>
<script>
alert(document.getElementById("box").innerHTML);
</script>
</head>
<body>
<div id="box">123456</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 300px;
height: 300px;
background: blueviolet;
color: black;
}
</style>
<script>
function btn(){
var arr = [/靠/ig, /cnm/ig, /tmd/ig];
var stext = document.getElementById("text");
var sbox = document.getElementById("box");
var scc = stext.value;
for(i = 0; i < arr.length; i++){
scc = scc.replace(arr[i], "*");
}
console.log("sbox",sbox);
sbox.innerHTML = scc;
stext.value = "";
}
</script>
</head>
<body>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<button onclick="btn()">点击刷新</button>
<div id="box"></div>
</body>
</html>问题：上下两端代码都是js加css内容，代码同样是由上至下执行，为什么第一段代码console不出来，而第二段代码可以？
执行顺序应该都一样啊
可以看下html的解析过程，head中的js执行的时候，body中的元素还没有加入dom树，所以找不到box，继而抛出错误
放入<head>中的js代码会比放入<body>中的js代码先执行。