什么是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. ubuntu 用shell脚本实现将当前文件夹下全部文件夹中的某一类文件复制到同一文件夹下

    当前文件夹下有一些文件和文件夹,当中每一个文件夹里都有若干.txt文件. 如今要求在当前文件夹创建一个新文件夹all,且将那些文件夹全部.txt文件 都复制到文件夹all.在ubuntu12.04的s ...

  2. Java堆内存与栈内存对比

    在数据结构中,堆和栈可以说是两种最基础的数据结构,而Java中的栈内存空间和堆内存空间有什么异同,以及和数据结构中的堆栈有何关系? 一.Java 堆存储空间 堆内存(堆存储空间)会在Java运行时分配 ...

  3. (Android 即时通讯) [悬赏],不管是谁发现一个漏洞奖励人民币1000元!

    悬赏,不管是谁发现一个漏洞奖励人民币1000元! 3Q Android 手机版即时通讯系统正式推出,可与电脑版 地灵(http://im.yunxunmi.com) 即时通讯系统互通!  适用于:小米 ...

  4. seafile看不见repo报500错误的解决方法

    环境 seafile-server-6.2.5 centos7.5 1804 现象 seafile服务器所在的VPS没动过,前一天seafile用还好好的,昨天客户端突然不能登录了,显示“服务器内部错 ...

  5. Uboot中start.S源码的指令级的详尽解析【转】

    本文转载自:http://www.crifan.com/files/doc/docbook/uboot_starts_analysis/release/html/uboot_starts_analys ...

  6. POJ1860 Currency Exchange —— spfa求正环

    题目链接:http://poj.org/problem?id=1860 Currency Exchange Time Limit: 1000MS   Memory Limit: 30000K Tota ...

  7. read appSettings in configuration file by XElement with xmlns

    https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/linq/how-to-write-queries- ...

  8. 【Selenium】验证是否按照字母顺序排列, 不区分大小写

    验证是否按照字母顺序排列, 不区分大小写 for(int j=0;j<s.length-1;j++){ String temp1=s[j].toLowerCase(); String temp2 ...

  9. luogu 4782【模板】 2-SAT 问题

    2-SAT就是给出$m$个限制表示$x==val_x || y==val_y$ 求出满足的解 每个点拆成两个点,如果$x$不满足则$y$一定满足,$y$不满足同理.这样我们连边,然后$tarjan$即 ...

  10. 区间DP 等腰三角形

    题目描述:给定一个正N边形,可以通过连线将这个多边形分割成N-2个三角形,问这N-2个三角形中恰有k个等腰三角形的分割方法有多少?这个值可能很大,输出对9397取模的结果.数据范围:n,k <= ...