BOM浏览器对象模型

最新推荐文章于 2023-03-25 20:59:16 发布

TKOP_

最新推荐文章于 2023-03-25 20:59:16 发布

阅读量297

点赞数

分类专栏： # DOM 和 BOM 文章标签： javascript

本文链接：https://blog.csdn.net/tkop_/article/details/113339961

版权

DOM 和 BOM 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

BOM 概述

什么是 BOM

BOM (Browser Object Model) 即浏览器对象模型，将浏览器当做一个对象来看待，提供了独立于内容而与浏览器窗口进行交互的对象。
BOM 由一系列相关对象构成，核心内容有 window、document、location、navigator、history等对象。他们都提供了很多方法和属性。
BOM 缺乏标准，javascript 语法的标准化组织是 ECMA ，DOM 的标准化组织是 W3C ，BOM最初是 Netscape 浏览器标准的一部分，现在由浏览器厂商在各自浏览器上定义，兼容性较差。
DOM 主要学习的是操作页面元素，BOM 学习的是浏览器窗口交互的一些对象。

BOM 的构成

在这里插入图片描述

BOM 比 DOM 的范围大，它包含了 DOM 。

BOM 中的 window 对象

window 对象是浏览器的顶级对象，它具有双重角色。
1、它是 JS 访问浏览器窗口的一个接口。
2、他是一个全局对象，定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

在调用时可以省略 window，比如浏览器话框 alert() prompt() 都是 window 对象的方法。需要注意的是 window 具有一个特殊属性 window.name 。

window 对象的常见事件

窗口加载事件

window.onload = function() { ... };
window.addEventListener('load', function() { ... });
load 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css 文件等），就调用绑定的处理函数。

使用 load 事件可以将需要在页面内容加载完毕再执行的 JS 代码写到页面元素的前面，或者在头部就引入 js 文件。
注意使用两种注册事件的区别。

document.addEventListener('DOMContentLoaded', function() { ... });
DOMContentLoad 事件触发时，仅当 DOM 加载完成，不包含样式表、图片、flash 等。但是这个事件在 ie9以上才支持。如果页面的图片较多，从用户访问到 load 事件触发可能需要较长的时间，交互效果就不能实现，这样会影响到用户的体验，此时使用 DOMContentLoad 事件就比较合适。

窗口大小调整事件

window.onresize = function() { ... };
window.addEventListener('resize', function() { ... });

resize 事件是调整窗口大小加载事件，当窗口大小调整时就会触发事件处理程序。

我们经常利用这个事件完成响应式布局。window.innerWidth 返回当前屏幕的宽度。

location 对象

概述

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL ，并且可以用于解析 URL 。因为这个属性返回的是一个对象，所以我们也将这个属性称为 location 对象。

URL(Uniform Resource Locator)

统一资源定位符（URL）是互联网上标准资源的地址。互联网上的每个文件都有唯一的 URL ，它包含的信息指出文件的位置以及浏览器怎么处理它。
URL 的一般语法格式：

protocol://host[:port]/path/[?query]#fragment
http://www.baidu.com/index.html?uname=TKOP&age=18#link

组成	说明
protocol	通信协议，有 http,ftp,mailto 等。
host	主机（域名）例如 www.baidu.com 。
port	端口号，可选参数，省略时使用方案的默认窗口；http的默认窗口是80。
path	文件路径，由零个或多个 ‘/’ 符号隔开的字符串，一般用来表示主机上的一个目录或者文件地址。
query	参数，以键值对的形式通过 & 符号分隔开。
fragment	片段，#后面内容常见于链接锚点。

location 对象的属性

location 对象属性	描述
location.href	获取或者设置整个 URL 。
location.host	返回主机（域名）。
location.port	返回端口号，如果未写则返回空字符串。
location.pathname	返回路径。
location.search	返回参数。
location.hash	返回片段。

location 对象的方法

location 对象方法	描述
location.assign()	跟 href 一样，可以跳转页面（也成为重定向页面）。
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面。
location.reload()	重新加载页面，相当于刷新按钮或者 f5 如果参数为 true 则相当于强制刷新 ctrl+f5 。

location 对像使用小案例

1、表单页面结构

<body>
    <form action="jieshouye.html">
        <h3>个人信息</h3>
        <div class="name">姓名: <input type="text" name="uname"></div>
        <div class="sports">
            <span>性别：</span>
            <input type="radio" name="sex" id="" value="boy" checked>男
            <input type="radio" name="sex" id="" value="girl">女
        </div>
        <button type="submit">提交</button>
    </form>
</body>

2、提交目标页面（jieshouye.html）的内容

<body>
    <div>
        <span>亲爱的<span class="uname"></span><span class="sex"></span>您好！</span>

    </div>
</body>
<script>
    var uname = document.querySelector('.uname');
    var sex = document.querySelector('.sex');
    var str0 = location.search.slice(1);
    console.log(str0);
    var arr0 = str0.split('&');
    uname.innerHTML = (arr0[0].split('='))[1];
    var gender = (arr0[1].split('='))[1];
    if (gender == 'boy') {
        sex.innerHTML = '帅哥';
    } else {
        sex.innerHTML = '美女';
    }
</script>

在提交目标页面可以通过 location 对象使用表单页的数据，比如表单页输入的姓名、性别。

navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent ，该属性可以返回由客户机发送服务器的 user-agent 头部的值。下面前端代码可以判断用户在哪个终端打开页面，并实现跳转。

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
	window.location.href = ""; //手机
} else {
    window.location.href = ""; //电脑
}

history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL 。

history 对象方法	描述
back()	可以后退功能。
forward()	前进功能。
go(参数)	前进后退功能，参数如果是 1 则前进 1 个页面，如果是 -1 则后退 1 个页面。