JavaScript常用BOM操作API总结

• 1.BOM简介
• 2.BOM对象
• 2.1 window 对象
• 2.1.1弹框类：
• 2.1.2打开窗口(4种)：
• 2.1.3 关闭窗口

2.2 location对象

2.3. navigator对象

2.4 history对象

2.5 screen对象

3. 浏览器窗口尺寸相关

4.滚动距离

5.滚动事件

6. load事件

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 对象，浏览器访问历史信息

2.1 window 对象

2.1.1弹框类：

alert('提示信息')

confirm("确认信息")

prompt("弹出输入框")

2.1.2打开窗口(4种)：

1.在当前窗口打开，可后退

html: <a href="url" target="_self">

js: open("url","_self ")

2.在当前窗口打开，禁止后退

js: location.replace("新url") ,用新的url代替history中当前地址

3.在新窗口打开，可打开多个

html: <a href="url" target="_blank">

js: open("url","_blank ")

4.在新窗口打开，只能打开一个

html: <a href="url" target="自定义的窗口名">

js:open("url","自定义的窗口名")

原理: target属性其实是为新窗口指定内存中唯一的窗口名,浏览器规定，同一时刻，同名窗口只能打开一个,后打开的会覆盖先打开的。

预定义name:
_self 自动使用当前窗口的name
_blank 不指定窗口名, 每打开一个窗口，浏览器会自动随机生成内部窗口名

2.1.3 关闭窗口

close()

关闭当前的网页,存在兼容性问题。FF：禁止设置关闭浏览器的代码，Chrome：默认直接关闭，IE：询问用户。

2.2 location对象

保存的是浏览器地址栏相关信息：获取当前窗口地址，可以改变当前窗口的地址

href属性 保存了当前窗口的地址（完整的地址）
获取href属性，获取了当前地址 改变了href属性，跳转页面
reload() 方法 刷新

location:http://aa.cn:8080/test/index.html?username=shuai&kw=帅

用以上域名来做演示：

location.protocal: 协议名 （http）

location.host: 主机名+端口号 （aa.cn:8080）

location.hostname: 主机名 （aa.cn）

location.port: 端口号 （8080）

location.pathname: 相对路径 （ test/index.html）

location.search: ?及其之后的查询字符串 （?username=shuai&kw=帅）

location.hash: #锚点名

用法

1.在当前窗口打开，可后退:

location.href="url";
location.assign("url"); //assign表示赋值
location="url"; //本质还是改href属性

2.在当前窗口打开，禁止后退:

// 打开新url,并用新url替换history中当前旧url,实现禁止后退
location.replace("新url")

3.刷新:

普通刷新: 优先从缓存中获取资源，缓存没有或过期，才去服务器找。

F5

history.go(0)

location.reload()

强制刷新: 无论有没有缓存，都强制从服务器获取新资源

location.reload(true)

2.3. navigator对象

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

navigator.platform：操作系统类型；

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

navigator.appName：浏览器名称；

navigator.appVersion： 浏览器版本；

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

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

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

如：判断用户是否是IE浏览器

if(window.navigator.userAgent.indexOf('MSIE')!=-1){
alert('是IE');
}else{
alert('不是IE');
}

2.4 history对象

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

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

后退：history.go(-1);

刷新：history.go(0);

2.5 screen对象

screen 对象包含有关用户屏幕的信息。

screen.availWidth

返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

screen.availHeight

返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

// 获取屏幕的宽度和高度之和
document.write(screen.availHeight+screen.availWidth);

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事件中，否则获取不了元素