1，JS中方便的获取元素尺寸的办法就是offset家族
offsetWidth 、 offsetHeight得到对象的宽度和高度(自己的，与他人无关)
offsetWidth = width+padding+border
offsetLeft、offsetTop 返回距离上级盒子（offsetParent-带有定位）左边/上边的位置，如果父级都没有定位则以body为准
offsetLeft、offsetTop 从父亲的padding 开始算，父亲的border 不算
offsetParent：返回改对象的父级（带有定位）
如果当前元素的父级元素没有进行CSS定位 （position为absolute或relative，fixed）， offsetParent为body。
如果当前元素的父级元素中有CSS定位 （position为absolute或relative，fixed）， offsetParent取最近的那个父级元素。
offsetTop和style.top 区别：
offsetTop返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
offsetTop只读，而 style.top 可读写。
如果没有给HTML 元素指定过 top 样式，则 style.top返回的是空字符串。
2，Math函数
•Math.ceil() 向上取整
•Math.floor() 向下取整
•Math.round(); 四舍五入
3，Scroll家族
scrollWidth/scrollHeight 内容的宽高（不包含border，如果有内容超出了显示内容的高度）
有padding 的情况： scrollWidth =width + padding-left + padding-right
内容高度>父盒子高度 ：scrollHeight = height + padding-top
内容高度<父盒子高度 ：scrollHeight = height + padding-top + padding-bottom
• IE67可以比盒子小。IE8+火狐谷歌不能比盒子小
scrollLeft/scrollTop被卷去的左侧和头部（浏览器无法显示的左/头部） 监听事件 ：element.onScroll=function(){}
有兼容性问题
① 未声明 DTD 时（谷歌只认识他）document.body.scrollTop
② 已经声明DTD 时（IE678只认识他）document.documentElement.scrollTop
③ 火狐/谷歌/ie9+以上支持的 window.pageYOffset
兼容性写法：
(document.title document.head document.body document.documentElement --- 文档的html标签)
var scrollTop= window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
4，判断是否声明DTD
document.compatMode=== "BackCompat"
•BackCompat 未声明
•CSS1Compat 已经声明（IE678默认识别CSS1Compat，无论有没有dtd）
•注意大小写
5，事件对象event
在触发dom 事件的时候会产生一个事件对象event,该对象包含所有与事件的相关信息。
普通浏览器支持 event（带参，任意参数）
ie 678 支持 window.event（无参，内置）
总结：他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息
兼容性写法，btn.onclick=function(event){ var event = event || window.event; //(主要用这种) }
screenX、pageX和clientX的区别
PageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面，（IE67）不支持）
ScreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）
ClientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）
兼容写法：在页面位置就等于 = 看得见的+看不见的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
6,client可视区域
clientWidth 获取网页可视区域宽度（两种用法） clientWidth： width + padding 不包含border、margin
clientHeight 获取网页可视区域高度（两种用法）
调用者不同，意义不同：
盒子调用：指盒子本身。
body\html浏览器调用：可视区域大小。
clientX 鼠标距离可视区域左侧距离（event调用）
clientY 鼠标距离可视区域上侧距离（event调用）
-------------------------------------------------------三大家族区别----------------------------------------------------
宽高：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth =width + padding +border
offsetHeight =height + padding + border
scrollWidth =内容宽度（不包含border，包含padding）
scrollHeight =内容高度（不包含border，内容高包含上padding，容器高包含上padding）
上下：
offsetTop/offsetLeft ：
调用者：任意元素。(盒子为主)
作用：距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:
调用者：document.body.scrollTop/.....(window)
作用：浏览器无法显示的部分（被卷去的部分）。
clientY/clientX:
调用者：event.clientX(event)
作用：鼠标距离浏览器可视区域的距离（左、上）。
client家族之检测浏览器的宽/高度
ie9及其以上的版本 window.innerWidth/Height
标准模式（有DTD）（“CSS1Compat”）
document.documentElement.clientWidth
document.documentElement.clientHeight
怪异模式（没有DTD）
document.body.clientWidth
document.body.clientHeight
7,Json
var myjson={k1:v1,k2:v2,k3:v3}
获取方式：v1 == myjson.k1 v2 ==myjson.k2
8，清除选中的内容
window.getSelection? window.getSelection().removeAllRanges() :document.selection.empty();
IE9、Firefox、Safari、Chrome和Opera支持：window.getSelection()
IE9以下支持：document.selection
网友评论