3 document.body为什么是null

大家好,我是小遁。

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标签内嵌脚本

ctrl+s保存,F5刷新浏览器,F12打开开发者工具

切换到Console面板

打印document.body的值为null,null是JavaScript(一门脚本语言)提供的基本类型之一,是一个对象占位符,表示现在还没有值,将来会有。

因为浏览器解析HTML文档是从上到下的,打印的时候还没有解析到body元素

可以将script 移到body

保存后刷新

可以尝试用console.dir打印document.body

切换到Elements面板,浏览器自动将script标签放在body里,为了可读性,不需对程序做修改!


彩蛋

body标签上面访问document.body

监听window.onDOMContentLoaded事件

监听window.onload事件

显然在当前需求中,默默的放在body后面就好。


扩展

document还提供了其它属性用于和HTML产生关联 www.w3school.com.cn/jsref/dom_o…


提醒

练好打字很重要,不能实现盲打还是很伤的,推荐金山打字通这款软件,每天抽出点时间敲敲就好,慢慢就会养成习惯。

小技巧

下图是我的任务栏

可以windows+1 、windows+2在浏览器和编辑器之间切换

进一步

在编辑器界面时,按下windows+1 切换到浏览器界面,在按windows+1 可以收回浏览器,从而回到编辑器界面

原文地址

上一章 - 2 HTML中的body和它的默认样式

下一章 - 4 display属性对其他css属性的影响

猜你喜欢

转载自blog.csdn.net/weixin_34342905/article/details/91370515
今日推荐