documentElement 和 body 相关说明

最新推荐文章于 2021-08-11 17:43:57 发布
最新推荐文章于 2021-08-11 17:43:57 发布
阅读量684 收藏
点赞数
本文详细解释了DOM中的body和documentElement的区别及其应用场景。介绍了DOM树的概念，并提供了页面具有不同DTD时的兼容性解决方案。

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

body是DOM对象里的body子节点，即 <body> 标签；

documentElement 是整个节点树的根节点root，即<html> 标签；


DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。

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




DTD相关说明：


页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。

页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。

在 IE 和 Firefox 中均是如此。

为了兼容，不管有没有 DTD，可以使用如下代码：


var scrollTop = window.pageYOffset  //用于FF
                || document.documentElement.scrollTop  
                || document.body.scrollTop  
                || 0;

macleer
关注
了解 HTML 中的window、document、body和元素的尺寸及位置
一名全栈开发工程师
05-27 1245
本文将详细介绍与窗口（window）、文档（document）、主体（body）以及其他 HTML 元素的尺寸和位置相关的属性及方法。
关于window.pageYOffset和document.documentElement.scrollTop
12-10
`window.pageYOffset` 和 `document.documentElement.scrollTop` 都是用来获取或设置网页滚动条位置的属性，但它们之间存在细微的区别。 首先，`window.pageYOffset` 是一个只读属性，它返回浏览器窗口在垂直方向上...
document.documentElement和document.body区别介绍
09-05
body是DOM对象里的body子节点，即body标签，documentElement 是整个节点树的根节点root，详细介绍请看本文，感兴趣的朋友可以参考下
document.documentElement和document.body的区别
weixin_30851409的博客
11-27 214
DTD相关说明： 页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。 页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。 在 IE 和 Firefox 中均是如此。 为了兼容，不管有没有 DTD，可以使用如下代码： var scrollTop = window.pageYOff...
documentElement和body的区别
iteye_2952的博客
08-15 303
documentElement和body的区别： body是DOM对象里的body子节点，即 标签； documentElement 是整个节点树的根节点root，即 标签。 DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。 以HTML超文本标记语言为例：整个文档的一个根就是...
用document.documentElement取代document.body的原因分析
01-19
上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。 那我们怎么办呢？难道加上了文档...
vue3中移动端适配怎么给html和body设置font-size16
07-24
我们参考用户提供的引用内容，尤其是引用[2]和引用[3]，来解决用户的问题。 用户需求：在Vue3中进行移动端适配时，设置HTML和Body的字体大小为16px。 根据引用[2]和[3]，我们可以知道： 1. 使用amfe-flexible库...
documentElement只获取head
最新发布
07-25
### 关键说明 1. **`document.documentElement`** 返回整个文档的根元素`<html>`（如引用[2]所述），这是获取文档结构的基础[^2]。 2. **`getElementsByTagName('head')`** 从`<html>`元素中搜索`<head>`标签：...
document.documentElement与document.body
莹儿的博客
01-14 264
两种特殊的文档属性可用来访问根节点： document.documentElement document.body 第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。 第二个属性是对 HTML 页面的特殊扩展，提供了对 标签的直接访问。 【文档类型已申明】 IE document.documentElement.scrollHeight 浏览器所有内容高度 document....
document.body 与 document.documentElement区别
weixin_45172119的博客
08-11 649
document.body 与 document.documentElement区别 （1）什么是document.body？ 返回html dom中的body节点 即<body> （2）什么是 document.documentElement？ 返回html dom中的root 节点 即<html> （3）document.documentElement 与 document.body的应用场景 获取 scrollTop 方面的差异 ①在chrome(版本
documentElement 和 body 的区别
foolman_pc的博客
08-18 598
页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。 页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。 为了兼容，不管有没有 DTD，建议同时用 用两种写法表示。 body是DOM对象里的body子节点，即 标签； documentElement 是
document.documentElement 和 document.body
weixin_33744854的博客
01-08 183
document.documentElement 对&lt;html /&gt;元素的引用 document.documentElement === document.getElementsByTagName('html')[0] document.body 对&lt;body /&gt;元素的引用 document.body === document.getElementsByTa...
body.offsetHeight
04-06
### JavaScript 中 `body.offsetHeight` 的使用说明 #### 定义与基本概念 `offsetHeight` 是 DOM 元素的一个属性，表示元素的内容高度加上其边框和内边距（padding），但不包括外边距（margin）。对于 `<body>` 元素而言，它的 `offsetHeight` 可能会受到多种因素的影响，比如文档声明、CSS 设置以及浏览器的行为差异。 当存在标准文档声明（如 `<!DOCTYPE html>`）时，`document.body.offsetHeight` 的值可能为 0。这是因为，在标准模式下，`<body>` 并不是真正的根节点容器[^2]。相反，应该考虑使用 `document.documentElement` 来代替 `document.body` 获取页面的高度或宽度。 #### 解决方案 为了可靠地获取窗口的可见区域尺寸，推荐以下方式： 1. **优先使用 `document.documentElement`** 如果需要获取整个文档的高度或者宽度，建议直接操作 `document.documentElement` 而非仅依赖于 `document.body`。例如： ```javascript const winHeight = Math.max( document.documentElement.scrollHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight ); ``` 2. **兼容性处理** 需要注意的是，某些旧版浏览器可能会表现出不同的行为。因此可以通过条件判断来确保跨平台一致性： ```javascript function getDocumentHeight() { return Math.max( document.body.scrollHeight || 0, document.documentElement.scrollHeight || 0, document.body.offsetHeight || 0, document.documentElement.offsetHeight || 0, document.body.clientHeight || 0, document.documentElement.clientHeight || 0 ); } console.log(getDocumentHeight()); ``` 3. **移除文档声明的影响** 若发现因文档声明导致异常情况发生，可尝试调整 HTML 文件头部结构以适应特定需求。不过通常并不提倡完全省略 DOCTYPE 声明，因为这可能导致其他渲染问题[^4]。 #### 实际应用案例分析 假设我们需要动态计算当前网页可视范围内的实际大小以便进一步布局设计，则可以采用如下代码片段实现这一目标： ```javascript function getWindowSize() { let w = window.innerWidth; let h = window.innerHeight; if (!w && typeof screen !== 'undefined') { // Fallback for older browsers. w = screen.width; h = screen.height; } return {width:w,height:h}; } console.log(getWindowSize().height); ``` 此函数利用了现代 API 提供的功能，并提供了向后兼容机制以防万一遇到过时环境下的特殊情况[^5]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值