什么是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区别介绍的更多相关文章

  1. document.documentElement和document.body区别介绍

    document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...

  2. document.body、document.documentElement和window获取视窗大小的区别

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...

  3. document.body 和 document.documentElement 的区别

    document.body 和 document.documentElement 的区别 : www.cnblogs.com/scy251147/archive/2011/04/10/2011420. ...

  4. document.body和document.documentElement区别

    1.document.documentElement表示文档节点树的根节点,即<html> document.body是body节点 2. 页面具有 DTD,或者说指定了 DOCTYPE ...

  5. document.body、document.documentElement和window获取视窗大小的差别

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗体大小的三种方法(浏览器的视口,不包含工具栏和滚动栏). 对于In ...

  6. document.getElementById和document.querySelector的区别

    zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...

  7. document.ready和onload的区别

    转自:http://holysonll.blog.163.com/blog/static/2141390932013411112823855/ document.ready和onload的区别——Ja ...

  8. JS 页面加载触发事件 document.ready和onload的区别（转）

    原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...

  9. js中的 window.location、document.location、document.URL 对像的区别（转载）

    原文:http://www.cr173.com/html/18417_1.html 当我们需要对html网页进行转向的时候或是读取当前网页的时候可以用到下面三个对像: window.location. ...

随机推荐

  1. 小程序 单页应用的 tab切换 实现

    小程序 单页应用的  tab切换 实现

  2. RabbitMQ Connector

    https://ci.apache.org/projects/flink/flink-docs-master/dev/connectors/rabbitmq.html RabbitMQ Source ...

  3. RFC外部断点在在SAP退出后会失效

    rfc外部断点系统退出后会删除吗?  不会删除Rfc外部断点在在SAP退出后标识还在, 但是断点会失效! 附 断点消息: ABAP 中的断点分为静态和动态两种.一. 静态断点(Static Break ...

  4. JS是否确认提示 +页面跳转

    JS友好提示 +页面跳转 function logout()...{if (confirm("你确定要注销身份吗?是-选择确定,否-选择取消"))...{window.locati ...

  5. aapt2 错误

    android.enableAapt2=false Error:Execution failed for task ':app:preDebugAndroidTestBuild'. > Conf ...

  6. I2S

    音频数据传输而制定: Inter—IC Sound : 单线 时钟和数据一条线,时分复用: 标准的I2S总线电缆是由3根串行导线组成的:1根是时分多路复用(简称TDM)数据线:1根是字选择线:1根是时 ...

  7. JS中的存储机制

    一.堆和栈的介绍 1.堆和队,是先进先出:栈,是先进后出,就跟水桶差不多: 2.存储速度:堆和队的存储速度较慢,栈的存储速度较快,会自动释放: 二.js中存储的类型 1.堆,一般用于复杂数据类型,存储 ...

  8. HDU1358 Period —— KMP 最小循环节

    题目链接:https://vjudge.net/problem/HDU-1358 Period Time Limit: 2000/1000 MS (Java/Others)    Memory Lim ...

  9. html5--6-7 CSS选择器4

    html5--6-7 CSS选择器4 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作 ...

  10. ubuntu下tesseract 4.0安装及参数使用

    tesseract是一个开源的OCR引擎,最初是由惠普公司开发用来作为其平板扫描仪的OCR引擎,2005年惠普将其开源出来,之后google接手负责维护.目前稳定的版本是3.0.4.0版本加入了基 ...