所属分类：web前端开发
【相关推荐：javascript视频教程、web前端】
窗口加载事件：
调整窗口大小的事件：
window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口
微博登录
QQ登录window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");计时器：
window.scroll(x, y)
window.scrollTo(x, y)：两者是一样的用法 改变横向和垂直的滚动条的位置，前提是必须有滚动条在页面中
window.scrollBy(x, y)：滚动条的累加滚动，正数向下 ，负数向上 window.scrollBy(0, 10)：每100毫秒调用一次的时候，滚动条运动10个像素
window.getComputedStyle(elem, 伪类)
对话框
运行js脚本，将js代码以同步执行方式放入执行栈，运行执行栈过程中遇见JS异步代码（事件、计时器、ajax、资源加载load、error）放入web APIs（任务队列），当执行栈里的代码运行完成以后，去任务队列里拿第一个进行执行，执行外以后在去任务队列拿一个过来执行，反复执行（事件循环）直到任务队列里的执行完成
window.history 用于获取当前页面的地址URL，并把浏览器重定向到新的页面
http://www.itcast.cn:80/index.html?name=andy&age=1#link http：通信协议 www.itcast.cn：域名80：端口 index.html：路径?name=andy&age=1：参数 #link 片段：锚点、链接
对象属性：
对象方法：
navigator：封装浏览器配置信息的对象
window.history 对象包括浏览器的历史（url）集合
window.screen 对象包含有关用户的信息
// screen:获得显示设备的分辨率大小 // 完整的分辨率:screen.widht/height // 如何鉴别客户端的种类 兼容所有的客户端 宽度 // 大屏 中屏 小屏 超小屏 // lg md sm xs // TV pc pad phone //宽 >= 1200 >=992 >= 768 < 768 // 全掉任务栏之后剩余的分辨率 // screen.availHeight/availWidth
可以动态得到该元素的位置（偏移）、大小等
offset系列常用属性：
动态获取元素的边框大小、元素大小等
常用属性：
动态获取元素的大小、滚动距离
常用属性
滚动条在滚动的时候会触发onscroll事件
window.pageXOffset/pageYOffset IE8 及IE8以下不兼容 document.body/documentElement.scrollLeft/scrollTop兼容性比较混乱，用时取两个值相加，因为不可能存在两个值同时有值 封装兼容性方法，求滚动条滚轮滚动距离getScrollOffet()
/*
封装一个获取滚动条的滚动距离
返回：x:水平滚动条滚动的距离 y:垂直滚动条滚动的距离
*/function getScrollOffet(){
if(window.pageXOffset){
return {//对象的{}一定要在关键字后，否则系统会自动加上; 则返回值会是undefined
x : window.pageXOffset,
y : window.pageYOffset }
}else{//兼容IE8以及以下
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop }
}}window.innerWidth/innerHeightIE8及IE8以下不兼容(注意：这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度) document.documentElement.clientWidth/clientHeight标准模式下，任意浏览器都兼容 document.body.clientWidth/clientHeight适用于怪异某事下的浏览器 封装兼容性方法，返回浏览器视口尺寸getViewportOffset()
/*封装返回浏览器视口尺寸
返回值：
w ：视口的宽度
h : 视口的高度
*/function getViewportOffset(){
if(window.innerWidth){
return {
w : window.innerWidth,
h : window.innerHeight }
}else{ //兼容IE8以及以下的浏览器
if(document.compatMode == 'BackCompat'){
//怪异渲染模式下
return {
w : document.body.clientWidth,
h : document.body.clientHeight }
}else{
// 标准模式
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight }
}
}}console.log(document.compatMode);// BackCompat 怪异模式// CSS1Compat 标准模式domElement.getBoundingClientRect() 兼容性很好；返回一个对象，该对象中有left、top、right、bottom等属性，left、top代表元素左上角的X和Y坐标， right和bottom表示元素右下角的X和Y坐标height 和 width属性老版本IE未实现 返回的结果并不是’实时的’
// 获取元素在文档中的位置function getElementPosition(target){
// 支持 BoundingClientRect()方法
if(0 && target.getBoundingClientRect){
var pos = target.getBoundingClientRect();
return { // 涉及到滚动条有移动的情况下 加上滚动条的位置
x : pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft),
y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop)
}
} else {
var pos = {
left : 0,
top : 0
}
var _elm = target;
while(target.offsetParent){
if(_elm == target){//首次累加left 和 top
pos.left += target.offsetLeft;
pos.top += target.offsetTop;
}else{
pos.left += target.offsetLeft + target.clientLeft;
pos.top += target.offsetTop + target.clientTop;
}
// target 重新赋值
target = target.offsetParent;
}
return { x : pos.left, y : pos.top}
}}状态栏
窗口位置
其他属性
【相关推荐：javascript视频教程、web前端】
以上就是整理总结JavaScript常见的BOM操作的详细内容，更多请关注zzsucai.com其它相关文章！
