JavaScript第六章BOM_bom用户交互包括什么-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45831889/article/details/106597093

一、什么是BOM对象
BOM：Brower Object Model，指的是浏览器对象模型。
作用：操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。
浏览器对象：浏览器提供的一系列内置对象的统称。
BOM浏览器对象模型：各内置对象之间按照某种层次组织起来的模型的统称。
在这里插入图片描述 window对象是BOM的顶层（核心）对象。
其他的对象都是以属性的方式添加到window对象下，也可称为window的子对象
document（文档对象）：也称为DOM对象，是HTML页面当前窗体的内容，同时也是JavaScript重要组成部分之一。
history（历史对象）：主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能。
location（地址栏对象）：用于获取当前浏览器中URL地址栏内的相关数据。
navigator（浏览器对象）：用于获取浏览器的相关数据，例如浏览器的名称、版本等，也称为浏览器的嗅探器。
screen（屏幕对象）：可获取与屏幕相关的数据，例如屏幕的分辨率等。

二、window对象
1.全局作用域
window对象：是BOM中所有对象的核心，同时也是BOM中所有对象的父对象。
定义在全局作用域中的变量、函数以及JavaScript中的内置函数都可以被window对象调用。

var area = 'Beijing';
function getArea(){
  return this.area;
}
console.log(area);
console.log(window.area);
console.log(getArea());
console.log(window.getArea());
console.log(window.Number(area));

定义在全局作用域中的getArea()函数，函数体内的this关键字指向window对象。
对于window对象的属性和方法在调用时可以省略window，直接访问其属性和方法即可。
2.弹出对话框和窗口
在这里插入图片描述

①prompt()方法
作用：用于生成用户输入的对话框。
第1个参数：用于设置用户输入的提示信息。
第2个参数：用于设置输入框中的默认信息。

prompt('请输入测试的选项');
prompt('请输入测试的选项', '用户名和密码');

在这里插入图片描述
②confirm（）方法
作用：弹出一个确认对话框，该对话框中包含提示消息以及确认和取消按钮。
参数：用于设置确认的提示信息。
返回值：点击“确定”按钮，返回true。点击“取消”按钮，返回false。

confirm('确定要删除吗？')

在这里插入图片描述
③.open（）方法
作用：用于打开一个新的浏览器窗口，或查找一个已命名的窗口。
语法：open(URL, name, specs, replace)。
第1个参数：打开指定页面的URL地址，若没有指定，则打开一个新的空白窗口。
第2个参数：指定target属性或窗口的名称。
第3个参数：用于设置浏览器窗口的特征（如大小、位置、滚动条等），多个特征之间使用逗号分隔。
第4个参数：设置为true，表示替换浏览历史中的当前条目，设置false（默认值），表示在浏览历史中创建新的条目。
在这里插入图片描述

3.窗口位置和大小

目前只有window.open()方法打开的的窗口和选项卡（Tab），FireFox和Chrome浏览器才支持口位置和大小的调整。

4.框架操作
window对象提供的frames属性可通过集合的方式，获取HTML页面中所有的框架，length属性就可以获取当前窗口中frames的数量。

//设置框架
<body>
  <iframe name="frame01"></iframe>
  <iframe name="frame02"></iframe>
  <iframe name="frame03"></iframe>
</body>
//获取窗口对应给定对象的内容
// 方式1：
window.frames['frame01'].document.write('frame01 text.');
// 方式2：
window.frames.frame02.document.write('frame02 text.');
// 方式3：
window.frames[2].document.write('frame03 text.');

除此之外，还可以利用parent获取当前window对象所在的父窗口。

window.parent;	// 如果在框架中，获取父级窗口，否则返回自身引用
window.parent.frames;		// 获取同级别的框架

5.定时器
在这里插入图片描述
setTimeout()和setInterval()方法区别：
相同点：都可以在一个固定时间段内执行JavaScript程序代码。
不同点：setTimeout()只执行一次代码，setInterval()会在指定的时间后，自动重复执行代码。

setTimeout()方法在执行一次后即停止了操作；setInterval()方法一旦开始执行，在不加干涉的情况下，间歇调用将会一直执行到页面关闭为止。

若要在定时器启动后，取消该操作，可以将setTimeout()的返回值（定时器ID）传递给clearTimeout()方法；或将setInterval()的返回值传递给clearInterval()方法。

三、location对象
1.更改URL
URL：Uniform Resource Locator，统一资源定位符。
在Internet上访问的每一个网页文件，都有一个访问标记符，用于唯一标识它的访问位置，以便浏览器可以访问到，这个访问标记符称为URL。

在这里插入图片描述
由于80是Web服务器的默认端口号，因此可以省略URL中的“:80”
即：http://www.example.com/web/index.html?a=3&b=4#res

location对象提供的用于改变URL地址的方法，所有主流的浏览器都支持。
在这里插入图片描述
reload()方法的唯一参数，是一个布尔类型值，将其设置为true时，它会绕过缓存，从服务器上重新下载该文档，类似于浏览器中的刷新页面按钮。

2.获取URL参数
Web开发中，经常通过URL地址传递的参数执行指定的操作，如商品的搜索，排序等。此时，可以利用location对象提供的search属性返回URL地址中的参数。
在这里插入图片描述
获取URL的指定部分：location.属性名。
设置URL的指定部分：location.属性名 = 值。

四、history对象
1.历史记录跳转
history对象可对用户在浏览器中访问过的URL历史记录进行操作。
出于安全方面的考虑，history对象不能直接获取用户浏览过的URL，但可以控制浏览器实现“后退”和“前进”的功能。
在这里插入图片描述
go()方法可根据参数的不同设置，完成历史记录的任意跳转。当参数值是一个负整数时，表示“后退”指定的页数；当参数值是一个正整数时，表示“前进”指定的页数。
当go()方法的参数为1或-1时，与forward()和back()方法的作用相同。

2.无刷新更改URL地址
HTML5为history对象引入了history.pushState()和history.replaceState()方法，用来在浏览历史中添加和修改记录，实现无刷新更改URL地址。

pushState(state, title[, url])	// 添加历史记录
replaceState(state, title[, url])	// 修改历史记录

参数state：表示一个与指定网址相关的状态对象，此处可以填null或空字符串。
参数title：表示新页面的标题，可以填null或空字符串。
参数url：表示新的网址，并且必须与当前页面处在同一个域中。

history.pushState(null, null, "?a=check");
history.pushState(null, null, "?a=login");
history.replaceState(null, null, "?p=1");

在这里插入图片描述

pushState() 方法会改变浏览器的历史列表中记录的数量。
replaceState() 方法仅用于修改历史记录，历史记录列表的数量不变，与location.replace() 方法的功能类似。

五、navigator对象
navigator对象提供了有关浏览器的信息，主流浏览器中存在的属性和方法如下
在这里插入图片描述

六、screen对象
screen对象用于返回当前渲染窗口中与屏幕相关的属性信息，如屏幕的宽度和高度等。以下展示主流浏览器中支持的screen属性。