DOM操作琐碎知识点

1. parentWindow 与 defaultView
parentWinow是IE下document的特有属性，表示的是document所在的window对象
defaultView DOM Level2中引入的属性，document.defaultView指向默认的AbstractView。

2. 各种坐标以及维度属性

 

 

元素可见区域宽/高(不包括border)： clientWidth/clientHeight
元素可见区域宽/高(包括border)： offsetWidth/offsetHeight
元素整体宽/高(包括因滚动而隐藏的部分)： scrollWidth/scrollHeight
元素被隐藏内容的尺寸： scrollTop(超出顶部的内容高度)/scrollLeft(超出左边的内容宽度)
页面可视区顶部离屏幕顶部/左边的距离： window.screenTop/screenLeft(IE下有效、Firefox下无该属性、Chrome下的值比较令人费解）
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度/宽度： window.screen.availHeight/availWidth(即分辨率减去任务栏等非工作区的高度或宽度，在IE、Firefox、Chrome下均有效)

offsetLeft：获取对象相对于页面(body)或由其offsetParent属性所指定的父元素左侧的位置
offsetTop：获取对象相对于页面(body)或由offsetParent属性所指定的父元素顶端的位置event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标

clientWidth = width + padding
clientHeight = height + padding
offsetHeight = border + height+ padding
offsetWidth = border + width + padding
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

3. document.body 与 document.documentElement
CSS1compat（Standard）模式下使用document.documentElement
BackCompat(Quirks)下使用document.body，可以这样判断：
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;

测试的结果：
CSS1Compat（Standard）模式下（包含DOCTYPE），
如果要取document的clientWidth则使用document.documentElement.clientWidth
BackCompat(Quirks)模式下（无DOCTYPE），
如果要取document的clientWidth则使用document.body.clientWidth

注意：对于opera，无论哪个模式下都用body.clientWidth取

4. pageXOffset 与 scrollLeft
计算页面已经滚动的距离（隐藏部分），在IE下使用document.documentElement.scrollLeft或者document.body.scrollLeft，在其他浏览器下使用pageXOffset。
pageYOffset与scrollTop相对
非DOM标准内容

5. 判断当前页面的模式（使用document.compatMode）
如果为CSS1Compat则为Standard Mode
如果为BackCompat则为Quirks Mode

6. window.innerWidth 与 window.innerHeight
相当于clientWidth和clientHeight加上滚动条的宽度（如果有滚动条的话），IE下无该属性
非DOM标准内容

7. window.outerWidth 与 window.outerHeight
整个浏览器的宽度和高度，包括工具栏、菜单栏等，IE下无该属性
非DOM标准内容