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;
document.body 与 document.documentElement区别介绍的更多相关文章
- document.documentElement和document.body区别介绍
document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
- document.body 和 document.documentElement 的区别
document.body 和 document.documentElement 的区别 : www.cnblogs.com/scy251147/archive/2011/04/10/2011420. ...
- document.body和document.documentElement区别
1.document.documentElement表示文档节点树的根节点,即<html> document.body是body节点 2. 页面具有 DTD,或者说指定了 DOCTYPE ...
- document.body、document.documentElement和window获取视窗大小的差别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗体大小的三种方法(浏览器的视口,不包含工具栏和滚动栏). 对于In ...
- document.getElementById和document.querySelector的区别
zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...
- document.ready和onload的区别
转自:http://holysonll.blog.163.com/blog/static/2141390932013411112823855/ document.ready和onload的区别——Ja ...
- JS 页面加载触发事件 document.ready和onload的区别（转）
原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...
- js中的 window.location、document.location、document.URL 对像的区别（转载）
原文:http://www.cr173.com/html/18417_1.html 当我们需要对html网页进行转向的时候或是读取当前网页的时候可以用到下面三个对像: window.location. ...
随机推荐
- HDU2489 Minimal Ratio Tree 【DFS】+【最小生成树Prim】
Minimal Ratio Tree Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- 李洪强iOS开发之 - block的使用
李洪强iOS开发之 - block的使用 01 - 定义block //支付block typedef void(^invokePayBlock)(CFBaseOrderModel *model ...
- PHP琐碎学习
在子类中如果定义了__construct则不会调用父类的__construct,如果需要同时调用父类的构造函数,需要使用parent::__construct()显式的调用. class Car { ...
- python 爬虫1 開始，先拿新浪微博開始
刚刚開始学. 目的地是两个.一个微博,一个贴吧 存入的话,临时还没想那么多.先存到本地目录吧 分词和推荐后面在整合 mysql mongodb hadoop redius 后面在用 我最终知道为什么大 ...
- 谈谈java垃圾回收机制
近期看了一些关于垃圾回收机制的文章,总结一下. 垃圾回收器回收程序不在使用的对象占用的内存,也就是对象不可达,比方说对象被置为null. 要回到java的垃圾回收机制,从下面三个方面去回答: 1.哪些 ...
- VUE 之 生命周期
1. Vue实例的生命周期分为8个周期 1.1 beforeCreate:在实例创建前 <div id="app"> {{ name }} <button @cl ...
- 常用SQL备忘录
联表删除: delete t1,t2 from table_name t1 left join t2 on t1.id=t2.id where t1.id=23 (ps:该语句在mysql 5.0之前 ...
- idea 破解注册方法总结
注册码(无期限) JetbrainsCrack-2.6.2.jar适用于ideaIU-2017.2.之前版本,若版本较新适用 JetbrainsCrack-2.6.3_proc.jar. 其中Jetb ...
- hihoCoder 1578 Visiting Peking University 【贪心】 （ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛）
#1578 : Visiting Peking University 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 Ming is going to travel for ...
- redis08----集群
集群的作用: .主从备份,防止主机宕机 .读写分离,主服务器写,从服务器内容跟着主服务器,主服务器变他就变,读就从从服务器读.减轻主服务器的负担. .任务分离,比如消耗cpu和内存的操作,交给从服务器 ...