documentElement和body区别介绍
作者：邹阳 | 发表于：2016-04-14 14:59:34
阅读量：（203） | 所属栏目：编程
document.documentElement和document.body区别介绍
区别：
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
没使用DTD情况即怪异模式BackCompat下：
document.documentElement.clientHeight=0 document.body.clientHeight=618
使用DTD情况即标准模式CSS1Compat下：
document.documentElement.clientHeight=618 document.body.clientHeight=28(表示内容的高度)
document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下：
如果是标准模式，则document.compatMode的值等于”CSS1Compat“，
如果是怪异模式，则document.compatMode的值等于”BackCompat“，
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
当文档有了标准声明时， document.compatMode 的值就等于 "CSS1compat"，
因此， 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight：document.body.clientHeight;
当文档有了标准声明时火狐的style.top等等的设置必须加上“px”等单位，否则它不会认。既然已经说道了这，再展开一下。对于火狐：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式（即使在css中设定也不行），则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
区别：
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
没使用DTD情况即怪异模式BackCompat下：
document.documentElement.clientHeight=0 document.body.clientHeight=618
使用DTD情况即标准模式CSS1Compat下：
document.documentElement.clientHeight=618 document.body.clientHeight=28(表示内容的高度)
document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下：
如果是标准模式，则document.compatMode的值等于”CSS1Compat“，
如果是怪异模式，则document.compatMode的值等于”BackCompat“，
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
当文档有了标准声明时， document.compatMode 的值就等于 "CSS1compat"，
因此， 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight：document.body.clientHeight;
当文档有了标准声明时火狐的style.top等等的设置必须加上“px”等单位，否则它不会认。既然已经说道了这，再展开一下。对于火狐：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式（即使在css中设定也不行），则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。