BOM相关

BOM👀

⭕BOM 是什么

BOM（浏览器对象模型）是 JS 与浏览器窗口交互的接口

⭕window 对象

window 对象是当前 JS 脚本运行所处的窗口，而这个窗口中包含 DOM 结构，window.document 属性就是 document 对象

📍 全局变量是 window 的属性

全局变量会成为 window 对象的属性

1
2
var a = 10;
console.log(window.a == a); // true

❗ 这就意味着，多个 JS 文件之间是共享全局作用域的，即 js 文件没有作用域隔离功能

📍 内置函数普遍是 window 的方法

如 setInterval()、alert()等内置函数，普遍是 window 的方法

🔔 窗口尺寸相关属性

属性 意义
innerHeight 浏览器窗口内容区域的高度，包含水平滚动条
innerWidth 浏览器窗口内容区域的宽度，包含垂直滚动条
outerHeight 浏览器窗口的外部高度
outerWidth 浏览器窗口的外部宽度

💡 获得不包含滚动条的窗口宽度 ，要用：

doucment.doucmentElement.clientWidth

📍resize 事件

在窗口大小改变之后，就会触发 resize 事件，可以使用 window.onresize 或者 window.addEventListener(‘resize’)来绑定事件处理函数

📍 已卷动高度

1.window.scrollY属性表示在垂直方向已滚动的像素值

2.document.documentElement.scrollTop属性也表示窗口已卷动高度

通常写法：var scrollTop = window.scrollY || document.documentElement.scrollTop

❗ 注意：window.scrollY 是只读的，而 document.documentElement.scrollTop 是可读可写的

📍scroll 事件

在窗口被卷动之后，就会触发 scroll 事件，可以使用 window.onscroll 或者 window.addEventListener(‘scroll’) 来绑定事件处理函数

⭕Navigator 对象

window.navigator 属性可以检索 navigator 对象，它内部含有用户此次活动的浏览器的相关属性和标识

属性 意义
appName 浏览器官方名称
appVersion 浏览器版本
userAgent（最常用） 浏览器的用户代理（含有内核信息和封装壳信息）
platform 用户操作系统

❗ 使用时查询地址：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent

⭕History 对象

window.history 对象提供了浏览器会话历史的接口

常用操作就是模拟浏览器回退按钮

1
2
history.back(); // 等同于点击浏览器的回退按钮
history.go(-1); // 等同于history.back();

⭕Location 对象

window.location 标识当前所在网址，可以通过给这个属性赋值命令浏览器进行页面跳转

1
2
window.location = 'https://yubai.eu.org';
window.location.href = 'https://yubai.eu.org';

📍 重新加载当前页面

可以调用 location 的 reload 方法以重新加载当前页面，参数 true 表示强制从服务器强制加载

1
window.location.reload(true);

📍GET 请求查询参数

window.location.search 属性即为当前浏览器的 GET 请求查询参数

1
2
// 比如网址：https://yubai.eu.org/?a=1&b=2
console.loog(window.location.search); // '?a=1&b=2'

⭕BOM 特效开发

💡 返回顶部按钮

返回顶部按钮的原理：改变 document.documentElement.scrollTop 属性，通过定时器逐步改变此值，则将用动画形式返回顶部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>
      body {
        height: 5000px;
        background-image: linear-gradient(blue, yellow, green);
      }
      #backtop {
        position: fixed;
        right: 50px;
        bottom: 50px;
        width: 50px;
        height: 50px;
        background-color: orange;
        font-size: 20px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="backtop">返回顶部</div>
    <script>
      var backTop = document.getElementById('backtop');
      var timer;
      backTop.addEventListener('click', function () {
        // 设表先关
        clearInterval(timer);
        // 浏览器逐步卷动，慢慢变成0
        timer = setInterval(function () {
          // 如果没到顶部，继续卷动
          if (document.documentElement.scrollTop <= 0) return clearInterval(timer);
          document.documentElement.scrollTop -= 150;
        }, 20);
      });
    </script>
  </body>
</html>

💡 楼层导航效果

DOM 元素都有offsetTop 属性，表示此元素到定位祖先元素的垂直距离

定位祖先元素：在祖先中，离自己最近的且拥有定位属性的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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>
      * {
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
      }
      .content {
        width: 1500px;
        margin: 0 auto;
        margin-bottom: 20px;
        background-color: #ccc;
        font-size: 30px;
      }
      .floornav {
        position: fixed;
        right: 50px;
        top: 50%;
        margin-top: -122px;
        width: 100px;
        background-color: orange;
        text-align: center;
        font-size: 30px;
        line-height: 50px;
      }
      .floornav ul {
        list-style: none;
      }
      .floornav ul li {
        height: 50px;
        cursor: pointer;
      }
      .current {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <nav class="floornav">
      <ul id="list">
        <li data-n="新闻" class="current">新闻</li>
        <li data-n="娱乐">娱乐</li>
        <li data-n="音乐">音乐</li>
        <li data-n="鬼畜">鬼畜</li>
        <li data-n="动漫">动漫</li>
      </ul>
    </nav>
    <section class="content" style="height: 278px" data-n="新闻">新闻板块</section>
    <section class="content" style="height: 427px" data-n="娱乐">娱乐板块</section>
    <section class="content" style="height: 356px" data-n="音乐">音乐板块</section>
    <section class="content" style="height: 573px" data-n="鬼畜">鬼畜板块</section>
    <section class="content" style="height: 789px" data-n="动漫">动漫板块</section>
    <script>
      // 获取元素
      var list = document.getElementById('list');
      // 利用属性选择器，点击哪个li（事件委托）就根据属性选择器的值找到对应属性的scrollTop
      list.addEventListener('click', function (e) {
        if ((e.target.tagName = 'LI')) {
          // 获取点击的属性名
          var floorName = e.target.getAttribute('data-n');
          // 找到自定义属性名一致的板块，并得到offsetTop属性
          var offsetTop = document.querySelector('.content[data-n=' + floorName + ']').offsetTop;
          // 设置卷动的距离为offsetTop
          document.documentElement.scrollTop = offsetTop;
        }
      });

      // 滚动到某个板块的范围内，nav高亮，添加类名current
      var parts = document.querySelectorAll('.content');
      var partsArr = [];
      var floor = -1;
      var lis = document.querySelectorAll('#list li');
      // 获取所有板块的位置，并将位置压入数组
      for (var i = 0; i < parts.length; i++) {
        partsArr.push(parts[i].offsetTop);
      }
      // 给数组后面推入无穷大
      partsArr.push(Infinity);
      // 监听滚动事件
      window.addEventListener('scroll', function () {
        // 如果当前卷动的位置在数组的某项和下一项之间，表示到达该项的索引层
        var scrollTop = window.scrollY || document.documentElement.scrollTop;
        scrollTop = Math.ceil(scrollTop);
        for (var i = 0; i < partsArr.length; i++) {
          // 当到最后一项时，由于没有下一项了，所以需要先给数组后面推入无穷大
          if (scrollTop >= partsArr[i] && scrollTop < partsArr[i + 1]) {
            // 设置节流
            if (floor !== i) {
              // 将楼层数设置为i
              floor = i;
              // 设置li高亮，排他思想
              for (var j = 0; j < lis.length; j++) {
                if (j == i) {
                  // 高亮
                  lis[j].classList.add('current');
                } else {
                  // 其他的需要去掉类名current
                  lis[j].classList.remove('current');
                }
              }
            }
          }
        }
      });
    </script>
  </body>
</html>