什么是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. sed 常用命令

    删除以ifeq开头的行 sed -i "/^ifeq/d" file 删除空行 sed -i '/^$/d' file

  2. 设计模式学习笔记——State状态模式

    从一个类中,将有关状态的处理分离出来,独立成类,并面向接口编程.作用是可以简化代码,避免过多的条件判断:if-else-

  3. day 18 面向对象的 继承

    一.概念性知识 面向对象的三大特征:     继承,多态,封装 继承是创建新类的一种方法,在python中,新建的类可以继承一个或多个父类,父类称作基类或超类,新建的类又称作派生类或子类. 继承的好处 ...

  4. JavaScript重点记忆

    String的常用方法 indexOf() 返回字符串中检索指定字符第一次出现的位置 lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置 match() 找到一个或多个正则表达式的 ...

  5. springboot实现定时任务的两种方式

    方式一:在springboot启动类上添加@EnableScheduling注解,然后创建具体的任务类,在方法上添加@Scheduled注解,并指明执行频率即可.如下: @Componentpubli ...

  6. java.lang.ClassNotFoundException: org.springframework.boot.context.embedded.FilterRegistrationBean

    java.lang.ClassNotFoundException: org.springframework.boot.context.embedded.FilterRegistrationBean 把 ...

  7. Java面试手写代码题

    1.栈实现 2.Iterator实现 3.单例 4.多线和控制(暂停,恢复,停止) 5.生产者消费者

  8. linux初级学习笔记五：bash特性详解！(视频序号：03_2，3)

    本节学习的命令:history,alias,ualias,\CMD 本节学习的技能:   bash的特性 光标跳转 查看命令历史 命令历史的使用技巧 给命令起别名 命令替换 文件名通配符 shell: ...

  9. Silverlight DataBinding Converter：根据binding对象调整显示

    Silverlight DataBinding Converter:根据binding对象调整显示 我希望写一系列关于Silverlight DataBinding的文章,分别讲解Silverligh ...

  10. 一步一步学Silverlight 2系列（21）：如何在Silverlight中调用JavaScript

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...