JavaScript的BOM编程

BOM编程

what

通过JS代码操作浏览器，js的编程就是面向对象编程，最多的就是面向标签对象编程

BOM:Browser Object Model 浏览器对象模型，以window对象为依托，表示浏览器窗口以及页面可见区域。

学习BOM操作，就是学习对浏览器窗口的操作

• History：历史管理对象
• Location：地址对象
• DOM：文档对象——document
• window：整个html页面的顶层对象，所有的内容都是window的成员，window可以省略，表示整个浏览器窗口，所有的全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下

Browser对象

统一资源占位符/定位符

网址：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

1. 网络传输协议：http:// (不加密) https://(加密)

2. 域名=IP地址+端口号：www.runboob.com 80端口为默认端口，可省略

   IP地址：定位主机 127.0.0.1

   端口号：相当于系统中每个软件的IP 8848

3. 资源路径：/project/02-javascript/js-07/

4. 分隔符：？ 分隔路径与表单数据

5. 表单数据：使用&连接 name=zhangsan&age=18&address=郑州

6. 锚点：#aaa

1. Location对象

Location对象包含有关当前URL的信息

• 属性

1. hash：返回一个url的锚部分(从#开始)
2. host：返回一个URL的主机名和端口号
3. hostname：返回URL主机名
4. href：返回一个完整的URL，改变当前页面的地址(有历史)
5. pathname：返回URL路径名
6. port：返回一个URL服务器使用的端口号
7. protocol：返回一个URL协议
8. 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=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="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对象常用方法

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 关闭定时器