咱先说将Javascript写在head里面的情况吧,如果你要在这里面去操控DOM元素,是会报错的,因为浏览器是先执行head标签里面的内容,在执行时你的DOM元素还没有生成.(使用了windows.loader的除外,这个后面再说)
例子:
<html>
<head>
<script>
var mybtn = document.getElementById('mybtn')
console.log(mybtn)
</script>
</head>
<body>
<div id="toolbar">
<input type='button' value="My" id="mybtn"></input>
</div>
</div>
</body>
</html>
在这一段中输出的结果为null,在head标签中多数是用来引入数据和方法的,不会对DOM元素进行修改
如果将上面的script移动到body中呢(放在所有元素的后面)
<html>
<head>
</head>
<body>
<div id="toolbar">
<input type='button' value="My" id="mybtn"></input>
</div>
</div>
<script>
var mybtn = document.getElementById('mybtn')
console.log(mybtn)
</script>
</body>
</html>
现在你可以看到输出了正确的DOM元素
因为当浏览器执行到script时,DOM元素都已经生成好了,所以可以看到正确的DOM
window.loader // 当页面DOM生成完毕后执行
注意:window.loader一个页面只能有一个
例:
<html>
<head>
<script>
window.onload = function(){
var mybtn = document.getElementById('mybtn')
console.log(mybtn)
}
</script>
</head>
<body>
<div id="toolbar">
<input type='button' value="My" id="mybtn"></input>
</div>
</div>
</body>
</html>
现在你也能看见你输出的DOM了
标签：body,head,DOM,元素,script,var,mybtn From： https://www.cnblogs.com/javaxubo/p/16841092.html