JavaScript丨JavaScript和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丨JavaScript和BOM

什么是BOM？

对比

API以及如何使用？

prompt

alert

confirm

close

open

setTimeout

setInterval

clearInterval和clearTimeout()

Event

History

location

screen

navigator

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript丨JavaScript和BOM

什么是BOM？

对比

API以及如何使用？

prompt

alert

confirm

close

open

setTimeout

setInterval

clearInterval和clearTimeout()

Event

History

location

screen

navigator

热门文章

最新文章

相关课程

相关电子书

相关实验场景