JavaScript学习笔记---BOM相关知识
## BOM
由 Browser Object Model（浏览器对象模型） 简写而来 ，它提供了很多对象，用于访问浏览器的功能，没有规范，BOM的核心是window。所有浏览器都支持window对象，在浏览器中，window对象有双重角色，他是通过Javascript访问浏览器的一个接口，又是ECMAscript规定的全局对象。
使用window对象中的属性和方法时，window前缀可以省略
## 系统对话框
1.alert 最常用弹出框，仅有'确认'按钮
2.confirm 带有‘确认’和‘取消’按钮弹出框，返回布尔值 true-确认 false-取消
3.prompt 带有输入框的弹出框 返回字符串【输入框的内容】
## open 与 close 方法
1.open 用于打开页面，相当于跳转，
【跳转方式：(默认)_blank - 新页面跳转 ； _self - 当前页跳转】
【页面属性如：height=100, width=400, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no】
window.open('页面路径【若是线上路径一定要加http请求头】','跳转方式','页面属性')
2.close 关闭当前页面 相当于右上角红色x
## location对象
能提供当前窗口中加载文档有关信息，会提供一些导航功能，提供当前地址信息
hash: 一般称为哈希值，拿到 # 后值
host: 服务器名称和端口号【如果有】
hostname：不带端口号的服务器名称
href: 返回当前加载页面完整的url
pathname: 返回当前页面文件名
port: 返回端口号
protocol: 返回请求头
search: ? 后的值
location还能跳转页面,默认当前页跳转【若是线上路径一定要加http请求头】
window.location = '新页面地址'
## history对象
历史操作 【跳转、返回等】
history.go(m); m<0 返回某m步【相当于回退键】 m>0 前进m步【相当于前进键】 m=0刷新
history.back() 返回一步， 相当于history.go(-1)
history.forward() 前进一步，相当于history.go(1)
## navigator对象
检测网页浏览器类型
appCodeName：浏览器代号
appName：浏览器名称
appVersion：浏览器版本
language：浏览器语音
platform：硬件平台
cookieEnabled：是否启用cookie
userAgent：用户代理
## body位置属性
## client系列
元素.clientWidth： width+padding【左右】
元素.clientHeight： height+padding【上下】
元素.clientLeft： 左边框宽度
元素.clientTop： 上边框宽度
获取页面可视宽：document.body.clientWidth || document.documentElement.clientWidth
获取页面可视高：document.body.clientHeight || document.documentElement.clientHeight
## offset系列
元素.offsetWidth: width+padding【左右】+border【左右】
元素.offsetHeight: height+padding【上下】+border【上下】
元素.offsetLeft: 返回最近一个有定位属性的【属性值不为static】父系元素的左边距值，若父系元素都没有定位则返回根据body的左边距
元素.offsetTop: 返回最近一个有定位属性的【属性值不为static】父系元素的上边距值，若父系元素都没有定位则返回根据body的上边距
## scroll系列
页面滚动的距离 【配合滚动事件onscroll获取】
元素.scrollWidth: 元素实际内容的宽
元素.scrollHeight: 元素实际内容的高
元素.scrollLeft: 页面/元素 卷去的宽度【滚动时】
元素.scrollTop: 页面/元素 卷去的高度【滚动时】
## onresize事件
浏览器尺寸改变事件
window.onresize = function(){ // 窗口发生尺寸改变事件
alert('变了')
}
## 懒加载
只加载可视区部分的内容，其他地方内容，用户拖拽到该位置才进行加载。
优点：提高页面性能，提高浏览网页速度
