原生jsBom对象？看这一篇就够了！！！

BOM属性方法

window.screen.width // 屏幕宽
window.screen.availWidth // 屏幕可用宽

window.history.back() // 下一页
window.history.forward() // 上一页
window.history.go() // 某一页

window.location.href  // 获取完整路径
window.location.pathname // 获取路径名
window.location.reload( ) //刷新本页面

window.navigation
// 表示支持内容导航的窗口。

BOM和DOM的区别

bom事件

window.onload事件
// 该事件是等body里面的内容加载完毕，在加载js代码

window.onresize事件
// 窗口大小改变事件

window.onscroll事件
// 滚动条滚动事件

加载事件

window.addEventListener('load',function(){   // js代码   })
//load 等页面内容全部加载完毕，包含页面 dom元素，图片，flash，css 等在执行，等同于 window.onload

document.addEventListener('DOMContentLoaded',function(){  //js代码  })
// DOMContentLoaded 是等 DOM 加载完毕，不包含 图片，css，flash等，就可以执行

关于元素尺寸的方法

宽高

// 只有dom元素能获取,document/window是不能获取的
offsetWidth       //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
offsetHeight      //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
offsetParent
获得定位的 相对父节点偏移量
offsetLeft
offsetTop
clientWidth        //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
clientHeight       //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
style.width         //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
style.height       //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
scrollWidth       //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
scrollHeigh       //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
scrollTop
scrollLeft

注意

1. style.width 返回的是字符串，如28px，offsetWidth返回的是数值28；
2. style.width/style.height是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性
3. style.width的值需要事先定义，否则取到的值为空。而且必须要定义在html里(内联样式)，如果定义在css里，style.height的值仍然为空，但元素偏移有效；而offsetWidth则仍能取到。

getBoundingClientRect()
// 相对于浏览器的偏移量

// 获得计算过的样式
let name = window.getComputedStyle(dom对象).属性名

滚动距离

scrollTop;   //向上滚动的距离
scrollLeft;   //向左滚动的距离

偏移距离

offsetTop；	//向上偏移的距离
offsetLeft：	//向左偏移的距离

返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。
所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。

鼠标尺寸

clientX        //鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；  不随滚动条滚动而改变；
clientY        //鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；  不随滚动条滚动而改变；
pageX        //鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；  随滚动条滚动而改变；
pageY        //鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；  随滚动条滚动而改变；
screenX     //鼠标相对于显示器屏幕左上角x轴的坐标；  
screenY      //鼠标相对于显示器屏幕左上角y轴的坐标；  
offsetX        //鼠标相对于事件源左上角X轴的坐标
offsetY        //鼠标相对于事件源左上角Y轴的坐标
pageX=clientX+document.documentElement.scrollTop || document.body.scrollTop;

图解

窗口尺寸

获取浏览器的视窗大小

var vW= window.innerWidth || document.documentElement.clientWidth;
var vH= window.innerHeight || document.documentElement.clientHeight;

当前网页内内容大小 + padding

var tW=document.documentElement.scrollWidth || document.body.scrollWidth;
var tH=document.documentElement.scrollHeight || document.body.scrollHeight;

当前网页内内容大小 + padding + border

// offsetHeight = clientHeight + 滚动条 + 边框。
var oW=document.documentElement.offsetWidth||document.body.offsetWidth; 
var oH=document.documentElement.offsetHeight||document.body.offsetHeight;

操作系统屏幕大小

window.screen.width
window.screen.height

浏览器内容可视窗口大小

window.innerWidth
window.innerHeight

浏览器窗口

window.outerwidth
window.outerHeight

scrollwidth  // 元素实际宽高
scrolltop // 元素滚动距离
offsetX	 // 相对父集偏移
getbuddingclientrect // 元素尺寸宽高

总结
获得元素位置
offset 系列
获取元素大小
client 系列
获取滚动距离
scroll 系列
页面滚动的距离
window.pageXOffset