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

JavaScript丨JavaScript和BOM

2023-10-11 65
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 上一次讲了什么是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
橘子的分享
目录
相关文章
我是快乐的嘟嘟
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
我是快乐的嘟嘟
82 48
杀死一只知更鸟debug
|
3月前
|
XML 移动开发 JavaScript
js中BOM和DOM总结（基础篇）
文章总结了JavaScript的BOM和DOM知识点，包括window、screen、location、history、navigator对象，以及消息框、计时器和cookie。同时，介绍了DOM的概念、节点获取和修改方法，以及事件处理。
杀死一只知更鸟debug
52 0
js中BOM和DOM总结（基础篇）
半截诗
|
2月前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
半截诗
47 0
晓同哇哇~
|
7月前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
晓同哇哇~
54 0
蓝易云
|
3月前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API，允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法，可以极大地增强Web应用的功能性和用户体验。需要注意的是，BOM的某些特征可能会在不同浏览器中表现不一致，因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM，开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
蓝易云
38 1
toddli
|
4月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题：事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题：事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
toddli
145 1
lvbb66
|
4月前
|
JavaScript 前端开发
js bom的概念
js bom的概念
lvbb66
40 1
乐多_L
|
4月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型）
JavaScript BOM 的概念(浏览器对象模型）
乐多_L
59 1
阿福的工作室
|
4月前
|
存储 JavaScript 前端开发
JavaScript中的BOM
JavaScript中的BOM
阿福的工作室
36 0
夏天49597
|
6月前
|
JavaScript 前端开发 API
JavaScript基础-BOM与窗口交互
【6月更文挑战第12天】本文介绍了BOM（浏览器对象模型），它是JavaScript与浏览器交互的API。核心对象包括顶级对象window、document、location、navigator和history。常见问题涉及window全局作用域、location.href编码、history使用和navigator.userAgent检测。提供了代码示例，如设置页面标题、页面跳转及利用history实现无刷新跳转。掌握BOM基础和最佳实践对前端开发至关重要。
夏天49597
49 5

热门文章

最新文章

  • 1
    Node.js 的事件驱动机制
  • 2
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
  • 3
    如何使用内存监控工具来优化 Node.js 应用的性能
  • 4
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 5
    js+jquery实现贪吃蛇经典小游戏
  • 6
    在 golang 中执行 javascript 代码的方案详解
  • 7
    Node.js新作《循序渐进Node.js企业级开发实践》简介
  • 8
    Node.js 的性能
  • 9
    基于SVG的js圆形菜单插件
  • 10
    如何使用内存快照分析工具来分析Node.js应用的内存问题？
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    56
  • 2
    js设计模式-观察者模式与发布/订阅模式
    74
  • 3
    js设计模式-策略模式与代理模式的应用
    76
  • 4
    深入理解JavaScript中的闭包机制
    62
  • 5
    使用Vue.js构建交互式前端的技术探索
    92
  • 6
    使用Node.js构建实时聊天应用的技术指南
    138
  • 7
    深入理解JavaScript中的事件循环机制
    93
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    124
  • 9
    JavaScript 数组方法概览
    39
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    71

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • HTML及前端框架
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)