JavaScript进阶篇之高级程序设计

一、ECMAScript

二、文档对象模型（DOM）

1、getBoundingClientRect

getBoundingClientRect()用于获取某个元素相对于视窗的位置对象。对象中有top, right, bottom, left等属性。
rectObject.top：元素上边到视窗上边的距离;
rectObject.right：元素右边到视窗左边的距离;
rectObject.bottom：元素下边到视窗上边的距离;
rectObject.left：元素左边到视窗左边的距离;
兼容性：很好

2.pageYOffset/scrollY

pageYOffset是 scrollY 的别名。
window.scrollY是文档从顶部开始滚动过的像素值。
为了跨浏览器兼容，请使用 window.pageYOffset 代替 window.scrollY。另外，旧版本IE（<9）两个属性都不支持，必须使用其他的非标准属性。完整的兼容性代码如下：

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

3.innerHeight

window.innerHeight为浏览器窗口的视口的高度。
window.innerHeight 属性为只读，且没有默认值。

4.offsetTop

距离它的父元素顶部的距离

var d = document.getElementById("div1");
var topPos = d.offsetTop; 
if (topPos > 10) {
  // div1 距离它的 offsetParent 元素的顶部的距离大于 10 px
}

三、浏览器对象模型（BOM）