2022-02-05 window,html,body和document的区别,BOM和DOM相关知识点

前端OnTheRun

已于 2023-02-09 18:47:45 修改

阅读量395

点赞数

分类专栏：知识点面试文章标签： html bom dom document window

于 2023-02-05 21:22:02 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/128893791

版权

知识点同时被 2 个专栏收录

90 篇文章

订阅专栏

面试

43 篇文章

订阅专栏

本文详细介绍了HTML文档中的window、html、body和document的区别，强调了window作为全局对象的角色，以及document对象在操作DOM中的作用。同时，探讨了document.body与document.documentElement的不同，并解析了clientWidth属性在不同情况下的应用。最后，文章回顾了BOM和DOM的概念，阐述了BOM中的window、location、history等对象及其属性和方法，以及DOM在网页内容操作中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.window,html,body和document的定义

html

html是HTML文档的根元素,在.html文件中,其他所有元素都是其子元素

body

body代表document的主体子对象,除了浏览器头部,页面中能够看到的内容都属于body的内容

window

window代表浏览器打开的窗口,代表运行环境,在恰当打开时自动创建window对象
window对象保存着DOM,BOM,核心JS等所有内容
对于客户端JS,window对象是其全局对象,通过访问window对象提供的客户端api操作DOM,可以实现包括不限于发起网络请求,进行本地存储,开启定时器,获取浏览器信息等功能

document

document对象代表整个html文档,可以用来访问页面的所有元素,保存着操作DOM的api

2.window,html,body和document的区别

document对象时一个与当前文档相关的对象,拥有一些操作文档的功能,功能上与window对象相仿
window对象还有一些操作浏览器窗口的功能
document对象地位没有window对象高
window拥有其他根对象的引用.包括browser、navigator、location 等
document元素对象是属于html文档的dom对象,可以认为就是HTML源代码中那些标签所化成的对象,与div,ul,p这些标签对象没有本质区别

3.document.body 和 document.documentElement的区别

document.body是DOM中Document对象中的body节点
document.documentElement是文档对象html节点的引用

整个文档的一个根就是<html>,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。
而body是子节点，要访问到body标签，在脚本中应该写：document.body。

4.document.body.clientWidth、document.documentElement.clientWidth和window.innerWidth的区别

示例

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html{
      /* 2.1.设置宽高都超出窗口大小*/
      width: 2000px;
      /* 1.出现纵向滚动条时 */
      height:1000px;
      background-color:pink;
    }
    body{
      /* 去除body自带的margin值 */
      margin:0;
      /* height:200px; */
      /* 2.2.此时body的宽高为2000和200,html的宽高为856 640,窗口宽高(innerWidth和innerHeight)为873 657 */
      background-color:green;
    }
  </style>
</head>
<body>
  
</body>
<script>
  /*body和document.body*/
var body=document.querySelector("body");
console.log(body===document.body);//true:document.body获取body标签
console.log(document.body.clientWidth,document.body.clientHeight);//832 200

 /*html和documentElement*/
var html=document.querySelector("html");
console.log(html===document.documentElement);//true:document.documentElement获取html标签
console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);//848 657
//结论:body自带margin,导致832<848

/*innerWidth和innerHeight*/
console.log(window.innerWidth,window.innerHeight);//848 657
</script>
</html>

结论

document.body.clientWidth获取的是body标签的宽度,而document.documentElement.clientWidth获取的是html标签的宽度,在去除body自带margin值且宽高没有达到出现滚动条的情况下,.html和body宽高相等
宽高都出现滚动条且body不设宽高,那么 document.body.clientWidth是html中设置的宽度,高度是0
innerWidth代表的窗口的宽度,它包括了可能出现的滚动条的宽度,而document.documentElement.clientWidth不包括滚动条的宽度,因为滚动条不是html标签的一部分(没有滚动条两者就相等),也就是说window.innerWidth=0 | 纵向滚动条的宽度+document.documentElement.clientWidth

5.复习:BOM和DOM

javascript由三个部分组成:EMCAScript,BOM和DOM,其中:

ECMAScript:javascript的核心,描述了JS语法和基本对象
BOM:浏览器对象,与浏览器交互的方法与对象
DOM:文档对象模型,处理网页内容的方法和接口

BOM(Browser Object Model):浏览器对象模型

BOM提供了一系列对象,用于与浏览器窗口进行交互,这些对象统称为BOM

有哪些BOM对象?

在这里插入图片描述

window对象:浏览器窗口对象,主要用于操作浏览器,是浏览器中最大的对象,也是BOM核心对象

(以下都是window内置子对象)

location对象:地址栏对象,提供了对地址栏操作的方法和属性
history对象:浏览历史对象,提供了对浏览器历史记录的操作方法和属性
screen对象:屏幕对象:获取屏幕的信息
navigate对象:浏览器对象,提供了获取浏览器啊信息的方法和属性
document对象:文档对象,代表整个网页,是DOM的根节点

图示document对象和window对象的区别

window对象的属性和方法

属性

主流浏览器

属性名	描述
window.innerWidth	获取当前网页可显示区域的宽度
window.innerHeight	获取当前网页可显示区域的高度

IE浏览器

属性名	描述
document.documentElement.clientWidth	获取当前网页可显示区域的宽度
document.documentElement.clientHeight	获取当前网页可显示区域的高度

方法

alert()
prompt()
comfirm()
open(待打开网页/窗口名/输入框默认值)
close()关闭当前子网页

history对象的属性和方法

属性

history.length:返回当前窗口历史记录

方法

方法名	作用
history.forward()	前进一步
history.back()	后退一步
history.go(n)	n为正,前进n步,为负则后退n步

location对象的属性和方法

location对象包含url的相关信息,history对象不能具体反映url的相关信息
属性

location.href:设置或返回完整的url
location.search:返回url的"?"后面的查询部分字段(参数)
location.hash:是一个可读写的字符串,是URL的锚部分,即返回URL的"#"后面的部分

** 方法**

location.reload():刷新页面,一般参数为true,不使用缓存刷新

其他
因为url字符串第一个"#“号后面出现的任何字符都会被浏览器解读为位置标识符,即”#"后面的字符不会发送到服务器端,如

　http://www.example.com/?color=#fff
　https://miaosha.jd.com/#11782112078