如何解释这段代码？

对下述结构代码，文档中只有<script>和<html>，会提示appendChild未定义，但是加上window.onload = function().....就可以正常执行，
如何解释？
谢谢

<script>

var tester = document.createElement('div');
tester.style.display = 'inline-block';
tester.style.fontSize = '30px';
tester.innerHTML = 'Segment';
document.body.appendChild(tester);
console.log(tester.offsetWidth)  // 120

</script>

onload就是一个加载完成，按照你的说法，你应该是<script>写在<body>的上面了，页面开始加载，加载到<script>发现你命名的变量tester命名了，但是不知道是什么东西来的，因为这个时候还没读取到<body>里面的div，所以会显示未定义。你加上onload，说明页面完成再加载这段代码，所以不会出现问题。你也可以把<script>放到最下面，</body>上面的位置，这样你不用onload也没问题。

很简单啊，js是边读边执行的，也就是说，如果你写这段代码的时候，浏览器还读不到body这个标签，那么他就会找不到document.body，自然document.body是个undifend，自然不存在一个叫appendchild的方法。
window.onload是整个html读完所有资源全部加加载完之后才开始执行上述代码，这时候浏览器已经读到了body标签了，document.body存在，自然带有dom方法appendchild
如果你不想使用window.onload，可以将这段代码放在body标签里面

说明原先这段代码等同于写在了head里喽，代码执行的时候，document.body还不存在。

写在window.onload里能用，现在好理解了吧？因为onload之后，document.body就有了

【热门文章】