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

已于 2023-02-09 18:47:45 修改
阅读量315 收藏 2
点赞数
分类专栏： 知识点 面试 文章标签： html bom dom document window
于 2023-02-05 21:22:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rowlet/article/details/128893791
版权
本文详细介绍了HTML文档中的window、html、body和document的区别，强调了window作为全局对象的角色，以及document对象在操作DOM中的作用。同时，探讨了document.body与document.documentElement的不同，并解析了clientWidth属性在不同情况下的应用。最后，文章回顾了BOM和DOM的概念，阐述了BOM中的window、location、history等对象及其属性和方法，以及DOM在网页内容操作中的重要性。
摘要由CSDN通过智能技术生成

文章目录

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">
最低0.47元/天 解锁文章
前端OnTheRun
关注
专栏目录
前端基础HTML、css、js基础、js高级（DOM、bom）
03-02
BOM中的重要对象有`window`（全局对象，代表浏览器窗口）、`navigator`（获取浏览器信息）、`location`（处理URL）和`document`（与DOM相关，但更偏向于浏览器层面的操作）。 学习并熟练掌握这些基础知识点，是成为...
html、body、document、window 的区别
明天也要努力的博客
07-06 1925
在 JavaScript 中：window 对象是一个虚拟的对象，浏览器在打开 HTML 文档时生成 window 对象，可以把它看作是所使用的浏览器的窗口，其地位很高。因为它是浏览器脚本引擎中的 globalObject。可以用 window 对象访问窗口中绘制的文档、窗口中发生的事件和影响窗口的浏览器特性。浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。BOM的核心对象是 window，它表示一个实例。在浏览器中，window 对象有双重角色，它既
document.body 属性
m0_57835615的博客
05-29 4586
document.body 属性用于设置或返回文档体。 1.返回当前文档的 <body&gt; 元素
JavaScript中的DOM（一）
m0_51636525的博客
05-20 954
1.DOM的理解 DOM称为文档对象模型（Document Object Model） 将页面所有内容表示为可以修改的对象 ◼浏览器会对我们编写的HTML、CSS进行渲染，同时它又要考虑我们可能会通过JavaScript来对其进行操作：  于是浏览器将我们编写在HTML中的每一个元素（Element）都抽象成了一个个对象；  所有这些对象都可以通过JavaScript来对其进行访问，那么我们就可以通过JavaScript来操作页面；  所以，我们将这个抽象过程称之为 文档对象模型（D
html dom 对象 window对象 document对象,HTML DOM Window 对象
weixin_42397220的博客
06-21 163
HTML DOM Window 对象Window 对象Window 对象用于描述浏览器窗口. A Window object is created automatically with every instance of a or tag.IE: Internet Explorer, F: Firefox, N: Netscape, W3C: World Wide Web Consortium...
document.body 获取body元素
小泽
02-01 577
前端开发-笔试面试题大全md.zip
最新发布
04-09
这份资料以Markdown格式编写，易于阅读和整理，下面我们将深入探讨其中可能涵盖的知识点。 1. HTML基础： - HTML标签：包括常用的基本标签，如`<head&gt;`，`<body&gt;`，`<div&gt;`，`<p&gt;`，`<a&gt;`等，以及语义化标签，如`...
w3c school包含HTML,CSS,JavaScript
03-20
### W3C School 包含 HTML、CSS 和 JavaScript 的详细知识点 #### HTML (HyperText Markup Language) ##### HTML 基本参考手册 HTML 是一种标记语言，用于创建网页结构。W3C School 提供了一个全面的 HTML 基本...
12-07 课堂笔记1
08-08
2. DOM（Document Object Model）：文档对象模型，是HTML和XML文档的结构化表示，允许JavaScript通过编程方式操作网页元素。例如，添加、删除或修改HTML元素。 3. BOM（Browser Object Model）：浏览器对象模型，...
JavaScript-学习笔记.pdf
08-04
以上是JavaScript学习笔记中提到的一些核心知识点，通过对这些知识点的理解和熟练应用，可以为进一步学习和掌握JavaScript打下坚实的基础。在实际开发过程中，结合具体的项目需求，这些知识会得到更深入的拓展和应用...
document.body
yhj68100055的博客
01-29 220
document.body
html、body、document、window四者的区别是什么
lele的博客
01-11 1003
html 有多重意义，既是超文本传输协议，也是 HTML 文档的根元素，其他元素都是其子元素。 body body 元素包含了文档的可见内容，HTML 文档最终显示的内容都是其子元素。document.body 可以直接访问此元素。 document document 对象是 window 的子属性，用来访问页面中的元素，保存着操作 DOM 的 API。 window window 对象在文档打开时自动创建，保存着 DOM，BOM，核心JS 等所有内容。 对于客户端 JS 而言，window
window、document、html和body的区别
mozuncangtianbaxue的博客
12-03 6057
转载自：http://www.jianshu.com/p/ed95cda2f5aa window的意思是窗口，它是指窗口大小的可视高度，不包括浏览器滚动条， 高度为document.documentElement.clientHeight; document的意思是文档，它是指具体的一个对象的内容高度，高度为对象的document.documentElement.scrollHeight; 在代码
Document常见方法属性
tdx03的博客
01-05 1968
在前端开发中，DOM（文档对象模型）扮演着重要的角色。它允许我们使用JavaScript来与网页文档进行交互，实现动态的网页效果。DOM的核心部分之一就是Document对象，它代表了整个HTML文档。在本篇博客中，我们将深入探讨Document对象，包括它的属性、方法以及如何使用它来操纵网页内容。Document对象是DOM的根节点，代表整个HTML文档。通过Document对象，您可以访问和操纵HTML文档的各个部分，包括元素、属性、文本内容等。属性方法解释通过元素的id属性获取元素。
同样是获取页面窗口的大小：innerWidth和document.documentElement.clientWidth的区别
YY的博客
10-20 553
innerWidth和document.documentElement.clientWidth的区别
js的window对象--clientHeight、clientWidth、innerHeight、innerWidth
热门推荐
LLL_liuhui的博客
03-14 1万+
浏览器窗口的尺寸(就是内容部分，可以看见的部分，不包括工具栏和滚动条) 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5： document.docume
web前端面试-- window.innerWith、window.outerWidth、clientWidth、offsetWidth、scrollWidth的区别
Penk的博客
11-06 1155
它是元素内容区域的宽度，可以通过CSS的width属性来设置。例如，如果一个div元素的宽度为200px，内边距为10px，那么它的clientWidth就是200px - 2 * 10px = 180px。
BOM屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别
ynd_sg的博客
03-31 655
基本介绍 $(window).width()与$(window).height() $(window).width()与$(window).height()：获得的是屏幕可视区域的宽高，不包括滚动条与工具条。 $(window).width() = width + padding $(window).height() = height + padding document.documen...
详解clientWidth，scrollWidth，offsetWidth，innerWidth
weixin_45096939的博客
10-26 4174
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。scrollHeight和scrollWidth还可以获取Dom元素中内容实际占用的高度和宽度.scrollLeft后面的值必须是number类型，表示的是滚动左侧隐藏的部分。clientWidth也可以用来获取元素的宽高，不包含元素的border.offset用来获取DOM元素中内容高度和宽度时包括元素的border.window.innerHeight=浏览器窗口的内部高度。
HTML、CSS和JavaScript基础知识点总结
Javascript知识点汇总 本文档总结了 Javascript 的知识点，包括 HTML 概要知识点、Css 样式表、Javascript 理论知识点、Javascript 核心语法、Javascript 基本应用、Javascript 中的对象等方面的内容。 HTML 概要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值