document.documentElement和document.body的区别

1.两种特殊的文档属性可用来访问根节点

    document.documentElement

    document.body

    第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

    第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。

2.DTD已声明 

    1.IE
      document.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度
      document.documentElement.scrollTop  浏览器滚动部分高度,document.body.scrollTop 始终为0
      document.documentElement.clientHeight  浏览器可视部分高度,document.body.clientHeight  浏览器所有内容高度

    2.FF

      document.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度
      document.documentElement.scrollTop  浏览器滚动部分高度,document.body.scrollTop 始终为0
      document.documentElement.clientHeight 浏览器可视部分高度,document.body.clientHeight  浏览器所有内容高度

    3.chrome

      document.documentElement.scrollHeight  浏览器所有内容高度, document.body.scrollHeight  浏览器所有内容高度
      document.documentElement.scrollTop 始终为0,document.body.scrollTop  浏览器滚动部分高度
      document.documentElement.clientHeight  浏览器可视部分高度,document.body.clientHeight  浏览器所有内容高度

3.DTD未声明 

    1.IE
      document.documentElement.scrollHeight  浏览器可视部分高度,document.body.scrollHeight  浏览器所有内容高度 
      document.documentElement.scrollTop 始终为0,document.body.scrollTop  浏览器滚动部分高度
      document.documentElement.clientHeight 始终为0,document.body.clientHeight  浏览器可视部分高度

    2.FF

      document.documentElement.scrollHeight  浏览器可视部分高度, document.body.scrollHeight 浏览器所有内容高度
      document.documentElement.scrollTop 始终为0,document.body.scrollTop 浏览器滚动部分高度
      document.documentElement.clientHeight 浏览器所有内容高度,document.body.clientHeight 浏览器可视部分高度

    3.chrome

      document.documentElement.scrollHeight 浏览器可视部分高度,document.body.scrollHeight 浏览器所有内容高度
      document.documentElement.scrollTop 始终为0,document.body.scrollTop 浏览器滚动部分高度
      document.documentElement.clientHeight 浏览器所有内容高度,document.body.clientHeight 浏览器可视部分高度

4.概念

    1.浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和

    2.浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度

    3.document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop

    4.scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body

5.document.compatMode 可以用来判断是否声明了DTD

    BackCompat:标准兼容模式关闭。  浏览器客户区宽度是document.body.clientWidth;

    CSS1Compat:标准兼容模式开启。 浏览器客户区宽度是document.documentElement.clientWidth。

    浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。

原文地址:https://www.cnblogs.com/yxkNotes/p/13967535.html