首先了解下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. iframe子页面与父页面元素的访问以及js变量的访问

    1.子页面访问父页面元素  parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素  document.getEle ...

  2. JDK8 HashMap--treeify()树形化方法

    /*创建红黑树*/ final void treeify(Node<K,V>[] tab) { TreeNode<K,V> root = null;// 定义红黑树根节点roo ...

  3. PHP 获取一篇文章内容中的全部图片,并下载

    做个记录,在工作or面试中有可能会遇到function downImagesFromTargetUrl($url, $target_dir = null) { if(!filter_var($url, ...

  4. vert.x 学习笔记

    Verticle 一个verticle是部署在Vert.x.单位 每个verticle包含启动它的主要手段. 一个应用程序可以是单个verticle或者可以由与彼此经由事件总线通信的多个verticl ...

  5. redis 字符串(string)函数

    字符串(string)函数 get 命令/方法/函数 Description Get the value related to the specified key 取得与指定的键值相关联的值 Para ...

  6. Idea导包与打包

    今天做了一个javavuser协议的性能测试,需要导入jar包,将jar包粘贴到lib下面后不知道怎么加到工程当中, 1,下面分享一下有关导包的流程: 先是在jar 右键,如图 : 选择项目结构,选择 ...

  7. C# 截取两个字符串中间的子字符串

    /// <summary> /// 截取中间字符 /// </summary> /// <param name="text">全字符串</ ...

  8. spring mvc get请求中文乱码问题

    使用Spring MVC进行get请求时发现get请求带上中文参数,后台收到的是乱码,即使加了encoding filter也没用. 原因是,encoding filter 是针对post请求的,to ...

  9. java项目word文件转html文件

    最近在项目开发中用户提出要在电脑上没有装office时在浏览器中打开word文件,最后确定的逻辑:用户选择想要查看的文件,页面js判断文件是否为word.不是执行下载,是后端根据word文件后缀访问对 ...

  10. oracle使用 extract获取当前时间,并比较两个时间

    --根据当前时间戳获取年月日时分秒,其中sysdate不能用于获取时分秒select systimestamp, extract(year from systimestamp) year ,extra ...