BOM--浏览器对象模型

最新推荐文章于 2024-10-30 15:27:01 发布

yanAHeng

最新推荐文章于 2024-10-30 15:27:01 发布

阅读量453

点赞数 1

分类专栏：学习不止文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40005545/article/details/111937912

版权

学习不止专栏收录该内容

18 篇文章 0 订阅

订阅专栏

浏览器对象模型(BOM)是什么？

BOM是Browser Object Model的缩写，简称浏览器对象模型。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM体系结构图：
BOM能做什么？
BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能。

Window对象的属性、方法

一、系统对话框

alert(msg) ：显示带有一段消息和一个确认按钮的警告框。
confirm(msg) ：显示带有一段消息以及确认按钮和取消按钮的对话框。返回值为布尔值。
prompt(msg, default) ：显示可提示用户输入的对话框。返回值为输入的值，取消返回null。

二、窗体控制

window.open(url, target, features, replace);
用于打开一个新的浏览器窗口或查找一个已命名的窗口。

URL：声明了要在新窗口中显示的文档的 URL。
name：声明了新窗口的名称或者窗口目标。
features：声明了新窗口要显示的标准浏览器的特征。
replace：布尔值，规定装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。

window.close();
用于关闭浏览器窗口。

三、定时器

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
clearInterval()：取消由 setInterval() 设置的 timeout。
clearTimeout()：取消由 setTimeout() 方法设置的 timeout。

四、其他方法

print()：打印当前窗口的内容。
blur() ：把键盘焦点从顶层窗口移开。
createPopup()：创建一个 pop-up 窗口。
focus() ：把键盘焦点给予一个窗口。
moveBy() ：可相对窗口的当前坐标把它移动指定的像素。
moveTo() ：把窗口的左上角移动到一个指定的坐标。
resizeBy()：按照指定的像素调整窗口的大小。
resizeTo() ：把窗口的大小调整到指定的宽度和高度。
scrollBy() ：按照指定的像素值来滚动内容。
scrollTo()：把内容滚动到指定的坐标。

五、属性

innerWidth：返回窗口的文档显示区的宽度。
innerHeight：返回窗口的文档显示区的高度。
name：设置或返回窗口的名称。
opener：返回对创建此窗口的窗口的引用。
closed：返回窗口是否已被关闭。
self：返回对当前窗口的引用。
top：返回最顶层的先辈窗口。
outerheight：返回窗口的外部高度。
outerwidth：返回窗口的外部宽度。
status：设置窗口状态栏的文本。
。。。。。。

Location对象的属性、方法

一、属性

以“https://www.baidu.com/s:80?wd=%E7%96%AB%E6%83%85&ie=UTF-8#content”为例：

href：返回完整的URL。（https://www.baidu.com/s:80?wd=%E7%96%AB%E6%83%85&ie=UTF-8#content）
hash：返回一个URL的锚部分。（#content）
host：返回一个URL的主机名和端口。（www.baidu.com）
hostname：返回URL的主机名。（www.baidu.com）
pathname：返回的URL路径名。（/s）
port：返回一个URL服务器使用的端口号。（80）
protocol：返回一个URL协议。（https:）
search：返回一个URL的查询部分。（?wd=%E7%96%AB%E6%83%85&ie=UTF-8）
注意：除了修改hash之外，其余的都会重新请求页面。但是修改hash也会在浏览器生成一条记录

二、方法

assign() ：载入一个新的文档。
reload(forceGet) ：重新载入当前文档。
如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 的效果是完全一样。
replace(newUrl)：用新的文档替换当前文档。

三、示例

  function getQueryStrings(search) {
     // 1.去掉问号 id=3&name=lee
     const qs = search.length ? search.substring(1) : '';

     // 2.声明一个数据对象，保存结果
     const args = {}

     // 3.将字符串转换成二维数组 [ [id: 3], [name: 'lee'] ]
     const qsList = qs.split('&').map(item => item.split('='))

     // 4.遍历二维数组
     for(const item of qsList) {
         const name = decodeURIComponent(item[0])
         const value = decodeURIComponent(item[1])
         if(name.length) {
             args[name] = value
         }
     }
     return args
 }
 console.log(getQueryStrings('?id=3&name=lee')); // {id: "3", name: "lee"}