BOM介绍

news2024/11/28 2:29:41

文章目录

    • 1、简介
      • 主要作用
    • 2、BOM的组成
      • 2.1 窗口对象window
        • 2.1.1 window对象特点
        • 2.1.2 window作用域
        • 2.1.3 window对象常见方法
          • **第一类：系统对话框**
          • 第二类：控制浏览器窗口方法
          • 第三类：与定时器有关的方法

1、简介

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

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

主要作用

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

2、BOM的组成

BOM中共有五大对象

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

2.1 窗口对象window

BOM 的核心是 window 窗口对象对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。

2.1.1 window对象特点

window对象不需要创建可以直接使用，window.方法名();，甚至可以把window直接省略方法名();

window.alert("hello window");
//等于下面的
alert("hello window");
2.1.2 window作用域

通常node环境下的全局作用域为global，浏览器的全局作用域为window，而window对象又会被复用为ECMAScript的Global对象，所以可以通过var声明的所有全局变量和函数都会变成window对象的属性和方法。比如：

<script>
    var name = 'zhangsan';
    var sayName = function () {
    console.log(this.name); //zhangsan
    }
    console.log(name);//zhangsan
    console.log(window.name); //zhangsan
    sayName();  //zhangsan
    window.sayName(); //zhangsan
</script>

上段代码我们使用var声明全局变量和全局方法，然后使用window对象调用它们，这说明我们声明的这些变量和方法全都挂载到了window对象上去了。

需要注意的是：

如果我们使用let或者const声明方法时，该方法不会挂载到window对象上去，比如下列代码会报错：

<script>
    let name1 = '张三';
    let sayName1 = function () {
        console.log(this.name); // 张三
    }
    console.log(name1);// 张三
    console.log(window.name1); // 张三
    sayName1();  // 张三
    window.sayName1(); // 错误：window.sayName1 is not a function
</script>

细心的小伙伴应该也发现了，我们声明的全局变量可以不适用window.say的形式调用，可以省略window，因为window是全局作用域，变量或方法找不到的时候自然要去window上找，所以我们挂载到window对象上的方法或变量通常可以直接调用，而不需要window.。

2.1.3 window对象常见方法
第一类：系统对话框

使用 alert()、confirm()和 prompt()方法，可以让浏览器调用系统对话框向用户显示消息。这些对话框与浏览器中显示的网页无关，而且也不包含 HTML。它们的外观由操作系统或者浏览器决定，无法使用 CSS 设置。此外，这些对话框都是同步的模态对话框，即在它们显示的时候，代码会停止执行，在它们消失以后，代码才会恢复执行。

  • alert()方法

    alert()接收一个要显示给用户的字符串。

    警告框（alert）通常用于向用户显示一些他们无法控制的消息，比如报错。用户唯一的选择就是在看到警告框之后把它关闭。

    <script>
    alert("你确定吗?");
</script>

    在这里插入图片描述

  • confirm()方法

    确认框通过调用 confirm()来显示。确认框跟警告框类似，都会向用户显示消息。但不同之处在于，确认框有两个按钮：“Cancel”（取消）和“OK”（确定）。想知道用户单击了 OK 按钮还是 Cancel 按钮，可以判断 confirm()方法的返回值：true 表示单击了 OK 按钮，false 表示单击了 Cancel 按钮。

    <script>
    var result = confirm('你确定吗?');
    if (result) {
        console.log('确定');
    }else{
        console.log('取消');
    }
</script>

    在这里插入图片描述

    选择确定或者取消按钮会在控制台输出结果：

    在这里插入图片描述

  • prompt()方法

    提示框，通过调用 prompt()方法来显示。提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按钮，提示框还会显示一个文本框，让用户输入内容。prompt()方法接收两个参数：要显示给用户的文本，以及文本框的默认值（可以是空字符串）。

    <script>
    var result = prompt("你叫什么名字?");
    if (result) {
        console.log(result);
    }else{
        console.log('取消');
    }
</script>

    往输入框输入“张三”会在控制台输出

第二类：控制浏览器窗口方法

  • open()方法

    基本语法：window.open(URL,name,specs)

    这个方法可以接收 3个参数：要加载的 URL、目标窗口、特性字符串。

    参数介绍：

    • URL：可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口。

    • name：可选。指定target属性或窗口的名称。支持以下值：

      1. _blank - URL加载到一个新的窗口。这是默认。
      2. _parent - URL加载到父框架
      3. _self - URL替换当前页面
      4. _top - URL替换任何可加载的框架集
      5. name - 窗口名称

    • specs：可选。一个逗号分隔的项目列表。支持以下值：

      参数作用
      height = pixels，width = pixels窗口的高度，宽度，最小.值为100
      left = pixels，top = pixels该窗口的左侧位置，窗口顶部的位置.仅限IE浏览器
      hannelmode = yes /no /1 /0是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
      directories = yes /no /1 /0是否添加目录按钮。默认是肯定的。仅限IE浏览器
      fullscreen = yes /no /1 /0浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
      location = yes /no /1 /0是否显示地址字段.默认值是yes
      menubar = yes /no /1 /0是否显示菜单栏.默认值是yes
      resizable = yes /no /1 /0是否可调整窗口大小.默认值是yes
      scrollbars = yes /no /1 /0是否显示滚动条.默认值是yes
      status = yes /no /1 /0是否要添加一个状态栏.默认值是yes
      titlebar = yes /no /1 /0是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
      toolbar = yes /no /1 /0是否显示浏览器工具栏.默认值是yes

  • close()方法

    关闭浏览器窗口，谁调用就关闭谁。

    例如：

    <button id="closeWindow">关闭窗口</button>
<script>
	var closeWindow = document.getElementById("closeWindow");
    closeWindow.onclick = function(){
        window.close(); //关闭调用它的窗口
    }
</script>
第三类：与定时器有关的方法

间歇调用和超时调用，javascript是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行。

  • setTimeout()

    指定的时间后执行指定的函数
    参数1：函数对象
    参数2：时间，单位毫秒
    返回值：返回当前定时器的id

    <script>
    //第一个参数传入方法名，不带括号,第二个参数传入时间（单位毫秒）
    var id = setTimeout(fun,3000);
	function fun(){
		alert("hello");
	}
</script>

  • setInterval()

    每间隔指定的时间执行指定的函数
    参数1：函数对象
    参数2：时间，单位毫秒
    返回值：返回当前间隔器的id

    //间隔执行
function testSetInterval(){
     var id = window.setInterval(function(){
          alert("间隔执行");
     },2000);  
}

erval()**

每间隔指定的时间执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒
返回值：返回当前间隔器的id

```javascript
//间隔执行
function testSetInterval(){
     var id = window.setInterval(function(){
          alert("间隔执行");
     },2000);  
}
```

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1365550.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

docker安裝gocd-server，并配置gitlab授权登录

docker安裝gocd-server，并配置gitlab授权登录

gocd的地址&#xff1a;Installing GoCD server on Windows | GoCD User Documentation gocd文档&#xff1a;GitHub - gocd/docker-gocd-server: Docker server image for GoCD 一、docker拉取gocd镜像 #拉取server镜像 docker pull gocd/gocd-server:v21.1.0docker pull g…
阅读更多...
3的幂00

3的幂00

题目链接 3的幂 题目描述 注意点 无 解答思路 不断除以3直到除数或余数为0为止&#xff0c;判断除完后的数字是否为1 代码 class Solution {public boolean isPowerOfThree(int n) {while (n / 3 ! 0) {if (n % 3 ! 0) {return false;}n n / 3;}return n 1;} }关键点 …
阅读更多...
springmvc内嵌tomcat、tomcat整合springmvc、自研国产web中间件

springmvc内嵌tomcat、tomcat整合springmvc、自研国产web中间件

springmvc内嵌tomcat、tomcat整合springmvc、自研国产web中间件 这是由于公司老项目转化springboot存在太多坑&#xff0c;特别是hibernate事务一条就坑到跑路&#xff0c;你又不想搞没听说过的国产中间件兼容&#xff0c;又不想搞weblogic、WebSphere等中间件的适配&#xff…
阅读更多...
【蓝桥杯软件赛 零基础备赛20周】第7周——二叉树

【蓝桥杯软件赛 零基础备赛20周】第7周——二叉树

文章目录 1 二叉树概念2 二叉树的存储和编码2.1 二叉树的存储方法2.2 二叉树存储的编码实现2.3 二叉树的极简存储方法 3 例题4 习题 前面介绍的数据结构数组、队列、栈&#xff0c;都是线性的&#xff0c;它们存储数据的方式是把相同类型的数据按顺序一个接一个串在一起。简单的…
阅读更多...
MPL3115A2大气压温度采集芯片的工作原理与特点详解

MPL3115A2大气压温度采集芯片的工作原理与特点详解

目录 一、引言 二、MPL3115A2主要特点和功能 三、主要优势 3.1 内部自动补偿 3.2 FIFO 四、硬件原理图 4.1 硬件连接 五、软件配置 六、资料获取 一、引言 MPL3115A2是一款高精度的大气压力传感器&#xff0c;能够测量大气压力、海拔高度和温度。它采用了MEMS&#xf…
阅读更多...
Redis内存策略：「过期Key删除策略」+ 「内存淘汰策略」

Redis内存策略：「过期Key删除策略」+ 「内存淘汰策略」

Redis之所以性能强&#xff0c;最主要的原因就是基于内存存储&#xff0c;然而单节点的Redis其内存大小不宜过大&#xff0c;否则会影响持久化或主从同步的性能。 Redis内存满了&#xff0c;会发生什么&#xff1f; 在Redis的运行内存达到了某个阈值&#xff0c;就会触发内存…
阅读更多...
Linux - No space left on device

Linux - No space left on device

问题描述 No space left on device 原因分析 说明在服务器设备上的存储空间已经满了&#xff0c;不能再上传或者新建文件夹或者文件等。 解决方案 确认查看服务器系统的磁盘使用情况是否是真的已经没有剩余空间&#xff0c;复制下面命令在服务器上运行&#xff0c;然后发现如果…
阅读更多...
CSS 彩虹按钮效果

CSS 彩虹按钮效果

<template><view class"content"><button class"btn">彩虹按钮</button></view> </template><script></script><style>body{background-color: #000;}.content {margin-top: 300px;}.btn {width: 1…
阅读更多...
jenkins忘记密码后的操作

jenkins忘记密码后的操作

1、先停止 jenkins 服务 systemctl stop jenkins 关闭Jenkins服务 或者杀掉进程 ps -ef | grep jenkins &#xff5c;awk {print $2} | grep -v "grep" | xargs kill -9 2、找到 config.xml 文件 find /root -name config.xml3、备份config.xml文件 cp /root/.jen…
阅读更多...
添加一个编辑的小功能（PHP的Laravel）

添加一个编辑的小功能（PHP的Laravel）

一个编辑的按钮可以弹出会话框修改断更天数 前台 加一个编辑按钮的样式&#xff0c;他的名字是固定好的 之前有人封装过直接用就好&#xff0c;但是一定放在class里面&#xff0c;不要放在id里面 看见不认识的方法一定要去看里面封装的是什么 之前就是没有看&#xff0c;所以…
阅读更多...
包含自动轮播、点击切换、显示图片信息和页码方框显示码数的 HTML 和 JavaScript 示例：

包含自动轮播、点击切换、显示图片信息和页码方框显示码数的 HTML 和 JavaScript 示例：

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>轮播图</title><style>#carousel-conta…
阅读更多...
hfish蜜罐docker部署

hfish蜜罐docker部署

centos 安装 docker-CSDN博客Docker下载部署 Docker是我们推荐的部署方式之一&#xff0c;当前的版本拥有以下特性&#xff1a; 自动升级&#xff1a;每小时请求最新镜像进行升级&#xff0c;升级不会丢失数据。数据持久化&#xff1a;在宿主机/usr/share/hfish目录下建立dat…
阅读更多...
AI ppt生成器 Tome

AI ppt生成器 Tome

介绍 一款 AI 驱动的 PPT/幻灯片内容辅助生成工具。只需要输入一个标题或者一段特定的描述&#xff0c;AI 便会自动生成一套包括标题、大纲、内容、配图的完整 PPT。 Tome平台只需要用户输入一句话&#xff0c;就可以自动生成完整的PPT&#xff0c;包括文字和图片。功能非常强…
阅读更多...
[AutoSar]基础部分 RTE 04 数据类型的定义及使用

[AutoSar]基础部分 RTE 04 数据类型的定义及使用

目录 关键词平台说明一、数据类型分类二、Adt三、Idt四、Base 数据类型五、units六、compu methods七、data constraint 关键词 嵌入式、C语言、autosar、Rte 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商TI编程语言C&#xff0c;C编译器HighTec (GCC) 一、数据…
阅读更多...
浅谈对Promise的理解。

浅谈对Promise的理解。

一、Promise定义 JS中用于处理异步操作的编程模式。一个Promise是一个代理&#xff0c;它代表一个创建Promise时不一定已知的值。它允许我们将处理的程序与异步操作的最终成功值或失败值原因想关联起来。这使得异步方法可以像同步方法一样返回值&#xff1a;异步方法不会立即返…
阅读更多...
【数据库分库分表思路】

【数据库分库分表思路】

一、数据切分介绍 关系型数据库本身比较容易成为系统瓶颈&#xff0c;单机存储容量、连接数、处理能力都有限。当单表的数据量达到1000W或100G以后&#xff0c;由于查询维度较多&#xff0c;即使添加从库、优化索引&#xff0c;做很多操作时性能仍下降严重。此时就要考虑对其进…
阅读更多...
JavaScript 中的数组过滤

JavaScript 中的数组过滤

在构建动态和交互式程序时&#xff0c;您可能需要添加一些交互式功能。例如&#xff0c;用户单击按钮以筛选一长串项目。 您可能还需要处理大量数据&#xff0c;以仅返回与指定条件匹配的项目。 在本文中&#xff0c;您将学习如何使用两种主要方法在 JavaScript 中过滤数组。…
阅读更多...
4.2V线性500mA充电管理芯片WT4054

4.2V线性500mA充电管理芯片WT4054

4.2V线性500mA充电管理芯片WT4054 WT4054&#xff0c;一款强大而小巧的锂电池充电IC&#xff0c;为你的便携式设备提供无忧充电。其SOT-23-5L封装小巧轻便&#xff0c;所占空间极小&#xff0c;而其强大的功能将为你的设备提供稳定、高效的电量供应。 这款充电器拥有众多令人惊…
阅读更多...
第二证券：交易商协会优化 债券持有人集体行动机制

第二证券：交易商协会优化 债券持有人集体行动机制

1月2日&#xff0c;交易商协会称&#xff0c;为更好发挥持有人集体行动机制在债券风险及违约处置中的重要作用&#xff0c;交易商协会组织商场成员修订了《银行间债券商场非金融企业债务融资东西持有人会议规程》《银行间债券商场非金融企业债务融资东西附和收集操作指引》&…
阅读更多...
汪林望教授将于每周三以互动问答直播形式教您如何用龙讯旷腾计算软件PWmat计算不同材料性质

汪林望教授将于每周三以互动问答直播形式教您如何用龙讯旷腾计算软件PWmat计算不同材料性质

打开VX→搜索“汪林望计算讲座”&#xff0c;关注汪老师的频道&#xff0c;每周三下午16:00我们准时直播&#xff01; 大家提前准备好问题&#xff0c;可直接提问讨论&#xff0c;当面请教 汪林望教授 中科院半导体所首席科学家 北京龙讯旷腾科技有限公司创始人 美国劳伦斯…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023