document.body 与 document.documentElement区别

于 2021-08-11 17:43:57 发布
阅读量596 收藏 2
点赞数 2
分类专栏： JavaScript 系列
原文链接：https://blog.csdn.net/qq_42445490/article/details/88819053?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommen
版权

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(版本 52.0.2743.116 m)下获取scrollTop只能通过document.body.scrollTop,而且DTD是否存在,不会影响 document.body.scrollTop的获取。
通过console查看结果：

demo 1 with doctype : http://jsbin.com/cisacam 
demo 2 without doctype: http://jsbin.com/kamexad/16

②在firefox(47.0)及 IE(11.3)下获取scrollTop，DTD是否存,会影响document.body.scrollTop 与 document.documentElement.scrollTop的取值
在firefox(47.0)

页面存在DTD，使用document.documentElement.scrollTop获取滚动条距离；
页面不存在，使用document.body.scrollTop 获取滚动条距离

demo 1 with doctype : http://jsbin.com/cisacam 
demo 2 without doctype: http://jsbin.com/kamexad/16

③IE(11.3)

页面存在DTD，使用document.documentEelement.scrollTop获取滚动条距离

页面不存在DTD,使用document.documentElement.scrollTop 或 document.body.scrollTop都可以获取到滚动条距离

demo 1 with doctype : http://jsbin.com/cisacam 
demo 2 without doctype: http://jsbin.com/kamexad/16

（4）兼容解决方案：

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

原文链接：https://blog.csdn.net/qq_42445490/article/details/88819053?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control

黄不逗
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
由document.body和document.documentElement想到的
01-19
其实这个对于我们开发兼容性的web页面还是很有帮助，我们都知道，盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在不声明Doctype的情况下，浏览器默认是Quirks Mode。所以为兼容性考虑，我们可能需要...
用document.documentElement取代document.body的原因分析
01-19
上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。 那我们怎么办呢？难道加上了文档...
document.documentElement和document.body区别介绍
09-05
body是DOM对象里的body子节点，即body标签，documentElement 是整个节点树的根节点root，详细介绍请看本文，感兴趣的朋友可以参考下
document.documentElement和document.body的区别
weixin_30851409的博客
11-27 177
DTD相关说明： 页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。 页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。 在 IE 和 Firefox 中均是如此。 为了兼容，不管有没有 DTD，可以使用如下代码： var scrollTop = window.pageYOff...
document.documentElement与document.body
XNhaaa的博客
03-15 1113
写前端时遇到这两种方法，转载待以后查看。 两种特殊的文档属性可用来访问根节点： document.documentElement document.body 第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。 第二个属性是对 HTML 页面的特殊扩展，提供了对 &lt;body&gt; 标签的直接访问。 【文档类型已申明】 IE document.docume...
document.body 和 document.documentElement
zanazh的专栏
10-29 541
1）document.body和document.documentElement比较：         document.body是DOM中Document对象里的body节点， document.documentElement是文档对象根节点(html)的引用。         IE在怪异模型（quick mode）下document.documentElement无法正确取到clietHe
解决VUE中document.body.scrollTop为0的问题
12-09
页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DOCTYPE时，使用document.body。 IE和Firefox都是如此。 以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享...
document.body 与 document.documentElement区别介绍
diansui0710的博客
03-28 277
什么是document.body？ 返回html dom中的body节点 即<body> 什么是document.documentElement？ 返回html dom中的root 节点 即<html> document.documentElement 与 document.body的应用场景 获取 scroll...
document.body和document.documentElement比较
热门推荐
百川异源，终归于海
02-10 1万+
document.body和document.documentElement比较：     document.body是DOM中Document对象里的body节点， document.documentElement是文档对象根节点(html)的引用。     IE在怪异模型（quick mode）下document.documentElement无法正确取到clietHeight scrol
document.body和document.documentElement区别
weixin_34228387的博客
03-11 315
1.document.documentElement表示文档节点树的根节点，即<html> 　document.body是body节点 2.　页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement 　　页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body 　　在 IE 和 Firefox ...
document.documentElement和document.body区别
我的博客
09-06 1497
区别： body是DOM对象里的body子节点，即 标签； documentElement 是整个节点树的根节点root，即 标签； 没使用DTD情况即怪异模式BackCompat下： document.documentElement.clientHeight=0 document.body.clientHeight=618 使用DTD情况即标准模式CSS
document.body 与 document.documentElement
ISaiSai的专栏
01-18 2035
document.body 是 body节点 document.documentElement 是 html 根节点<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="container"></div><script>
let top = document.documentElement.scrollTop || document.body.scrollTop为啥写两个怎么理解
最新发布
07-23
它使用了两个条件，分别是`document.documentElement.scrollTop`和`document.body.scrollTop`。 `document.documentElement.scrollTop`是获取文档根元素（即`<html>`元素）的滚动距离。在大多数现代浏览器中，这个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值