百木园提供了独立于HTML页面内容，而于浏览器相关的一系列对象，主要用于管理浏览器窗口与窗口之间的通讯
BOM缺乏标准，HTML和DOM的标准化组织是W3C
浏览器内核
渲染引擎：用来渲染网页内容，将网页代码转为用户看到的页面
脚本引擎：执行JS代码（目前最快的是谷歌的V8）
引用方式
外部:在外部建立JS文件，通过 <script src=\'路径\'></script>在HTML引入
内部：在HTML内部创建 <script>，在标签范围内书写JS代码
内嵌（行内）在HTML标签内部 直接书写JS代码
BOM六大对象
浏览器对象navigator
浏览器相关信息（名称、版本）
窗口对象window
由于BOM主要用于管理窗口与窗口间的通讯，所以核心对象就是window，是所有BOM对象的顶层对象
1、打开一个窗口，就包含了一个window对象
屏幕对象screen
显示屏幕相关信息（尺寸）
历史对象history
用户访问页面的历史信息
位置对象location
当前页面的地址信息
文档对象document
整个HTML文档页面
BOM与DOM
DOM实际上是属于BOM六大对象其中之一，由于document对象的属性和方法太多，所以被W3C单独拿出来做了一套规范，就叫做DOM
BOM :navigator,window,screen,history,location,document
对象的属性和方法
window对象的属性
Window 对象 | 菜鸟教程
| 属性 | 描述 | |
|---|---|---|
| 位置信息 | screenX、screenY 、screenLeft、screenTop(IE) | 返回浏览器相对于屏幕窗口的x.y坐标 |
| pageXOffset，pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 X，Y 位置。 | |
| 窗口大小 | innerHeight，innerwidth | 返回窗口的文档显示区的高度，宽度。 |
| outerHeight，outerwidth | 返回窗口的外部高度,宽度，包含工具条与滚动条。 |
window对象的方法
Window 对象 | 菜鸟教程
| 方法 | 描述 | code | |
|---|---|---|---|
| 对话框 | alert() | 显示带有一段消息和一个确认按钮的警告框。 | function myFunction(){ alert(\"你好，我是一个警告框！\"); } |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 | confirm(\"你好，我是一个确认框\") | |
| prompt() | 显示可提示用户输入的对话框。 | prompt(\"请输入你的名字\",\"Harry Potter\"); | |
| 滚动条 | scrollBy(x,y) | 相对于当前滚动条的位置移动（值可叠加） | |
| scrollTo(x,y) | 滚到到指定的坐标 | ||
| 新窗口 | open(url,target,features) | 打开新窗口 | open（\"XXX.html\",\"\",\"width=200,height=200\"） |
| 窗口移动 | resizeBy(x,y) | 按照指定的像素调整窗口的大小。 | |
| resizeTo(x,y) | 把窗口的大小调整到指定的宽度和高度。 | ||
| 计时器** | setInterval(callback,ms) clearInterval(callback,ms) | 按照指定的周期来调用或取消函数或计算表达式 | 间隔型 |
| setTimeout(callback,ms) clearTimeout(callback,ms) | 在指定的毫秒数后调用函数或计算表达式 | 延时型且执行一次 |
倒计时案例
<script>
let number = 60;
let stop = setInterval(() => {
if (number == 0) {
clearInterval(stop)//当满足条件就可以停止计时函数
}
console.log(number--);//倒计时减减
}, 1000)
</script>
screen对象的属性**
| 属性 | 描述 |
|---|---|
| width,height | 返回屏幕的总宽高 |
| availWidth,availHeight | 返回屏幕的可用宽高(减去界面特性，比如窗口任务栏) |
history对象的方法
| 方法 | 描述 |
|---|---|
| back() | 跳转到上一个页面，回退按钮一样 |
| forward() | 跳转到下一个页面，前进按钮一样 |
| go() | 跳到指定页面，负数为后退，正数为前进，0不动 |
location对象的属性**
window.location和ducoment.location是同一个对象
| 属性 | 描述 |
|---|---|
| href | 获取或设置当前浏览器窗口的地址栏信息 location.href=xxxxx |
navigator
来源：https://blog.csdn.net/weixin_65257540/article/details/123256501
本站部分图文来源于网络，如有侵权请联系删除。