浏览器对象模型 BOM

Posted 2020-10-04

BOM（浏览器对象模型）

作用

• 弹出新浏览器窗口的能力；
• 移动、关闭和更改浏览器窗口大小的能力；
• 可提供WEB浏览器详细信息的导航对象；
• 可提供浏览器载入页面详细信息的本地对象；
• 可提供用户屏幕分辨率详细信息的屏幕对象；
• 支持Cookies；

window

定义

• window是js在浏览器环境中 全局变量
• 函数就是window的方法
• 全局变量就是window的属性

属性

• document
• location
• history
• screen
• navigator
• innerWidth 文档区域宽度
• innerHeight 文档区域高度
• outerWidth 浏览器窗口宽度
• outerHeight 浏览器窗口高度
• name 窗口的名字
• parent 父窗口
• top 顶层窗口
• length 子窗口的数量
• frames 子窗口的集合

方法

• alert() 警告框 显示带有一段消息和一个确认按钮的警告框。
• confirm() 确认框 显示带有一段消息以及确认按钮和取消按钮的对话框。
• prompt() 可输入弹框
• setInterval()
• clearInterval()
• setTimeout()
• clearTimeout()
• open() 打开新窗口
• close() 关闭窗口
• print() 打印
• scrollBy() 按照指定的像素值来滚动内容。
• scrollTo() 把内容滚动到指定的坐标。
• moveBy() 可相对窗口的当前坐标把它移动指定的像素。
• moveTo() 把窗口的左上角移动到一个指定的坐标。
• resizeBy() 按照指定的像素调整窗口的大小。
• resizeTo() 把窗口的大小调整到指定的宽度和高度。

location （地址位置）

属性

• href 完整的url
• protocol 协议
• hostname 主机名
• port 端口号
• host 主机名和端口号
• pathname 文件路径
• search 查询部分
• hash 锚点部分

方法

• reload() 重新加载当前文档。
• assign() 加载新的文档
• replace() 用新的文档替换当前文档

history （历史记录）

属性

• length 历史记录的数量

方法

• back() 回退一步
• forward() 前进一步
• go(n) 前进/后退 n步

screen （屏幕）

属性

• width 屏幕宽度
• height 屏幕高度

navigator （导航）

属性

• userAgent 平台、浏览器相关的信息
• platform 返回运行浏览器的操作系统平台。

附加

浏览器内核

• 内核应该包含 渲染引擎 \ JS引擎
• 渲染引擎负责渲染html和CSS， JS引擎负责运行JS
• 现在提到浏览器内核也可以单指渲染引擎

常见的浏览器内核

• webkit （chrom safari）
• blink （webkit的改型， chrome、opera）
• trident IE
• Gecko Firfox
• Kestrel 老欧朋

URL URI 区别

• URI 标准 中包含 URN 和 URL
• URI： 统一资源标示符
• URN：统一资源命名符
• URL： 统一资源定位符