<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>window.onload用法详解</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.test {
margin: 10px 20px;
width: 100px;
height: 200px;
border: solid 1px darkgoldenrod;
background-color: aquamarine;
}
</style>
<script type="text/javascript" language="javascript">
document.getElementById("d1").innerHTML = "这是我的文本内容";
</script>
</head>
<body>
<div id="d1" class="test">
</div>
</body>
</html>上边这段内容本来是想 设置id为d1的div的内容 但是会报错 Uncaught TypeError: Cannot set property 'innerHTML' of null
再看下边这段代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>window.onload用法详解</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.test {
margin: 10px 20px;
width: 100px;
height: 200px;
border: solid 1px darkgoldenrod;
background-color: aquamarine;
}
</style>
<script type="text/javascript" language="javascript">
window.onload = function() {
document.getElementById("d1").innerHTML = "这是我的文本内容";
}
</script>
</head>
<body>
<div id="d1" class="test">
</div>
</body>
</html>这段代码 没有报错 而且还设置了div的内容为这是我的文本内容
原因：window.onload 方法是在所有的dom节点加载完成之后才调用的 也就是说页面上所有的dom元素都存在了 这样获取div就不会是null
如果不是在onload中写的方法 那么可能还没有开始加载dom节点就开始调用这个方法了 那当然会报null 元素不存在
window.onload 等价于jquery的$(window).load(function(){//内容})
