什么是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. notepad++的f90配置文件

    notepad++仅支持f77格式的,所以f90格式需要重新定义配置文件 传送门: http://ehc.ac/p/notepad-plus/discussion/331753/thread/8f72 ...

  2. ID--HANDLE--HWND三者之间的互相转换

    利用PreTranslateMessage,响应按钮控件的按下(WM_LBUTTONDOWN)和松开(WM_LBUTTONUP)   VC的button控制只有两个事件,一个是单击事件,一个事双击事件 ...

  3. VUE 之 组件

    组件是为了解决页面布局的. 什么是单页面? 答:整个页面的切换都是在这个页面上进行变化的,没有页面的刷新. 1.全局组件 1.1全局组件流程:    1.创建全局组件======>创建一个Vue ...

  4. cat /proc/cpuinfo | awk -F: '/name/{print $2}' | uniq -c

    cat /proc/cpuinfo | awk -F: '/name/{print $2}' | uniq -c

  5. URAL 1731. Dill（数学啊 ）

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1731 1731. Dill Time limit: 0.5 second Memory ...

  6. HDU 6114 Chess 【组合数】（2017"百度之星"程序设计大赛 - 初赛（B））

    Chess Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  7. About "self"

    Class method can't refer derectly to instance variables. Within the body of  a class method, self re ...

  8. mysql数据库引擎InnoDB和MyISAM的区别

    InnoDB支持行级锁和表级锁(默认行级锁),支持事务,外部键等:大量的insert和update更快等.只有通过索引条件检索数据,InnoDB 才使用行级锁,否则,InnoDB 将使用表锁. MyI ...

  9. vue 中的组件通信

    vue中组件通信,一般分为三种情况,父与子,子与父,子子之间. 一.父与子通信 父组件将值传给子组件,一般通过props,设置默认的类型.调用的时候通过 xx=" ", 或者:XX ...

  10. POJ3621 Sightseeing Cows 最优比率环 二分法

    题目链接:http://poj.org/problem?id=3621 Sightseeing Cows Time Limit: 1000MS   Memory Limit: 65536K Total ...