document.body 与 document.documentElement区别介绍

什么是document.body？

返回html dom中的body节点 即<body>

什么是 document.documentElement？

返回html dom中的root 节点 即<html>

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

兼容解决方案：

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

转载于:https://www.cnblogs.com/agansj/p/7874842.html

document.body 与 document.documentElement区别介绍相关推荐

document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
document.body和document.documentElement的区别
document.body和document.documentElement的区别主要在<html>文件中有没有DTD声明. 详情参看<docuement.body和document ...
“约见”面试官系列之常见面试题之第六十九篇之document.ready和onload的区别（建议收藏）
document.ready和onload的区别为:加载程度bai不同du.执行次数不同.执行速度zhi不同. 一.加载程度不同 1.document.ready:在DOM加载完成dao后就可以可以对 ...
MongoDB：SpringBoot有关@Document(collection = )与@Document(collation= )注解的区别
目录 QUESTION:SpringBoot有关@Document(collection = "")与@Document(collation= "")注解的区别 ...
document.ready和onload的区别
document.ready和onload的区别--JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二是on ...
javascript 中的window, document, screen都有什么区别？
谷歌之后,从stackoverflow上找到的高赞答案: https://stackoverflow.com/questions/9895202/what-is-the-difference-betw ...
关于document.selection和TextRange对象的介绍
document.selection只有IE支持 window.getSelection()也只有FireFox和Safari支持,都不是标准语法. selection 对象代表了当前激活选中区,即高 ...
if vue 跳出_vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展. v-if 是直接删除dom节点, 就是这 ...
document 和 window.document
通常我在写javascript的时候从来没有意识到document和window.document之间是有区别的,实际使用过程中也确实没有遇到问题,但是这埋下了非常大的隐患,当出现问题时,这个bug就 ...

document.body 与 document.documentElement区别介绍

document.body 与 document.documentElement区别介绍相关推荐

最新文章

热门文章