js常用属性

document.documentElement.offsetHeight ：css height值+滚动条宽度
document.body.offsetHeight：css height值

$---------------------$

IE、FF
document.documentElement.scrollTop：加上滚动条的宽度
chrome
document.body.scrollTop

可视区尺寸
document.documentElement.clientWidth document.documentElement.clientHeight 不加上滚动条宽度

window.innerHeight: document.documentElement.clientHeight+滚动条+1px
window.outerHeight:ie9及以上，左右下有空隙,如下

window.screenX
firefox、chrome、ie9~虚边界
window.screenY
firefox、chrome、ie9~
window.screenLeft
firefox、chrome虚边界、ie7~实边界
window.screenTop
firefox、chrome、ie7~可视边界

css width、height包括内容与滚动条
element.clientWidth&clientHeight
ie7~ firefox chrome 内容包括padding
element.offsetWidth&Height
ie7~ firefox chrome 外边界
element.clientTop&Left
ie7~ Firefox chrome边框宽度
element.offsetTop&Left
ie8~ firefox chrome 可视区 ie7 margin

event.clientX
event.clientY
到可视区的距离

event.screenX;
event.screenY;
到屏幕的距离

javascript中childNodes与children的区别

1、childNodes：获取节点，不同浏览器表现不同；

IE：只获取元素节点；

非IE：获取元素节点与文本节点；

解决方案：if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != ‘3’) continue

2、children：获取元素节点，浏览器表现相同。

因此建议使用children。

firstChild与firstElementChild

相同点：获取父节点下的第一个节点对象；

不同点：
1、firstchild：IE6,7,8：第一个元素节点；

非IE6,7,8：第一个节点，文本节点或者元素节点；

2、firstElementChild：IE6,7,8：不支持；

非IE6,7,8：第一个元素节点；

function firstChild(obj){
if(obj.firstElementChild) return obj.firstElementChild;
return obj.firstChild
}

lastChild与lastElementChild

相同点：获取父节点下的最后一个节点对象；

不同点：
1、lastchild：IE6,7,8：最后一个元素节点；

非IE6,7,8：最后一个节点，文本节点或者元素节点；

2、lastElementChild：IE6,7,8：不支持；

非IE6,7,8：最后一个元素节点；

nextSibling与nextElementChild

相同点：获取后一个兄弟节点对象；

不同点：
1、nextSibling：IE6,7,8：后一个兄弟元素节点；

非IE6,7,8：后一个兄弟节点，文本节点或者元素节点；

2、lastElementChild：IE6,7,8：不支持；

非IE6,7,8：后一个兄弟元素节点；

previousSibling与previousElementChild

相同点：获取前一个兄弟节点对象；

不同点：
1、previousSibling：IE6,7,8：前一个兄弟元素节点；

非IE6,7,8：前一个兄弟节点，文本节点或者元素节点；

2、previousElementChild：IE6,7,8：不支持；

非IE6,7,8：前一个兄弟元素节点；

parentNode：

获取父元素，不存在兼容性问题。

offsetParent：

获取第一个设置定位的父元素；

 offsetLeft：获取离第一个定位父元素的左距离；

 offsetTop：获取离第一个定位父元素的上距离；