蓝旭工作室2023春季培训第六周预习博客

BOM（浏览器对象模型）

作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。浏览器的全部内容可以看成DOM，整个浏览器可以看成BOM。

BOM和DOM的区别

DOM

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

BOM

• 浏览器对象模型
• 把浏览器当做一个对象来看待
• BOM的顶级对象是window
• BOM学习的是浏览器窗口交互的一些对象
• BOM是浏览器厂商在各自的浏览器上定义的 

window对象

Bom的核心对象是window，它表示浏览器的一个实例

在浏览器中，window对象有双重角色，即是浏览器窗口的一个接口，又是全局对象

因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

窗口控制方法

• moveBy(x,y)：从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体
• moveTo(x,y)：移动窗体左上角到相对于屏幕左上角的(x,y)点
• resizeBy(w,h)：相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体
• resizeTo(w,h)：把窗体宽度调整为w个像素，高度调整为h个像素
• scrollTo(x,y)：如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
• scrollBy(x,y)： 如果有滚动条，将横向滚动条向左移动x个像素，将纵向滚动条向下移动y个像素
   

 location对象

location属性 

属性名	例子	说明
hash	"#contents"	utl中#后面的字符，没有则返回空串
host	www.wrox.com:80	服务器名称和端口号
hostname	www.wrox.com	域名，不带端口号
href	http://www.wrox.com:80/WileyCDA/?q=javascript#contents	完整url
pathname	"/WileyCDA/"	服务器下面的文件路径
port	80	url的端口号，没有则为空
protocol	http:	使用的协议

navigator对象 

navigator 对象主要用来获取浏览器的属性，区分浏览器类型。属性较多，且兼容性比较复杂。最常用的是userAgent。该属性可以返回由客户机发送服务器的user -agent头部的值。
可以判断用户是使用哪个终端打开页面，实现跳转。

<script>
    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 = "";//电脑
    }
</script>

screen对象

保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度

• height 屏幕像素高度
• left 当前屏幕左边的像素距离
• top 当前屏幕顶端的像素距离
• width 屏幕像素宽度
• orientation 返回Screen Orientation API中屏幕的朝向

history对象 

history对象主要用来操作浏览器URL的历史记录，可以通过参数向前，向后，或者向指定URL跳转

• history.go()接收一个整数数字或者字符串参数：向最近的一个记录中包含指定字符串的页面跳转，当参数为整数数字的时候，正数表示向前跳转指定的页面，负数为向后跳转指定的页面
• history.forward()：向前跳转一个页面
• history.back()：向后跳转一个页面
• history.length：获取历史记录数