DOM- 网页特效

1.滚动事件与加载事件

① 滚动事件

当页面进行滚动时触发的事件

》很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
事件名：scroll

返回顶部案列：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body {
        height: 8000px;
        background-image: linear-gradient(red, blue);
        
      }

      a {
        color: #fff;
      }

      .actGotop {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 150px;
        height: 195px;
        display: none;
        z-index: 100;
      }

      .actGotop a,
      .actGotop a:link {
        width: 150px;
        height: 195px;
        display: inline-block;
        background: url(images/gotop.png) no-repeat;
        outline: none;
      }

      .actGotop a:hover {
        width: 150px;
        height: 195px;
        background: url(images/gotop.gif) no-repeat;
        outline: none;
      }
    </style>
  </head>

  <body>
    <!-- 返回顶部小火箭 -->
    <div class="actGotop">
      <a href="javascript:;" title="Top"></a>
    </div>

    <!-- 需求：
    1.滚动出屏幕的距离超过1000的时候，出现小火箭
    2.单击小火箭能够返回到顶部 -->

    <script>
      const actGotop = document.querySelector('.actGotop')
      const a = document.querySelector('a')
      

      window.addEventListener('scroll', function () {
        const scrollTop = document.documentElement.scrollTop;

        if (scrollTop > 1000) {
          // 显示火箭
          actGotop.style.display = 'block';
        } else {
          // 隐藏
          actGotop.style.display = 'none';
        }
      })

      actGotop.addEventListener('click', function () {
          
         let timeId = setInterval(function () {
          document.documentElement.scrollTop -= 50
          if (document.documentElement.scrollTop === 0) {
            clearInterval(timeId)
          }
         }, 10)
      })
    </script>
  </body>
</html>

② 加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
为什么要学？

》有些时候需要等页面资源全部处理完了做一些事情

》老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

》事件名：load

》监听页面所有资源加载完毕：给 window 添加 load 事件

2.元素大小和位置

① scroll家族

使用场景：让某些元素显示隐藏，可以使用scroll 来检测页面滚动的距离

获取宽高：

》获取元素的内容总宽高（不包含滚动条）返回值不带单位

》scrollWidth和scrollHeight

获取位置:

》获取元素内容往左、往上滚出去看不到的距离

》scrollLeft和scrollTop

》这两个属性是可以修改的

<script>
div.addEventListener('scroll', function () {
        // console.log(this.scrollTop);// 获取当前容器的滚动距离
        console.log(this.scrollLeft); // 获取当前容器的滚动距离
      });

    </script>

开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

② offset家族

获取宽高：

》获取元素的自身宽高、包含元素自身设置的宽高、padding、border

》offsetWidth和offsetHeight
获取位置：

》获取元素距离自己定位父级元素的左、上距离

》offsetLeft和offsetTop 注意是只读属性

③ client家族

获取宽高：

》获取元素的可见部分宽高（不包含边框，滚动条等）

》clientWidth和clientHeight
获取位置：

》获取左边框和上边框宽度

》clientLeft和clientTop 注意是只读属性

总结：

offset家族

》获取元素自身大小：包括自身设置的宽高、padding、border

》获取元素距离定位父级的左和上距离只读属性
client家族

》获取元素可见区域的大小

》获取元素左、上边框距离只读属性
scroll家族

》获取元素内容的总大小

》获取元素向左向上滚出去看不见的距离可读写属性

Window对象

①. BOM（浏览器对象模型）

BOM(Browser Object Model ) 是浏览器对象模型
window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）
document 是实现 DOM 的基础，它其实是依附于 window 的属性。
注：依附于 window 对象的所有属性和方法，使用时可以省略 window

②. 定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

语法：

<!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>
        .box {
            width: 300px;
            height: 300px;
            background-color: aqua;
            text-align: center;
            line-height: 300px;

            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="box">男人发量惊人怎么办。。。</div>

    <script>
        //  setTimeout(回调函数， 等待的毫秒数)
        
        
        setTimeout(function () {
 document.querySelector('.box').style.display = 'none'
        },5000)
        //setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

        /* let timer = setTimeout(回调函数, 等待的毫秒数)
        clearTimeout(timer) */
    </script>
</body>
</html>

③. 执行机制

JS 是单线程

JavaScript 语言的一大特点就是 单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

同步和异步

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

他们的本质区别：这条流水线上各个流程的执行顺序不同。

④.location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
常用属性和方法：

》href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

》search 属性获取地址中携带的参数，符号？后面部分

》hash 属性获取地址中的啥希值，符号 # 后面部分

》reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

常用属性和方法：

》href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

<script>
    
      // 5 search 后一个阶段就会用到它 了  获取 url上 ？ 后面一串字符  /17-location.html?a=1&b=2
      // 6 hash 学习到了vue阶段就会用到了 获取 # 后面一串字符 /17-location.html#/index  #/index

      const button = document.querySelector('button');
      button.addEventListener('click', function () {
        // location.href="http://www.baidu.com";

        // console.log(location.href);// http://127.0.0.1:5500/17-location.html

        // 刷新功能
        // location.href = location.href; // 刷新功能

        // reload实现刷新
        // location.reload(true);// true 强制刷新！ 
        console.log(location.hash);
      });

      setTimeout(function () {
        // location.href="http://www.baidu.com";
      }, 5000);
    </script>

![](web Api-day05.assets/1649944483343.png)

》location.href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

》search 属性获取地址中携带的参数，符号？后面部分

》hash 属性获取地址中的啥希值，符号 # 后面部分

》reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

⑤.navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息