跳至主要內容

BOM

Mr.Chen前端基石JS基础BOM大约 4 分钟约 1258 字

简介

BOM（ Browser Object Model，浏览器对象模型）是 Js 与浏览器窗口交互的接口

window 对象

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

在有标签页功能的浏览器中，每个标签都拥有自己的 window 对象；也就是说，同一个窗口的标签页之间不会共享一个 window 对象

全局变量是 window 的属性

全局变量window
全局变量window

这就意味着，多个 js 文件之间是共享全局作用域的，即 s 文件没有作用域

内置函数普遍是 window 的方法

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

窗口尺寸相关属性

窗口尺寸相关属性
窗口尺寸相关属性

document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如 HTML 文档的 html 元素）。

resize 事件

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

已卷动高度

  • window.scrollY 属性表示在垂直方向已滚动的像素值
已卷动高度
已卷动高度
  • document.documentElement.scrollTop 属性也表示窗口卷动高度
var scrollTop = window.scrollY || document.documentElement.scrollTop
// 浏览器兼容性考虑

document.documentElement.scrollTop不是只读的，而 window.scrollY 是只读的

scroll 事件

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

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

Navigator对象
Navigator对象

识别用户浏览器品牌

识别用户浏览器品牌通常使用 naviator.userAgent 属性

识别用户浏览器品牌
识别用户浏览器品牌

History 对象

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

模拟浏览器回退按钮

history.back() //等同于浏览器的后退按钮
history.go(-1) //等同于back()

Location 对象

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

Location对象
Location对象

重新加载当前页面

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

window.location.reload(true)

GET 请求查询参数

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

get请求参数
get请求参数

BOM 特效

返回顶部

固定定位 定时器

var box = document.getElementById('box')
var timer
box.onclick = function () {
  clearInterval(timer)
  timer = setInterval(function () {
    document.documentElement.scrollTop -= 100
    if (document.documentElement.scrollTop <= 0) {
      clearInterval(timer)
    }
  }, 50)
}

楼层导航

  • DOM 元素都有offsetTop属性(HTMLElement.offsetTop)，表示此元素到定位祖先元素的垂直距离
  • 定位祖先元素：在祖先中，离自己最近的且拥有定位属性的元素，若祖先都不符合条件，offsetParent 为body
  • 利用 scrollTo 实现 smooth(平滑滚动)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
      }
      #list {
        position: fixed;
        right: 50px;
        top: 50%;
        transform: translateY(-50%);
        list-style: none;
      }
      li {
        background-color: #fd9c4c88;
        height: 40px;
        line-height: 40px;
        text-align: center;
        width: 100px;
        color: #fff;
        border-radius: 20px;
        margin-bottom: 10px;
      }
      .contentPart {
        width: 100%;
        height: 100%;
        font-size: 400px;
        text-align: center;
        line-height: 1024px;
        margin-bottom: 1px;
        background-color: black;
        color: #fff;
      }
      /* 自定义属性修改css样式 */
      /* .contentPart[data-n='one']{
           background-image:url(./1.jpg) ;
           background-size:cover;
        }
        .contentPart[data-n='two']{
           background-image:url(./2.jpg) ;
           background-size:cover;
        }
        .contentPart[data-n='three']{
           background-image:url(./3.jpg) ;
           background-size:cover;
        }
        .contentPart[data-n='four']{
           background-image:url(./4.jpg) ;
           background-size:cover;
        } */
      li.current {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <ul id="list">
      <li data-n="one" class="current">one</li>
      <li data-n="two">two</li>
      <li data-n="three">three</li>
      <li data-n="four">four</li>
    </ul>

    <section class="contentPart" data-n="one">1</section>
    <section class="contentPart" data-n="two">2</section>
    <section class="contentPart" data-n="three">3</section>
    <section class="contentPart" data-n="four">4</section>

    <script>
      // 楼层导航逻辑
      var list = document.getElementById('list')
      var lis = document.querySelectorAll('#list li')
      var contentParts = document.querySelectorAll('.contentPart')
      list.onclick = function (e) {
        if (e.target.tagName.toLowerCase() == 'li') {
          var n = e.target.getAttribute('data-n')
          var contentPart = document.querySelector(
            '.contentPart[data-n=' + n + ']'
          )
          // 利用scrollTo实现smooth(平滑滚动)
          window.scrollTo({
            top: contentPart.offsetTop,
            behavior: 'smooth'
          })
        }
      }
      // 导航切换
      var offsetTopArr = []
      var nowFloor = 0
      for (var i = 0; i < contentParts.length; i++) {
        offsetTopArr.push(contentParts[i].offsetTop)
      }
      offsetTopArr.push(Infinity)
      console.log(offsetTopArr)
      window.onscroll = function () {
        var s = document.documentElement.scrollTop
        for (var i = 0; i < offsetTopArr.length; i++) {
          if (s >= offsetTopArr[i] && s < offsetTopArr[i + 1]) {
            break
          }
        }
        if (i != nowFloor) {
          nowFloor = i
          for (var j = 0; j < lis.length; j++) {
            if (j == i) {
              lis[j].className = 'current'
            } else {
              lis[j].className = 'none'
            }
          }
        }
      }
    </script>
  </body>
</html>
上次编辑于:
Copyright © 2018-present Mr.Chen