首先了解下document

HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

  • 文档是一个文档节点。
  • 所有的HTML元素都是元素节点。
  • 所有 HTML 属性都是属性节点。
  • 文本插入到 HTML 元素是文本节点。are text nodes。
  • 注释是注释节点。

Document 对象

当浏览器载入HTML 文档,它就会成为 Document 对象

Document对象是HTML文档的根节点。

Document对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

通过document访问页面内的元素,document.documentElement返回html dom中的root 节点 即<html>,document.body返回html dom中的body节点 即<body>

所以document.documentElement是<html></html>元素,document.body是<body></body>元素。如果发现两个高度不一样,是css设置的问题,你的html高度不一定高于body。

用body查看,其中clientHeight即为body的css高度

用documentElement,其中clientHeight即为html的css高度

网上很多说document.documentElement.clientHeight或者document.body.clientHeight为可见高度,其实这要看body或者html标签的css怎么设的,当body的height(css设定)一开始就和scrollHeight相等时,是不能作为可见高度的。

document.documentElement.clientHeight和document.body.clientHeight区别的更多相关文章

  1. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  2. document.body.clientHeight与document.documentElement.clientHeight

    当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...

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

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

  5. document.documentElement和document.body区别

    body是DOM对象里的body子节点,即body标签, documentElement 是整个节点树的根节点root, 详细介绍请看本文,感兴趣的朋友可以参考下   区别: body是DOM对象里的 ...

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

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

  7. document.documentElement和document.body区别以及获取浏览器的宽高

    原文:http://www.jb51.net/article/41410.htm 1.区别: body是DOM对象里的body子节点,即 <body> 标签: documentElemen ...

  8. 【转】document.documentElement和document.body的区别

    转自:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 网页中获取滚动条卷去部分的高度,可以通过 document.body ...

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

    网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...

  10. document.body 与 document.documentElement区别介绍

    什么是document.body? 返回html dom中的body节点 即<body> 什么是 document.documentElement? 返回html dom中的root 节点 ...

随机推荐

  1. ORACLE 数据库管理

    [故障处理]ORA-12162: TNS:net service name is incorrectly specified 本文将给大家阐述一个因未设置系统环境变量ORACLE_SID导致ORA-1 ...

  2. win7系统删除打印机后刷新又出现怎么办

    方法/步骤:1.进入桌面后,按下“Win + R”组合键打开运行窗口,在运行中输入“spool”并点击确定:2.之后会进入路径为“C:\Windows\System32\spool”的文件夹中,3.在 ...

  3. CentOS 7 内核优化

      [root@DaMoWang ~]# vim /etc/sysctl.conf #关闭ipv6 net.ipv6.conf.all.disable_ipv6 = net.ipv6.conf.def ...

  4. Oracle数据库的一些重要概念

    一.oracle数据库的结构 完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例. 1) 数据库是一系列物理文件的集合(数据文件,控制文件,联机日志,参数文件等): 2) Ora ...

  5. 阿里云 SSL 证书 总结

    历时2天左右的证书上传部署,终于结束了! 因为公司要开发小程序,小程序部署到开发环境必须支持https证书行. 阿里云目前的证书还是比较多的额,大致分为2类,一类是支持单域名,一类是支持泛域名. 自己 ...

  6. Task3

    姓名:蔡典 学号:1425052044 班级:信管142 兴趣爱好:电影,美剧,游戏 个人编程能力:较弱,没自己写过代码 码云账号:18809188@qq.com 直接搜索码云然后进入官网输入基本信息 ...

  7. 编译jmeter5.0源码

    jmeter5.0使用过程中,遇到request或者response乱码的情况,想要一次性解决这个问题,需要编译ApacheJMeter_http.jar这个包(lib\ext文件下)里的Reques ...

  8. Oarcle之组函数

    组函数 avg 求20部门的平均薪水为多少? select avg(sal) avgsal from emp where deptno = 20:  sum 求20部门的员工的总薪水 select s ...

  9. 小白のjava实现wc.exe功能

    GitHub地址 项目完成情况 基本功能列表(已实现) wc.exe -c file.c     //返回文件 file.c 的字符数 wc.exe -w file.c    //返回文件 file. ...

  10. 使用GoldenGate EVENTACTIONS执行数据的实时触发和定制化

    Oracle GoldenGate不仅可以在线实时同步数据(包括增量和存量),也内置有一套事件触发流程,允许用户根据某张表某条记录的某个特殊字段值,触发相应的自定义执行流程,比如接收到某个银行账号的大 ...