JavaScript中的BOM

绝地灬酷狼 2023-07-13 03:16 6阅读 0赞

# BOM #

Browser Object Model，浏览器对象模型，它提供了独立内容而与浏览器窗口进行交互的对象，其核心对象是window  
BOM由一系列相关对象构成，并且每个对象都提供了很多方法和属性  
BOM缺乏标准，JavaScript语法标准化组织是ECMA。DOM的标准化组织是W3C，BOM最初是网景公司浏览器标准的一部分，所以兼容性较差

BOM的顶级对象是window

**window对象是浏览器的顶级对象：**  
1.它是js访问浏览器窗口的一个接口  
2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成windo对象的属性和方法  
调用时可以省略  
window下的一个特殊属性window.name

## 1.window的常见事件 ##

**window.onload** 等页面内容全部加载完毕再执行里面的代码，包含页面dom元素 图片 flash css 等等  
1.有了它可以把js代码写到页面元素的上方  
2.传统事件注册方式的window.onload 只能写一次，如果有多个会以最后一个为准；用window.addEventListener(‘load’, function()\{\})没有次数限制  
DOMContentLoaded 是DOM 加载完毕，不包含图片、falsh、css 等就可以执行，加载速度比load更快一些

**调整窗口大小的事件** window.addEventListener(‘resize’, function()\{\} )  
1.只要窗口大小发生像素变化，就会触发事件  
2.经常利用这个事件完成响应式布局 window.innerWidth当前屏幕的宽度

## 2. 定时器 ##

**setTimeout**  
window.setTimeout(调用函数, 延时时间)

1.  这个window在调用的时候可以省略
2.  这个延时时间单位是毫秒，但是可以省略，如果省略默认的是0
3.  这个调用函数可以直接写函数，还可以写函数名，还有一个写法 ‘函数名()’
4.  页面中可能有很多的定时器，经常给定时器加标识符（名字)

定时器的调用函数也叫回调函数，普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才会调用。element.οnclick=function()\{\}也是回调函数  
***停止setTimeout定时器*** window.clearTimeout(定时器标识符)

**setInterval**  
window.setInterval(调用函数, 延时时间);  
**区别：**

1.  setTimeout 延时时间到了，就去调用这个回调函数，只调用一次，之后就结束了这个定时器
2.  setInterval 每隔一个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数  
    停止setInterval定时器 window.clearInterval(定时器标识符)

**this的指向问题**  
1.全局作用域或者普通函数中this指向全局对象window（定时器里的this指向window）。  
2.方法调用中，谁调用了这个方法this就指向谁  
3.构造函数中this指向构造函数的实例

## 3. js执行队列 ##

JavaScript语言的一大特点是单线程，同一时间只能做一件事，因为JavaScript是为了处理页面中的用户交互，以及操作DOM而诞生的。  
H5中提出了Web Worker标准，允许JavaScript脚本创建多个线程  
**同步任务：** 同步任务都在主线程上执行，形成一个执行栈  
**异步任务：** js的异步是通过回调函数实现的，有以下三种类型：

1.  普通事件：如：click、resize等
2.  资源加载：如：load、error等
3.  定时器

异步任务相关的回调函数会添加到任务队列中（消息队列）

**执行机制：**

1.  先执行执行栈中的同步任务
2.  将异步任务放入任务队列中，继续往下执行
3.  一旦执行栈中的所有同步任务执行完毕，系统会依次读取任务队列中的异步任务，将他们放入执行栈中开始执行。

由于主线程不断重复获取任务、执行任务、再次获取任务、再执行，所以这种机制被称为事件循环

## 4.location对象 ##

window对象提供了一个location属性用于获取或设置窗体的URL，并且可以解析URL。因为这个属性返回的是一个对象，所以这个属性也称为location对象。  
***location对象的属性：***  
**location.href** 获取或设置整个URL  
**location.host** 返回主机（域名）  
**location.port** 返回端口号  
**location.pathname** 返回路径  
**location.search** 返回参数  
**location.hash** 返回片段 \#后面的内容 常用于链接、锚点

***location对象的方法：***  
**location.assign()** 可以跳转页面（重定向页面），可以实现后退  
**location.replace()** 替换当前页面（不记录历史，所以不能后退）  
**location.reload()** 重新加载页面，相当于刷新

## 5.navigator对象 ##

userAgent属性，可以返回由客户端发送服务器的user-agent头部的值  
下面前端代码可以判断用户用哪个终端打开页面，实现跳转

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { 
                window.location.href = ""; //手机
            }else { 
    window.location.href = ""; //PC
    }

## 6. history对象 ##

与浏览器历史记录进行交互，该对象包含用户访问过的URL  
**方法：**  
back() 后退功能  
forward() 前进功能  
go(参数) 前进和后退，参数为1前进；参数为-1后退