BOM概述

BOM概述

1.1 什么是BOM
BOM(Browser Object Model) 即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window.
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性。
BOM缺乏标准,JavaScript 语法的标准化组织是ECMA,DOM的标准组织是W3C,BOM最初是Netscape浏览器标准的一部分。
DOM

  • 文档对象模型
  • DOM 就是把【文档】当作一个【对象】来看待
  • DOM的顶级对象是document
  • DOM主要学习的是操作页面元素
  • DOM是W3C标准规范

BOM

  • 浏览器对象模型
  • 把【浏览器】当作一个对象来看待
  • BOM的顶级对象是window
  • BOM学习的是浏览器窗口交互的一些对象
  • BOM是浏览器厂商在各自浏览器上定义的,兼容性较差

1.2 BOM的构成
BOM比DOM更大,它包含DOM
window对象是浏览器的顶级对象,它具有双重角色。
1.它是js访问浏览器窗口的一个接口
2.它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法。在调用的时候可以省略window。
注意:window下的一个特殊属性window.name

2.window对象的常见事件

2.1 窗口加载事件
window.οnlοad=function(){}
或者
window.addEventListener(‘load’,function(){})
window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
注意:
1.有了window.onload 就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数。
2.weindow.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准。
3.如果使用addEventListener则没有限制。
document.addEventListener(‘DOMContentLoaded’,function(){})
DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等。IE9以上才支持。
如果页面的图片很多的话,从用户访问到onLoad触发可能需要较长的时间,交互效果就不能实现,必然影响用户的体验,此时使用DOMContentLoaded事件比较合适。
2.2 调整窗口大小事件
window.οnresize=function(){}
window.addEventListener(‘resize’,function(){})
window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数。
注意:
1.只要窗口大小发生像素变化,就会触发这个事件。
2我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。

3.location 对象

3.1什么是location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
3.2 URL
统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式为:
protocol://host[:port]/path/[?query]#fragment
http://www.baidu.com/index.html?name=11&age=11#link

组成说明
protocol通信协议 常用的http,ftp,maito等
host主机(域名)www.baidu.com
port端口号可选,省略时使用方案的默认端口 如http的默认端口为80
path路径由零或多个‘/’符号隔开的字符串,一般用来表示主机上的一个目录或文件地址
query参数 以键值对的形式通过&符号分割开来
frgment片段 #后面的内容 常见于链接 锚点

3.3 location 对象的属性

location对象属性返回值
location.href获取或设置整个URL
location.host返回主机名(域名)www.baidu.com
location.port返回端口号 如果未写返回 空字符串
location.pathname返回路径
location.search返回参数
location.hash返回片段 #后面的内容 常见于链接锚点

3.4 location 对象的方法

location对象方法返回值
location.assign()跟href一样,可以跳转页面(也称为重定向页面)
location.replace()替换当前页面,因为不记录历史,所以不能后退页面
location.reload()重新加载页面,相当于刷新按钮或者 F5 如果参数为true 强制刷新 ctrl+f5

4.navigator 对象

navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转

if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPad|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|webOS|Symbin|windows Phone)/i)){
	window.location.href='';//手机
}else{
	window.location.href='';//电脑
}

5.history对象

window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。

history对象方法作用
back()可以后退功能
forward()前进功能
go(参数)前进后退功能 参数如果是1前进一个页面 如果是-1后退1个页面

history对象一般在实际开发中比较少用,但是会在一些OA办公系统中见到。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值