首先了解下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. C#中DataTable与XML格式的相互转换

    1.DataTable转换成XML public string ConvertDataTableToXML(DataTable xmlDS) { MemoryStream stream = null; ...

  2. pycharm的断点调试与TODO标记

    断点调试的方法: 断点调试在程序比较大的时候调试运用的比较多 点击Pycharm软件右上角绿色三角形右边的小甲鱼图标,点击之后会弹出断点调试的界面 Debug是用来调试bug的 terminal 是终 ...

  3. git冲突管理

    Diff 查看工作区(working directory)和暂存区(staged)之间差异:git diff 查看工作区(working directory)与当前仓库版本(repository)HE ...

  4. 迷宫问题 （bfs广度优先搜索记录路径）

    问题描述: 定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, ...

  5. 【速读】——Shangxuan Tian——【ICCV2017】WeText_Scene Text Detection under Weak Supervision

    Shangxuan Tian——[ICCV2017]WeText_Scene Text Detection under Weak Supervision 目录 作者和相关链接 文章亮点 方法介绍 方法 ...

  6. python,Day1，基础1

    主要内容 1.python介绍 2.发展史 3.安装 4.hello world程序 5.变量 6.用户输入 7.模块 8.数据类型 9.数据运算 10.if...else语句 11.while循环 ...

  7. Java -- 构造函数 & this & 方法重写和方法重载的区别

    JAVA: 今天总结一下构造方法.关键字.方法重载和方法重写的异同   一.构造方法(构造函数)1.构造方法的作用:一是创建对象时调用构造方法创建对象,二是可以初始化多个属性 [学生类创建一个学生对象 ...

  8. eclipse端口号冲突解决办法

    解决办法如下: 1.打开cmd 2.输入 netstat   -ano|findstr  8080  然后按回车键(8080对应你的端口号) 3.输入 taskkill  /pid  6856  /f ...

  9. SQL server 删除日志文件 秒删

    直接执行 USE [库名称]GOALTER DATABASE [库名称] SET RECOVERY SIMPLE WITH NO_WAITGOALTER DATABASE  [库名称] SET REC ...

  10. zigbee 安全通信加密链接密钥

    ---恢复内容开始--- #define KEY_TYPE_TC_MASTER  0        // Trust Center Master Key信任中心主密钥#define KEY_TYPE_ ...