BOM编程
what
通过JS代码操作浏览器，js的编程就是面向对象编程，最多的就是面向标签对象编程
BOM:Browser Object Model 浏览器对象模型，以window对象为依托，表示浏览器窗口以及页面可见区域。
学习BOM操作，就是学习对浏览器窗口的操作
- History：历史管理对象
- Location：地址对象
- DOM：文档对象——document
- window：整个html页面的顶层对象，所有的内容都是window的成员，window可以省略，表示整个浏览器窗口，所有的全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下
Browser对象
| 名称 | 描述 |
|---|---|
| window | 浏览器窗口 |
| location | 包含关于当前 URL 的信息 |
| history | 包含了用户已浏览的 URL 的信息 |
| event | 代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态(周围的整体的环境信息！) |
| document | 代表给定浏览器窗口中的 HTML 文档 |
统一资源占位符/定位符
网址：https://www.runoob.com/jsref/obj-location.html#aaa
http://127.0.0.1:8848/project/02-javascript/js-07/bom.html?name=zhangsan&age=18&address=郑州#aaa
-
网络传输协议：http:// (不加密) https://(加密)
-
域名=IP地址+端口号：www.runboob.com 80端口为默认端口，可省略
IP地址：定位主机 127.0.0.1
端口号：相当于系统中每个软件的IP 8848
-
资源路径：/project/02-javascript/js-07/
-
分隔符：？ 分隔路径与表单数据
-
表单数据：使用&连接 name=zhangsan&age=18&address=郑州
-
锚点：#aaa
1. Location对象
Location对象包含有关当前URL的信息
- 属性
- hash：返回一个url的锚部分(从#开始)
- host：返回一个URL的主机名和端口号
- hostname：返回URL主机名
- href：返回一个完整的URL，改变当前页面的地址(有历史)
- pathname：返回URL路径名
- port：返回一个URL服务器使用的端口号
- protocol：返回一个URL协议
- search：返回一个URL的查询部分
<script>// 创建 a 标签并设置 href 属性var url = document.createElement('a');url.href = 'https://www.runoob.com/?s=python#test';console.log(url.href); // https://www.runoob.com/?s=pythonconsole.log(url.protocol); // https:console.log(url.host); // www.runoob.comconsole.log(url.hostname); // www.runoob.comconsole.log(url.port); // (输出为空 - https 默认端口为 443)console.log(url.pathname); // /console.log(url.search); // en-US/searchconsole.log(url.hash); // #test
console.log(url.origin); // https://www.runoob.com
</script>
- 方法
- assign()：载入一个新的文档，改变当前页面的地址(有历史)
- reload()：重新加载当前页面
- replace()：替换当前页面的地址(无历史)
2. History对象
History对象包含用户（在浏览器窗口中）访问过的URL。是window对象的一部分，可通过window.history属性对其进行访问
属性不带(),带()的都是方法
-
属性
- length：返回历史列表中的网址数
-
方法
-
forward()：前进
-
back()：后退
-
go()： 1. go(value) 前进
2. go(-value) 后退
3. go(0) 刷新，等同于location里面的reload()方法——重新加载当前页面
<a href="http://www.baidu.com">百度</a><button onclick="aaa()">前进</button><button onclick="bbb()">后退</button><script type="text/javascript">function aaa(){//前进//window.history.forward();//go(1) <==> forward();window.history.go(1);}function bbb(){//后退//window.history.back();//go(-1) <==> back();window.history.go(-1);}function ff(){//前进//window.history.forward();//写几代表前进几个页面window.history.go(2);}function bb(){//后退//window.history.back();window.history.go(-1);//写几代表后退几个页面}</script>
event事件对象
代表事件发生时周围的环境信息，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮的状态。
window对象常用方法
| 名称 | 描述 |
|---|---|
| alert | 显示自定义消息的对话框 |
| confirm | 显示确认对话框 |
| prompt | 显示输入对话框 |
| setTimeout 重点 | 经过指定毫秒值后计算表达式，并返回该事件对象 |
| setInterval 重点 | 每过一定时间间隔调用一次指定函数 |
| close | 关闭当前浏览器窗口 |
1.confirm方法
一般用于判断，是否进行下一步的操作
<script>var aa=confirm("你确定要删除吗？");alert(aa);
</script>
2.setTimeout方法-延时器
在指定毫秒数后调用函数或计算表达式
1秒=1000毫秒
基本格式（两种）：
setTimeout(要调用的函数名称,延迟时间,参数)；//该格式可以实现递归，自己调自己setTimeout(function(){},5000)//在setTimeout中直接定义函数
- 若要实现动态显示，即每个一秒页面出现一次变化，需要递归，自己调自己
3.clearTimeout方法
取消由setTimeout()方法设置的timeout
使用该方法时，需要先将setTimeout(要调用的函数名称,延迟时间,参数)用一个变量接收，后续才能用clearTimeout(变量名)接收。
4.setInterval方法 clearInterval()-定时器
按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval 每隔一定的时间执行方法。
clearInterval 关闭定时器