BOM

Frank
  • 前端基石
  • JS基础
  • BOM
大约 4 分钟约 1262 字...

简介

BOM( Browser Object Model,浏览器对象模型)是 Js 与浏览器窗口交互的接口

window 对象

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

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

全局变量是 window 的属性

全局变量window

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

内置函数普遍是 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对象

识别用户浏览器品牌

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

识别用户浏览器品牌

History 对象

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

模拟浏览器回退按钮

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

Location 对象

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

Location对象

重新加载当前页面

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

window.location.reload(true)

GET 请求查询参数

window.location.search 属性即为当前浏览器的 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>
上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1