3 document.body为什么是null
2019-05-29 本文已影响4人
小遁哥
大家好，我是小遁。
document 可以看作整个HTML文档
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
}
</style>
</head>
<script>
</script>
<body>
<div>
Hello World
</div>
</body>
</html>
基于上节课代码，使用script标签内嵌脚本
body元素是undefined
ctrl+s保存，F5刷新浏览器，F12打开开发者工具
切换到Console面板
Console面板
打印document.body的值为null,null是JavaScript(一门脚本语言)提供的基本类型之一,是一个对象占位符，表示现在还没有值，将来会有。
因为浏览器解析HTML文档是从上到下的，打印的时候还没有解析到body元素
可以将script 移到body后
image.png
保存后刷新
document.body有值了
可以尝试用console.dir打印document.body
切换到Elements面板，浏览器自动将script标签放在body里，为了可读性，不需对程序做修改!
浏览器做了处理
彩蛋
body标签上面访问document.body
监听window.onDOMContentLoaded事件
onDOMContentLoaded
监听window.onload事件
window.onload
显然在当前需求中，默默的放在body后面就好。
扩展
document还提供了其它属性用于和HTML产生关联
http://www.w3school.com.cn/jsref/dom_obj_document.asp
提醒
练好打字很重要，不能实现盲打还是很伤的，推荐金山打字通这款软件，每天抽出点时间敲敲就好，慢慢就会养成习惯。
小技巧
下图是我的任务栏
image.png
可以windows+1 、windows+2在浏览器和编辑器之间切换
进一步
在编辑器界面时，按下windows+1 切换到浏览器界面，在按windows+1 可以收回浏览器，从而回到编辑器界面
上一章 - 2 HTML中的body和它的默认样式
