JavaScript的BOM编程

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>javascript">
    // 创建 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=python
    console.log(url.protocol);  // https:
    console.log(url.host);      // www.runoob.com
    console.log(url.hostname);  // www.runoob.com
    console.log(url.port);      // (输出为空 - https 默认端口为 443)
    console.log(url.pathname);  // /
    console.log(url.search);    // en-US/search
    console.log(url.hash);      // #test
console.log(url.origin);    // https://www.runoob.com
</script>

方法
1. assign()：载入一个新的文档，改变当前页面的地址(有历史)
2. reload()：重新加载当前页面
3. 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="javascript language-javascript">aaa()">前进</button>
		<button onclick="javascript language-javascript">bbb()">后退</button>
		<script type="text/javascript">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>javascript">
        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 关闭定时器