备案控制台
开发者社区 开发与运维 文章 正文

JavaScript丨JavaScript和BOM

2023-10-11 42
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 上一次讲了什么是DOM，这一次讲讲什么是BOM。

上一次讲了什么是DOM，这一次讲讲什么是BOM。

什么是BOM？

DOM就是浏览器对象模型，他没有一个完全的标准，都是沿用以前Netscape的这一套吧。

浏览器对象模型(BOM)指的是由Web浏览器暴露的所有对象组成的表示模型。BOM与DOM不同，其既没有标准的实现，也没有严格的定义, 所以浏览器厂商可以自由地实现BOM。

作为显示文档的窗口, 浏览器程序将其视为对象的分层集合。当浏览器分析文档时, 它将创建一个对象的集合, 以定义文档, 并详细说明它应如何显示。浏览器创建的对象称为文档对象。它是浏览器使用的更大的对象集合的一部分。此浏览器对象集合统称为浏览器对象模型或BOM。

BOM层次结构的顶层是窗口对象, 它包含有关显示文档的窗口的信息。某些窗口对象本身就是描述文档和相关信息的对象。

以上是维基百科对于BOM的解释。

对比

可能大家对于BOM和DOM还是不怎么清楚。那么就用一张图和表格做一下对比吧！

来解释下上面的图片，红色范围内，就是BOM，而DOM就是绿色范围内。所以我们一般将BOM的实例成为window，而DOM实例为document。从图中可以看出，其实window是包含了document的。我们来获取一下。

我们在右边的控制台输入window.document，可以看到打印了一个实例对象。我们将鼠标放在上面，左边就会显示蓝色区域，这个蓝色区域就是document就是BOM，所以你也可以看到，document其实就是window的一部分吧。

DOM BOM
文档对象模型 浏览器对象模型
顶级对象是document 顶级对象是window
可以用来操作html页面的元素 用来和浏览器之间进行交互
标准化是w3c来制定 是由各浏览器厂商在各自浏览器上定义，没有一个统一的标准

API以及如何使用？

我将创建一个html文件，来展示常用的API以及该如何使用！

prompt

会弹出一个输入框。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript和BOM</title>
  </head>
  <body></body>
  <script>
    // prompt
    prompt()
  </script>
</html>

alert

弹出一个提示框

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript和BOM</title>
  </head>
  <body></body>
  <script>
    // prompt
    // window.prompt()
    // alert
    window.alert('这是一个提示！')
  </script>
</html>

confirm

confirm("");带确定、取消的提示框，分别返回true、false

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript和BOM</title>
  </head>
  <body></body>
  <script>
    // prompt
    // window.prompt()
    // alert
    // window.alert('这是一个提示！')
    // confirm
    window.confirm('知道这是一个提示吗？')
  </script>
</html>

close

close();关闭当前浏览器窗口。

open

open(),打开一个新窗口

  • 参数一：新窗口的地址
  • 参数二：新窗口的名字
  • 参数三：新窗口的各种配置属性
    <!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JavaScript和BOM</title>
</head>
<body></body>
<script>
  // prompt
  // window.prompt()
  // alert
  // window.alert('这是一个提示！')
  // confirm
  // window.confirm('知道这是一个提示吗？')
  // open
  window.open("https://www.baidu.com", "百度", "_black");
</script>
</html>

setTimeout

setTimeout()延时器，表示延时多少ms执行一个函数。

  • 参数一：可以传入匿名函数，也可以传入函数名。
  • 参数二：延时毫秒数
  • 参数三~参数n：传给回调函数的参数。
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript和BOM</title>
  </head>
  <body></body>
  <script>
    // prompt
    // window.prompt()
    // alert
    // window.alert('这是一个提示！')
    // confirm
    // window.confirm('知道这是一个提示吗？')
    // open
    // window.open("https://www.baidu.com", "百度", "_black");
    // setTimeout，1秒后会执行打印
    setTimeout(() => {
        console.log('橘子orange');
    }, 1000);
  </script>
</html>

setInterval

setInterval()定时器，表示每隔多少毫秒执行一遍，其他方法与setTimeout()完全相同。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript和BOM</title>
  </head>
  <body></body>
  <script>
    // prompt
    // window.prompt()
    // alert
    // window.alert('这是一个提示！')
    // confirm
    // window.confirm('知道这是一个提示吗？')
    // open
    // window.open("https://www.baidu.com", "百度", "_black");
    // setTimeout，1秒后会执行打印
    // setTimeout(() => {
    //     console.log('橘子orange');
    // }, 1000);
    // setInterval，每隔1秒执行一次打印
    setInterval(() => {
      console.log("橘子orange");
    }, 1000);
  </script>
</html>

clearInterval和clearTimeout()

clearInterval和clearTimeout():分别清除定时器，延时器。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript和BOM</title>
  </head>
  <body></body>
  <script>
    // prompt
    // window.prompt()
    // alert
    // window.alert('这是一个提示！')
    // confirm
    // window.confirm('知道这是一个提示吗？')
    // open
    // window.open("https://www.baidu.com", "百度", "_black");
    // setTimeout，1秒后会执行打印
    const timer = setTimeout(() => {
      console.log("橘子orange");
    }, 1000);
    // setInterval，每隔1秒执行一次打印
    const timer1 = setInterval(() => {
      console.log("橘子orange");
    }, 1000);
    clearTimeout(timer);
    clearInterval(timer1);
  </script>
</html>

Event

Event事件，包含了键盘鼠标等事件

  • onblur; 元素失去焦点。
  • onchange; 域的内容被改变。
  • onclick; 当用户点击某个对象时调用的事件句柄。
  • onfocus; 元素获得焦点。
  • onmousedown;鼠标按钮被按下。
  • onmousemove;鼠标被移动。
  • onmouseout;鼠标从某元素移开。
  • onmouseover;鼠标移到某元素之上。
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript和BOM</title>
  </head>
  <body></body>
  <script>
    // prompt
    // window.prompt()
    // alert
    // window.alert('这是一个提示！')
    // confirm
    // window.confirm('知道这是一个提示吗？')
    // open
    // window.open("https://www.baidu.com", "百度", "_black");
    // setTimeout，1秒后会执行打印
    // const timer = setTimeout(() => {
    //   console.log("橘子orange");
    // }, 1000);
    // // setInterval，每隔1秒执行一次打印
    // const timer1 = setInterval(() => {
    //   console.log("橘子orange");
    // }, 1000);
    // clearTimeout(timer);
    // clearInterval(timer1);
    window.onblur = (e) => {
      console.log(e);
    };
    window.onchange = (e) => {
      console.log(e);
    };
    window.onclick = (e) => {
      console.log(e);
    };
    window.onfocus = (e) => {
      console.log(e);
    };
    window.onmousedown = (e) => {
      console.log(e);
    };
    window.onmousemove = (e) => {
      console.log(e);
    };
    window.onmouseout = (e) => {
      console.log(e);
    };
    window.onmouseover = (e) => {
      console.log(e);
    };
  </script>
</html>

History

History：里面封装着当前窗口成功访问过的url历史

  • length; 查看浏览器的历史访问的网页的个数；
  • back(); 加载history列表中的前一个url
  • forward();加载history列表中的下一个url
  • go(); 加载history列表中的某个具体页面
  • go(0);相当于刷新页面
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript和BOM</title>
  </head>
  <body></body>
  <script>
    // prompt
    // window.prompt()
    // alert
    // window.alert('这是一个提示！')
    // confirm
    // window.confirm('知道这是一个提示吗？')
    // open
    // window.open("https://www.baidu.com", "百度", "_black");
    // setTimeout，1秒后会执行打印
    // const timer = setTimeout(() => {
    //   console.log("橘子orange");
    // }, 1000);
    // // setInterval，每隔1秒执行一次打印
    // const timer1 = setInterval(() => {
    //   console.log("橘子orange");
    // }, 1000);
    // clearTimeout(timer);
    // clearInterval(timer1);
    // window.onblur = (e) => {
    //   console.log(e);
    // };
    // window.onchange = (e) => {
    //   console.log(e);
    // };
    // window.onclick = (e) => {
    //   console.log(e);
    // };
    // window.onfocus = (e) => {
    //   console.log(e);
    // };
    // window.onmousedown = (e) => {
    //   console.log(e);
    // };
    // window.onmousemove = (e) => {
    //   console.log(e);
    // };
    // window.onmouseout = (e) => {
    //   console.log(e);
    // };
    // window.onmouseover = (e) => {
    //   console.log(e);
    // };
    window.history.length;
    window.history.back();
    window.history.forward();
    window.history.go(0);
  </script>
</html>

location

location:里面封装当前窗口打开的url

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript和BOM</title>
  </head>
  <body></body>
  <script>
    // prompt
    // window.prompt()
    // alert
    // window.alert('这是一个提示！')
    // confirm
    // window.confirm('知道这是一个提示吗？')
    // open
    // window.open("https://www.baidu.com", "百度", "_black");
    // setTimeout，1秒后会执行打印
    // const timer = setTimeout(() => {
    //   console.log("橘子orange");
    // }, 1000);
    // // setInterval，每隔1秒执行一次打印
    // const timer1 = setInterval(() => {
    //   console.log("橘子orange");
    // }, 1000);
    // clearTimeout(timer);
    // clearInterval(timer1);
    // window.onblur = (e) => {
    //   console.log(e);
    // };
    // window.onchange = (e) => {
    //   console.log(e);
    // };
    // window.onclick = (e) => {
    //   console.log(e);
    // };
    // window.onfocus = (e) => {
    //   console.log(e);
    // };
    // window.onmousedown = (e) => {
    //   console.log(e);
    // };
    // window.onmousemove = (e) => {
    //   console.log(e);
    // };
    // window.onmouseout = (e) => {
    //   console.log(e);
    // };
    // window.onmouseover = (e) => {
    //   console.log(e);
    // };
    // window.history.length;
    // window.history.back();
    // window.history.forward();
    // window.history.go(0);
    console.log(location);
    console.log(location.href); //完整的URL路径
    console.log(location.protocol); //协议名
    console.log(location.hostname); //主机名
    console.log(location.port); //端口号
    console.log(location.host); //主机名+端口号
    console.log(location.pathname); //文件路径
    console.log(location.search); //从？开始的参数部分
    console.log(location.hash); //从#开始的锚点部分
  </script>
</html>

screen

screen : 显示设备的信息

  • height;屏幕的像素高度
  • width;屏幕的像素宽度
  • availHeight;屏幕的像素高度减去系统部件高度之后的值(只读)
  • availWidth;屏幕的像素宽度减去系统部件宽度之后的值(只读)
  • availLeft;未被系统部件占用的最左侧的像素值(只读)[chrome和firefox返回0，IE不支持]
  • availTop;未被系统部件占用的最上方的像素值(只读)[chrome和firefox返回0，IE不支持]

navigator

navigator: 提供了与浏览器有关的信息

  • appCodeName：浏览器的代码名。
  • appName：完整的浏览器名称。
  • appVersion：浏览器的平台和版本信息。
  • userAgent：包含浏览器的名称、内核、版本号等。
  • plugins：检测有无插件。
  • onLine：表示是否连接到了因特网。

广告：给自己的小程序打个广告！橘享工具箱！目前包含了以下功能：

  • 去水印，理论上都可以去
  • ip查询
  • 手机归属地查询
  • 在线魔方
  • 今天吃个啥
  • 手持弹幕
文章标签：
JavaScript
前端开发
Web App开发
Go
API
关键词：
JavaScript BOM
橘子的分享
目录
相关文章
晓同哇哇~
|
6天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
晓同哇哇~
14 0
景天科技苑
|
13天前
|
缓存 编解码 自然语言处理
前端javascript的BOM对象知识精讲
前端javascript的BOM对象知识精讲
景天科技苑
6 0
白砂糖与香辛料`
|
24天前
|
JavaScript 前端开发
JavaScript BOM 浏览器对象模型
JavaScript BOM 浏览器对象模型
白砂糖与香辛料`
6 0
小小小林
|
5月前
|
缓存 JavaScript 前端开发
javaScript（五）：BOM操作
JavaScript 中的 BOM（Browser Object Model）是一组用于操作浏览器窗口的对象和方法集合。BOM 使我们可以通过 JavaScript 访问浏览器窗口的各个组成部分，包括地址栏、菜单栏、历史记录、浏览器的尺寸位置等
小小小林
48 0
javaScript（五）：BOM操作
天玄TX
|
1月前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
天玄TX
20 4
穆雄雄.
|
2月前
|
JavaScript 前端开发
JavaScript操作BOM简单案例
JavaScript操作BOM简单案例
穆雄雄.
9 1
穆雄雄.
|
2月前
|
JavaScript 前端开发
JavaScript操作BOM对象
JavaScript操作BOM对象
穆雄雄.
9 1
博客zhu虎康
|
4月前
|
JavaScript 前端开发
JavaScript中的BOM操作
JavaScript中的BOM操作
博客zhu虎康
21 0
sumith
|
4月前
|
编解码 JavaScript 前端开发
JavaScript学习 --- BOM
JavaScript学习 --- BOM
sumith
16 0
盒马盒马
|
4月前
|
存储 JSON JavaScript
JavaScript：BOM操作
JavaScript：BOM操作
盒马盒马
35 1

热门文章

最新文章

  • 1
    想做JavaScript开发者，但不知道如何成长，来看看这个吧
  • 2
    JavaScript中的Prototypes
  • 3
    js弹出层/框 收集
  • 4
    JavaScript理解(转载)
  • 5
    SharePoint 2013 使用JavaScript对象模型配置智能提示
  • 6
    【转】javascript弹出固定大小的窗口页面
  • 7
    那些相见恨晚的 JavaScript 技巧
  • 8
    javascript 中的innerHTML的用法
  • 9
    [Tips]:JavaScript命名空间
  • 10
    Ext JS 4的倒数：程序员预览 Countdown to Ext JS 4: Developer Preview
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    144
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    18
  • 3
    描述 JavaScript 中的垃圾回收机制。
    21
  • 4
    如何使用 JavaScript 操作 DOM？
    20
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    22
  • 6
    JavaScript 中的数组方法有哪些？
    11
  • 7
    JS设置日期为0时0分0秒
    36
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    27
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    22
  • 10
    深入理解JavaScript中的闭包与作用域链
    10

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • HTML5 新特性教程

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • HTML及前端框架
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）