《JavaScript基础之BOM对象》

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

御弟謌謌

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

阅读量187

点赞数

分类专栏：前端文章标签： javascript js

本文链接：https://blog.csdn.net/abraham_ly/article/details/110110420

版权

前端专栏收录该内容

52 篇文章 4 订阅

订阅专栏

《JavaScript基础之BOM对象》

1、什么是BOM

BOM(Browser Object Model)即浏览器对象模型。
BOM提供了独立于内容页面而与浏览器窗口进行交互的对象接口
由于BOM主要提供用于管理窗口与窗口之间的通讯，因此其核心对象时window
BOM由一系列的相关对象组成，并且每个对象都提供了很多的属性和方法
BOM缺少标准化，JavaScript语法的标准化组织是ESMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器(网景公司)标准的一部分。

2、DOM和BOM的区别

2.1 DOM

DOM是文档对象模型，它将文档当作一个对象来处理，DOM的顶级元素是document，它主要学习的是对页面元素的操作，它是W3C组织标准的规范。

2.2 BOM

BOM是浏览器对象模型，它将浏览器当作一个对象那个来处理，BOM的顶级元素是window，它主要学习的是对浏览器窗口交互的一些对象，BOM是浏览器厂家在各自浏览器上定义的规范。

3、BOM的构成

BOM是比DOM更大的盒子模型，我们可以理解为DOM被包含在BOM中
BOM的顶级元素是window，而window对象下又有document、location、navigation、screen、history……等对象

在这里插入图片描述

4、window对象

window对象是浏览器的顶级对象，具有双重角色
它是JavaScript访问浏览器窗口的一个接口
它是一个全局的对象，所有定义在全局作用域的变量、函数最终都会成为window对象的属性和方法
那么我们可以理解为全局的变量和函数在调用的时候其实是省略了window.的操作

5、window常见事件

5.1 窗口加载事件

onload 事件是页面的加载事件，当文档内容(包含图像、脚本文件、css文件……等)全部加载完成之后触发的事件

//传统方式绑定窗口加载事件
window.onload=function(){};

//监听方式绑定窗口加载事件
window.addEventListener("load",function(){});

5.2 文档加载事件

DOMContentLoaded也是一个加载事件，即文档加载事件，它只考虑DOM元素(不包含图像、css、flash……等)。所有它是当文档DOM元素全部加载完成之后触发的事件。

//添加文档加载事件
window.addEventListener("DOMContentLoaded",function(){});

5.3 窗口改变大小事件

onresize事件会在窗口或框架被调整大小时被触发，所有这个事件经常被用作处理响应式布局。

winddow.onresize = function(){};

// 案例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onresize事件</title>
    <style>
        div {
            width: 1000px;
            height: 200px;
            background-color: gold;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 浏览器的窗口加载事件
        window.onload = function() {
            // 获取div元素
            var box = document.querySelector("div");
            // 浏览器被改变大小后触发的事件
            window.onresize = function() {
                //大小颜色改变
                box.style["width"] = "100px";
                box.style["height"] = "100px";
                box.style["backgroundColor"] = "pink";
            }
        }
    </script>
</body>

</html>

5.4 定时器事件

注意：

请看本人上一篇博文：https://blog.csdn.net/abraham_ly/article/details/110110289

5.5 location 对象

5.5.1 location对象介绍

JavaScript中location对象用于获取或设置窗体的 URL地址，并且可以用于解析URL，是BOM中最重要的对象之一。

5.5.2 ULR

5.5.2.1 介绍

URL是统一资源定位符(Uniform Resource Location)是互联网上的标准资源地址，网络所有的数据都以文件形式保存，每个文件在世界中都是一个唯一的URL，它包含的信息指出文件的所在位置及浏览器的处理方式。

5.5.2.2 语法格式

URL由三部分组成：资源类型、存放资源的主机域名、资源文件名，也可以认为由4部分组成：协议、主机、端口、路径。

protocol://hostname[:port]/path/[;parameters][?query]#fragment
协议类型://主机名[:端口号]/路径/[;参数][?查询]#信息片段
//注意：带方括号[]的为可选项

5.5.2.3协议类型

file 资源是本地计算机上的文件。格式file:///，注意后边应是三个斜杠。
ftp 通过 FTP访问资源。格式 FTP://
gopher 通过 Gopher 协议访问该资源。
http 通过 HTTP 访问该资源。格式 HTTP://
https 通过安全的 HTTPS 访问该资源。格式 HTTPS://
mailto 资源为电子邮件地址，通过 SMTP 访问。格式 mailto:

host：主机名称（域名）

port：端口号可选，如果省略使用的是默认的端口号，http默认的端口号是80

path：路径由0个或多个"/"+文件地址等组成，表示主机上的文件地址目录

5.5.3 属性

href：获取或设置一个url
host：返回主机(域名)
port：返回端口号，如果未写返回空字符串
pathname：返回路径
search：返回参数，URL参数指的是URL地址中网址之后的？以后
hash：返回片段，URL中#后面的内容

5.5.4方法

assign()：与href一样，可以跳转页面，重定向跳转
replace()：替换当前页面，不录入历史中，所有不能后退页面
reload()：重新载入页面，相当于刷新按钮，如果参数为true相当于强制刷新

5.6 navigation 对象

navigation对象主要是记录浏览器的信息，常用的属性是userAgent，该属性可以返回由客户端发送至服务器的user-agent头部的值。

5.7 history 对象

window对象提供的history对象与浏览器的历史记录进行交互。

5.7.1常用方法

back()：实现浏览器后退功能
forward()：实现浏览器的前进功能
go(参数)：前进后退功能，参数如果是1，则前进一个页面；如果是-1，则后退一个页面；如果是N则前进或后退N个页面。

istory 对象

window对象提供的history对象与浏览器的历史记录进行交互。

5.7.1常用方法

back()：实现浏览器后退功能
forward()：实现浏览器的前进功能
go(参数)：前进后退功能，参数如果是1，则前进一个页面；如果是-1，则后退一个页面；如果是N则前进或后退N个页面。

御弟謌謌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
《JavaScript基础之BOM对象》

《JavaScript基础之BOM对象》目录：《JavaScript基础之BOM对象》1、什么是BOM2、DOM和BOM的区别2.1 DOM2.2 BOM3、BOM的构成4、window对象5、window常见事件5.1 窗口加载事件5.2 文档加载事件5.3 窗口改变大小事件5.4 定时器事件5.5 location 对象5.5.1 location对象介绍5.5.2 ULR5.5.2.1 介绍5.5.2.2 语法格式5.5.2.3协议类型5.5.3 属性5.5.4方法5.6 navigation 对
复制链接

扫一扫