浏览器对象模型——BOM常用属性及方法

内容介绍

  （Browser Object Model）浏览器对象模型 ——（专门操作浏览器的API）。

一、BOM概念

• BOM(Browser Object Modtael)是一种浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
• BOM由一系列对象组成,每个对象都提供了很多方法与属性
• BOM缺乏标准 ，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

Browser Object Model）浏览器对象模型 ——（专门操作浏览器的API）。

二、window对象

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

属性或方法	相关
onload	页面所有元素加载完成
DOMContentLoaded	页面结构加载完成，可重载，速度快
alert；confirm；prompt；	弹窗类
parent；top；self；	窗口类
setInterval；setTimeout；clearInterval；clearTimeout；	定时器相关（参考目录：八）

三、document对象

文档对象

body；cookie；title；domain；URL；referrer

四、navigator对象

浏览器本身信息

属性或方法	相关
navigator.userAgent	用户代理头字符串
navigator.cookieEnabled	是否启用cookie，返回布尔值
navigator.plugins	安装插件的集合

五、location对象

浏览器当前URL信息

属性或方法	相关
href	完整URL
protocol	协议
domain	域名
port	端口号
search	查询字符串
reload	重新加载

六、screen对象

设备屏幕，客户端屏幕信息

属性或方法	相关
screen.width	屏幕宽度
screen.height	屏幕高度
screen.colorDepth	屏幕颜色深度
screen.availWidth	可用宽度(除去任务栏的高度)
screen.availHeight	可用高度(除去任务栏的高度)

七、history对象

浏览器历史记录栈

属性或方法	相关
history.go(-1/1)	到达历史记录第几步
history.forward()	前进一步
history.back()	后退一步
history.replace()	替换历史栈
history.length()	浏览过的页面数
location.replace("")	如无location.href,则无法回退

八、定时器相关

1、setTimeout():

指定某个函数，在多少毫秒之后执行；

• 第一个参数：将要推迟执行的函数；
• 第二个参数：delay推迟执行的毫秒数（如果省略，默认为0）；
• 第三个参数：再次指定setTimeout定时器；（定时器嵌套时，函数仍按照指定时间执行，如果时间可以整除，上面的执行结果优先）

(setTimeout(function() {
    document.body.style.background = "red"
}, 500, setTimeout(function() {
    document.body.style.background = "green"
}, 1000)))

2、 清除setTimeout：clearTimeout

3、 setInterval()

指定某个任务每隔一段时间执行一次，无限次的定时执行；

// 只考虑“ 开始执行” 时间的间隔， 并不考虑每次任务执行本身消耗的时间；
(setInterval(function() {
    document.body.style.background = "red"
}, 1500, setInterval(function() {
    document.body.style.background = "green"
}, 2100, setInterval(function() {
    document.body.style.background = "black"
}, 3900))))
// setInterval定时器时间不精确；
var startTime = new Date().getTime();
setInterval(function() {
    var endTime = new Date().getTime();
    console.log(startTime - endTime)
    startTime = endTime;
}, 1000)

4、 清除setInterval：clearInterval

---

标签：JavaScript，BOM

---

更多演示案例，查看 案例演示

---

欢迎评论留言!