JavaScript中BOM操作【通俗易懂】

✨前言✨
  本篇文章主要在于了解 JavaScript 中 BOM (即浏览器对象模型),以及对它的简单使用

🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言

---

🍎一，BOM简介

 BOM（Browser Object Model)，全称浏览器对象模型。 BOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象（例如screen对象、history对象等）都是该对象的子对象。

 BOM 是在缺乏规范的背景下发展起来的，因此既充满乐趣又问题多多。毕竟，浏览器开发商都按照自己的意愿来为它添砖加瓦。最终，浏览器实现之间共通的部分成为了事实标准，为 Web 开发提供了浏览器间互操作的基础。HTML5 规范中有一部分涵盖了 BOM 的主要内容，因为 W3C 希望将JavaScript 在浏览器中最基础的部分标准化。

主要作用：

• 弹出新浏览器窗口的能力；
• 移动、关闭和更改浏览器窗口大小的能力；
• 可提供WEB浏览器详细信息的导航对象；
• 可提供浏览器载入页面详细信息的本地对象；
• 可提供用户屏幕分辨率详细信息的屏幕对象；
• 支持Cookies；

---

🍎二，BOM是什么

首先，什么是BOM？BOM的解释是：

• BOM即浏览器对象模型。
• BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
• 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
• BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

 使用BOM，开发者可以操控浏览器显示页面之外的部分。而它最独特的地方，就是问题最多的地方，激素它唯一一个没有相关标注的javascript实现。总体来说，BOM主要针对的是浏览器窗口和子窗口，但是通常会把任何特定于浏览器的扩展都归于在BOM的范畴内。下面是一些拓展：

1， 弹出新浏览器窗口的能力。
2， 移动、缩放和关闭浏览器窗口的详近信息。
3， navigator对象，提供关于浏览器的详尽信息。
4， location对象，提供浏览器加载页面的详尽信息。
5， screen对象，提供关于用户屏幕分辨率的详尽信息。
6， performance对象，提供浏览器内存占用、导航行为和时间统计的详尽信息。
7， 对cookie的支持。

---

🍎三，BOM核心有哪些

BOM的组成，BOM中共有五大对象

• Window：窗口对象
• Navigator：浏览器对象
• Screen：显示器屏幕对象
• Histroy：历史记录对象
• Location：地址栏对象

---

🍎四，可以实现哪些功能

1，window 对象

BOM 的核心对象是 window，它表示浏览器的一个实例。

在浏览器中，window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。

所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。

其他的 4 个 BOM 对象也都是 window 的属性。

注意：
使用 window 对象的属性或方法的时候，通常可以省略 window。

属性

属性名	属性含义
name	获取/设置窗口的名称。
innerWidth	获得浏览器窗口的内容区域的宽度。（只读）
innerHeight	获得浏览器窗口的内容区域的高度。（只读）
document	对当前窗口所包含文档对象的引用。（只读）
location	获取、设置 location 对象, 或者当前的 URL。
history	对 history 对象的引用。（只读）
navigator	对 navigator 对象的引用。（只读）
screen	对 screen 对象的引用。（只读）

方法

方法名	方法含义
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()	显示可提示用户输入的对话框。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。window.open(strUrl, strWindowName, [strWindowFeatures]);
close()	关闭浏览器窗口。只有open() 方法打开的窗口才可以用 close() 关闭。
print()	打印当前窗口的内容。
scrollTo()	滚动到文档中的某个坐标。
scrollBy()	在窗口中按指定的偏移量滚动文档。
setTimeout()	单次定时
clearTimeout()	取消单次定时
setInterval()	多次定时
clearInterval()	取消多次定时

打开窗口

//新窗口打开页面
window.open('test.html');  

 //从指定名字的窗口打开页面 
window.open('http://www.atguigu.com', 'myWindowName')；
 
 // 指定打开的窗口大小
window.open('http://www.atguigu.com', '', 'width=400,height=300');  

页面滚动

滚动到文档中的某个坐标:

window.scrollTo( 0, 1000 );
 
// 设置滚动行为改为平滑的滚动
window.scrollTo({ 
    top: 1000, 
    behavior: "smooth" 
});

在窗口中按指定的偏移量滚动文档:

// 向下滚动一页：
window.scrollBy(0, window.innerHeight);
 
// 向上滚动一页：
window.scrollBy(0, window.innerHeight);
 
// 平滑滚动
window.scrollBy({   
  top: 100,
  left: 100,   
  behavior: "smooth" 
});

定时器

① 单次定时器

设置定时：

// 第一个参数可以传递一个字符串，第二个参数是延迟时间
setTimeout("alert('Hello world!') ", 1000); 
 
// 第一个参数也可以传递一个回调函数，这是推荐的用法
setTimeout(function() { 
 alert("Hello world!"); 
}, 1000);
 
// 还可传递更多的参数作为回调函数的参数
setTimeout(myCallback, 500, 'Parameter 1', 'Parameter 2');

取消定时：

//设置超时调用
var timeoutId = setTimeout(function() { 
 alert("Hello world!"); 
}, 1000); 
//注意：把它取消
clearTimeout(timeoutId);

② 多次定时器

设置定时：

// 第一个参数可以传递一个字符串，第二个参数是延迟时间
setInterval ("alert('Hello world!') ", 10000); 
 
// 第一个参数也可以传递一个回调函数，这是推荐的用法
setInterval (function() { 
 alert("Hello world!"); 
}, 10000); 
IntervalExample01.htm
 
// 还可传递更多的参数作为回调函数的参数
setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');

取消定时:

//设置定时
var invalId = setInterval(function() { 
 alert("Hello world!"); 
}, 1000); 
//注意：把它取消
clearInterval(timeoutId);

---

2， location 对象

location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将 URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。

属性：

属性名	属性含义
href	返回当前加载页面的完整URL。直接输出 location 也会返回这个值。
protocol	设置或返回页面使用的协议。通常是 http: 或 https:
host	返回服务器名称和端口号（如果有）。
hostname	返回不带端口号的服务器名称。
port	返回URL中指定的端口号。
pathname	返回URL中的目录和（或）文件名。
search	返回URL的查询字符串。这个字符串以问号开头。
hash	返回URL中的hash（#号后跟零或多个字符）。

方法：

方法名	方法含义
reload()	重新加载如果设置参数 true，表示强制从浏览器加载。
assign()	打开新的页面。
replace()	打开新的页面替换旧业面，不会产生历史记录。

---

3，history 对象

history 对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。

属性：

属性名	属性含义
length	历史记录的数量

方法：

方法名	方法含义
back()	后退一步
forward()	前进一步
go(n)	前进或后台 n 步

//后退一步
history.go(-1); 
//前进一步
history.go(1); 
//前进两步
history.go(2);

---

4， navigator

最早由 Netscape Navigator 2.0 引入的 navigator 对象，现在已经成为识别客户端浏览器的事实标准。

属性名	属性含义
userAgent	用户代理信息，改属性可以用来检测用户所使用的浏览器。

---

5，screen

screen 对象返回当前渲染窗口中和屏幕有关的属性。

属性名	属性含义
width	返回屏幕宽度
height	返回屏幕高度

---

✨最后✨

总结不易，希望uu们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！
如有问题，欢迎评论区批评指正😁