JavaScript常用BOM操作API

1.BOM简介

BOM 是 Browser Object Model，浏览器对象模型,BOM提供了专门操作浏览器窗口或软件的API。BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。

JavaScript的实现包括以下3个部分：
1.核心（ECMAScript）：描述了JS的语法和基本对象。

2.文档对象模型 （DOM）：处理网页内容的方法和接口

3.浏览器对象模型（BOM）：与浏览器交互的方法和接口

2.BOM对象

BOM对象分为：

window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；

location 对象，浏览器当前URL信息；

navigator 对象，浏览器本身信息；

screen 对象，客户端屏幕信息，可获取用户设备的种类

history 对象，浏览器访问历史信息

##window 对象

弹框：

alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")

navigator对象

navigator对象包含了所有浏览器的配置信息。

navigator.platform：操作系统类型；

navigator.userAgent：浏览器设定的User-Agent字符串。

navigator.appName：浏览器名称；

navigator.appVersion： 浏览器版本；

navigator.language：浏览器设置的语言；

navigator.cookieEnabled: 判断cookie是否启用(true是启用了)

navigator.plugins — 是个集合 判断是否安装了指定插件(plugin)

history对象

history对象保存当前窗口打开后，成功访问过的url的历史记录栈，内容不对开发人员开放，无法修改，只能进行三个操作：

前进：history.go(1); //前进一次

后退：history.go(-1);

刷新：history.go(0);

3. 浏览器窗口尺寸相关

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度 包含滚动条
可视区宽高：
document.documentElement.clientWidth 可视区 宽度 不包含滚动条
document.documentElement.clientHeight 可视区 高度 不包含滚动条

4.滚动距离

document.documentElement.scrollTop IE其他浏览器
document.documentElement.scrollLeft //横向
document.body.scrollTop 低版本chrome

5.滚动事件

croll 鼠标滚轮滚动或者点击滚动条

window.onscroll=function(){
    
}

6. load事件

网页加载事件：等待网页html/css资源加载完毕后触发

注意：

一个html文件中只能出现一次，如果出现多次，下面会覆盖上面的

使用场景：
如果js写在头部，应该将所有的js代码，扔进window.onload事件中，否则获取不了元素