JavaScript初级篇——BOM

_花卷
VIP.3 渐入佳境
327 阅读4分钟

BOM（Browser Object Model）：浏览器对象模型，提供了与浏览器窗口进行交互的对象，其核心对象是window。

BOM的构成如下：

一、window对象

window对象是浏览器的顶级对象，它具有双重身份：

  • 是JS访问浏览器窗口的一个接口
  • 是一个全局对象（Global对象），定义在全局作用域中的变量、函数都会变成window对象的属性和方法

在调用全局方法的时候可以省略window，如： alert()、prompt()

window下有一个特殊的属性window.name（所以不要使用var定义name）

1-1、window对象常见属性

  • window.innerWidth：可视区宽度
  • window.innerHeight: 可视区高度

1-2、window对象常见事件

1-2-1、窗口加载事件

window.onload = function () {}
// 或者
window.addEventListener("load", function() {})

window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等）

  • 有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数
  • window.onload是传统注册事件方式，只能写一次，如果有多个，会以最后一个window.onload为准
  • 如果使用addEventListener则没有限制

onload & DOMContentLoaded对比：

document.addEventListener('DOMContentLoaded',function(){})
  • DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、文件等
  • ie9以上才支持
  • 如果页面的图片很多，从用户访问到onload触发可能需要较长的事件，交互效果就不能实现，会影响用户的体验，此时用DOMContentLoaded事件比较合适

1-2-2、调整窗口大小事件

window.onresize = function(){}
// 或者
window.addEventListener("resize",function(){});
  • 只要窗口大小发生像素变化，就会触发该事件
  • 经常利用该事件完成响应式布局。（window.innerWidth为当前屏幕的宽度）

1-2-3、打开&关闭窗口事件

  1. 打开窗口：

语法：window.open(URL, target)

  • URL为新窗口地址
  • target为新窗口打开方式。包括：
    • _blank：新窗口打开
    • _self：当前窗口打开
  1. 关闭窗口：

语法：window.close()

1-3、window下的各类弹窗

1-3-1、alert()

语法：alert('提示内容')

1-3-2、confirm()

语法：confirm('提示内容')

  • 点击确定，返回true
  • 点击取消，返回false

1-3-3、prompt()

语法：prompt('提示内容', '文本框默认值')

  • 点击确定，返回输入框的内容
  • 点击取消，返回null

1-4、window对象提供的定时器

window对象提供了的定时器包括：

  • setTimeout()
  • setInterval()

以及清除定时器方法：

  • clearTimeout()

1-4-1、setTimeout()

语法： window.setTimeout(调用函数, [延迟的毫秒数]);

  • window可以省略
  • 调用函数可以直接写函数，也可以写函数名
  • 延迟的毫秒数默认是0

1-4-2、setInterval()

语法： window.setInterval(调用函数, [延迟的毫秒数]);

  • window可以省略
  • 调用函数可以直接写函数，也可以写函数名
  • 延迟的毫秒数默认是0
  • 第一次执行是间隔毫秒数之后执行，之后每个这个毫秒数便执行一次

1-4-3、clearTimeout()

语法： window.clearTimeout(timeoutID);

  • window可以省略
  • timeoutID为定时器的标识符
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <button>点击停止定时器</button>
    <script>
      const btn = document.querySelector('button');
      const timer = setTimeout(function() {
        console.log('爆炸了');

      }, 5000);
      btn.addEventListener('click', function() {
        clearTimeout(timer);
      })
    </script>
  </body>

</html>

1-4-4、倒计时案例

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      div {
        margin: 200px;
      }

      span {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #333;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }
    </style>
  </head>

  <body>
    <div>
      <span class="hour">1</span>
      <span class="minute">2</span>
      <span class="second">3</span>
    </div>
    <script>
      // 1. 获取元素 
      const hour = document.querySelector('.hour'); // 小时的黑色盒子
      const minute = document.querySelector('.minute'); // 分钟的黑色盒子
      const second = document.querySelector('.second'); // 秒数的黑色盒子
      const inputTime = Date.now() + 24 * 3600 * 1000; // 制造24小时倒计时效果
      countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
      // 2. 开启定时器
      setInterval(countDown, 1000);

      function countDown() {
        const nowTime = Date.now(); // 返回的是当前时间总的毫秒数
        const times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
        // 获取小时
        let h = Math.floor(times / 3600) + ''; // 转成字符串，方便后续补0
        h = ('00' + h).slice(h.length);
        hour.innerHTML = h;
        // 获取分钟
        let m = Math.floor(times % 3600 / 60) + '';
        m = ('00' + m).slice(m.length);
        minute.innerHTML = m;
        // 获取秒数
        let s = Math.floor(times % 3600 % 60) + '';
        s = ('00' + s).slice(s.length);
        second.innerHTML = s;
      }
    </script>
  </body>

</html

！！一个补0小技巧：

在时分秒前先补上'00'两个0，再通过字符串的slice方法从原时间长度位置开始截取：

比如，剩余7分钟，倒计时上要显示成07，则：

  1. 先把7加上'00'变成'007'
  2. 截取007，从1的位置开始截取（因为原来7的长度为1），所以就变成了07

再比如，剩余20分钟，倒计时上显示成20，则：

  1. 先把20加上'00'变成'0020'
  2. 截取0020，从2的位置开始截取（因为原来20的长度为2），所以就还是20

二、location对象

window对象提供了一个location属性，用户获取设置窗口的URL并且可以用于解析URL。因为这个属性的返回值是一个对象，所以这个属性也称为location对象。

2-1、URL

统一资源定位符（Uniform Resource Locator）是互联网上标准资源的地址。互联网上每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment

如：www.hhxx.cn/index.html?…

组成说明
protocal通信协议 ，如：常用的http, ftp等
host主机（域名）www.hhxx.cn
port端口号，可选，省略时使用默认端口（http默认端口80）
path路径，一般来表示主机上的一个目录或文件地址
query参数，以键值对的形式，通过&分隔
fragment片段，#后面内容常见于链接锚点

2-2、location对象的属性

常见的location对象的属性包括：

location对象属性返回值
location.href获取或设置整个URL，获取：location.href，设置：location.href="新地址"
location.host返回主机（域名）
location.port返回端口号
location.pathname返回路径
location.search返回参数，拿到的是路径中问号后面的内容，如：?name=qll&age=18
location.hash返回片段 #后面内容，如：#view1
  • 可使用onhashchange来监听hash的变化：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
  </head>
  <body>
    <nav>
      <a href="#view1">视图1</a>
      <a href="#view2">视图2</a>
      <a href="#view3">视图3</a>
    </nav>

    <div id="view">
      这是第一个视图
    </div>

    <script>
      {
        let view = document.querySelector('#view');
        setView();
        // 路由发生变化时。调取一下
        window.onhashchange = setView;
        function setView() {
          let hash = location.hash;
          switch(hash) {
            case "":
            case "#view1":
              view.innerHTML = '这是第一个视图';
              break;
            case '#view2':
              view.innerHTML = '这是第二个视图';
              break;
            case '#view3':
              view.innerHTML = '这是第三个视图';
              break;
          }
        }
      }
    </script>
  </body>
</html>

2-2、location对象的方法

常见的location对象的方法如下：

location对象的方法返回值
location.assign()跟href一样，可以跳转页面（也称为重定向页面）
location.replace()替换当前页面，因为不记录历史，所以不能后退页面
location.reload()重新加载页面，相当于刷新按钮或者f5

总结：

跳转页面可通过三种方式：location.href = '新地址'、location.assign('新地址')、location.replace('新地址')

  • location.href = 'xxx'与location.assign('xxx')效果相同，可返回上一个地址
  • location.replace('xxx')后不能返回上一个地址
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
  </head>
  <body>
    <button>跳转</button>
    <script>
      {
        let btn = document.querySelector('button');
        btn.onclick = function() {
          console.log(location.href); // window可以省略
          location.assign("https://www.baidu.com/s?wd='qll'");
          // location.href = "https://www.baidu.com/s?wd='qll'";
          // location.replace("https://www.baidu.com/s?wd='qll'");
        }
      }
    </script>
  </body>
</html>

三、navigator对象

navigator对象包含有关浏览器和设备的信息

其中常用属性包括：

  • userAgent，该属性返回由客户机发送服务器的user-agent头部的值
  • onLine，网络信息：true代表有网，false代表无网

四、history对象

history对象与浏览器历史记录进行交互，常用方法如下：

history对象方法作用
back()后退功能
forward()前进功能
go(参数)前进后退功能：1表示前进一个页面，-1表示后退一个页面
avatar
文章
阅读
粉丝