BOM简介

什么是BOM

BOM：浏览器对象模型（Brower Object Model，BOM）提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM与DOM的区别

DOM是文档对象模型，把文档当作一个对象来看待，它的顶级对象是document。

BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的顶级对象是window。

BOM构成

window对象的常见事件

窗口加载事件

window.onload

window.onload：是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件，调用该事件对应的事件处理函数。

基本语法格式

// 方式1
window.onload = function () {};
// 方式2
window.addEventListener('load', function () {});

document.DOMContentLoaded

document.DOMContentLoaded：加载事件，会在DOM加载完成时触发，这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载。

调整窗口大小事件

window.onresize

window.onresize：当调整window窗口大小的时候，就触发window.onresize事件，调用事件处理函数。

基本语法格式

// 方式1
window.onresize = function () {};
// 方式2
window.addEventListener('resize', function () {});

location对象

URL的组成

各部分	说明
protocol	网络协议，常用的如http，ftp，mailto等
host	服务器的主机名，如www.example.com
port	端口号，可选，省略时使用协议的默认端口，如http默认端口为100
path	路径，如“/web/index.html”
query	参数，键值对的形式，通过“&”符号分隔，如“a=3&b=4”

location常用属性

属性	说明
location.search	返回（或设置）当前URL的查询部分（“?”之后的部分）
location.hash	返回一个URL的锚部分（从“#”开始的部分）
location.host	返回一个URL的主机名和端口
location.hostname	返回URL的主机名
location.href	返回完整的URL
location.pathname	返回URL的路径名
location.port	返回一个URL服务器使用的端口号
location.protocol	返回一个URL协议

【案例】获取URL参数

location的常用方法

方法	说明
assign()	载入一个新的文档
reload()	重新加载当前文档
replace()	用新的文档替换当前文档，覆盖浏览器当前记录

navigator对象

常用属性

属性	说明
appCodeName	返回浏览器的内部名称
appName	返回浏览器的完整名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用Cookie的布尔值
platform	返回运行浏览器的操作系统平台

常用方法

javaEnabled() ：指定是否在浏览器中启用Java。

taintEnabled():规定浏览器是否启用数据污点(data tainting) |

Screen对象

window.screen 对象不带 window 前缀也可以写

常用属性

Window Screen 宽度

screen.width 属性返回以像素计的访问者屏幕宽度。

Window Screen 高度

screen.height 属性返回以像素计的访问者屏幕的高度。

Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。

Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。

Window Screen 色深

screen.colorDepth 属性返回用于显示一种颜色的比特数。

老式的手机使用8 位：256 中不同的 "VGA colors"。

老式计算机使用 14 位：65,536 种不同的 "High Colors" 分辨率。

现代计算机都使用 24 位或 32 位硬件的色彩分辨率：

24 bits  = 16,777,216 种不同的 "True Colors"

32 bits = 4,294,967,296 中不同的 "Deep Colors"

Window Screen 像素深度

screen.pixelDepth 属性返回屏幕的像素深度。

history对象

常用属性

history.length属性：返回历史列表中的网址数。

常用方法

方法	说明
back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go()	加载history列表中的某个具体页面