浅谈window、document、html和body的区别

在学习html的过程中，很多同学都会把window、doucment、 html和body四者混淆，现将四者的区别进行分别阐述:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            width:100px;
            height:100px;
            background:aqua;
        }
    </style>
    <script>
        window.onload=function(){
            //window的高度
            var oC=document.documentElement.clientHeight;
            alert(oC);
            //document的高度
            var oBox=document.getElementById("box");
            var scrollHeight=document.documentElement.scrollHeight;
            oBox.onclick=function(){
                alert(oBox.scrollHeight);               
            };
        };      
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

如上例子，我们可以简单理解：
window的意思是窗口，它是指窗口大小的可视高度，不包括浏览器滚动条，
高度为document.documentElement.clientHeight;
document的意思是文档，它是指具体的一个对象的内容高度，高度为对象的document.documentElement.scrollHeight;
在代码里面可以看到，body是包含在html里的，在标准浏览器里面html部分是等于body部分的。

最后编辑于：2017.12.05 17:59:51

浅谈window、document、html和body的区别

推荐阅读更多精彩内容