开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第8天，点击查看活动详情”

Web APIs - 第4天

进一步学习 DOM 相关知识，实现可交互的网页特效

能够插入、删除和替换元素节点
能够依据元素节点关系查找节点

日期对象

掌握 Date 日期对象的使用，动态获取当前计算机的时间。

ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。

实例化

<script>
  // 1.得到当前时间
        const date = new Date()
        console.log(date)  //Sat Feb 25 2023 00:08:10
    
  // 2.得到指定时间
        const date1 = new Date('2022-5-1 08:30:00')
        console.log(date1)  //Sun May 01 2022 08:30:00
</script>

方法

  // 1. 实例化
 const date = new Date();
 // 2. 调用时间对象方法
 // 通过方法分别获取年、月、日，时、分、秒
 const year = date.getFullYear(); // 四位年份
 const month = date.getMonth(); // 0 ~ 11

日期对象方法

目标：能够使用日期对象中的方法写出常见日期
使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为 0 ~ 11
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为 0 ~ 6
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒	取值为 0 ~ 59

时间戳

时间戳是指1970年01月01日00时00分00秒起至现在的总秒数或毫秒数，它是一种特殊的计量时间的方式。

注：ECMAScript 中时间戳是以毫秒计的。

<script>
//【1】getTime()
     const date = new Date()
     console.log(date.getTime())

// 【2】+new Date() '+'把字符型转换成数字型
     console.log(+new Date()) //1677307126751

// 【3】Date.now() 局限是只能得到当前的时间戳，不能得到【规定时间】的时间戳
    console.log(Date.now())

    console.log(+new Date('2023-4-1 18:30:00')) //1680345000000
   </script>

获取时间戳的方法，分别为 getTime 和 Date.now 和 +new Date()

案例

需求：计算到下课还有多少时间

分析：

用将来时间减去现在时间就是剩余的时间
核心：使用将来的时间戳减去现在的时间戳
把剩余的时间转换为天时分秒

DOM 节点

掌握元素节点创建、复制、插入、删除等操作的方法，能够依据元素节点的结构关系查找节点

回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等。

DOM树.png

插入节点

在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的 DOM 节点，其次在哪个位置插入这个节点。

如下代码演示：

<body>
  <ul>
    <li>我是老大</li>
    <li>我是老二</li>
    <li>我是老三</li>
  </ul>
  
  <script>
    // 【创建节点】
    /* const div = document.createElement('div')
    console.log(div) */

    //1 【追加节点】
    // 追加节点，作为【最后一个子元素】
    const ul = document.querySelector('ul')
    const li = document.createElement('li')
    li.innerHTML = '我是li'
    ul.appendChild(li)
    
    // 插入到父元素中某个子元素的【前面】
    ul.insertBefore(li,ul.children[0])
    
   /* 2 克隆节点  元素.cloneNode(true)
    若为true，则代表克隆时会包含后代节点一起克隆
    若为false，则代表克隆时不包含后代节点 */
    
    const li1 = ul.children[0].cloneNode(true)
    console.log(li1)
    // 2. 追加
     ul.appendChild(ul.children[0].cloneNode(true))
  </script>
</body>

结论：

createElement 动态创建任意 DOM 节点
cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
appendChild 在末尾（结束标签前）插入节点
insertBefore插入到父元素中某个子元素的前面

案例：栏目渲染

目标.png

删除节点

删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。

<body>
  <!-- 点击按钮删除节点 -->
  <button>删除节点</button>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Web APIs</li>
  </ul>

  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      // 获取 ul 父节点
      let ul = document.querySelector('ul')
      // 待删除的子节点
      let lis = document.querySelectorAll('li')

      // 删除节点
      ul.removeChild(lis[0])
    })
  </script>
</body>

结论：removeChild 删除节点时一定是由父子关系。

查找节点

DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，不仅如此，我们可以依据节点之间的关系查找节点。

父子关系

<body>
  <button class="btn1">所有的子节点</button>
  <!-- 获取 ul 的子节点 -->
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript 基础</li>
    <li>Web APIs</li>
  </ul>
  <script>
    const btn1 = document.querySelector('.btn1')
    btn1.addEventListener('click', function () {
      // 父节点
      const ul = document.querySelector('ul')

      // 所有的子节点
      console.log(ul.childNodes)
      // 只包含元素子节点
      console.log(ul.children)
    })
  </script>
</body>

结论：

childNodes 获取全部的子节点，回车换行会被认为是空白文本节点
children 只获取元素类型节点

<body>
  <table>
    <tr>
      <td width="60">序号</td>
      <td>课程名</td>
      <td>难度</td>
      <td width="80">操作</td>
    </tr>
    <tr>
      <td>1</td>
      <td><span>HTML</span></td>
      <td>初级</td>
      <td><button>变色</button></td>
    </tr>
  </table>
  <script>
    // 获取所有 button 节点，并添加事件监听
    const buttons = document.querySelectorAll('table button')
    for(let i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', function () {
        // console.log(this.parentNode); // 父节点 td
        // console.log(this.parentNode.parentNode); // 爷爷节点 tr
        this.parentNode.parentNode.style.color = 'red'
      })
    }
  </script>
</body>

结论：parentNode 获取父节点，以相对位置查找节点，实际应用中非常灵活。

兄弟关系

<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript 基础</li>
    <li>Web APIs</li>
  </ul>
  <script>
    // 获取所有 li 节点
    const lis = document.querySelectorAll('ul li')

    // 对所有的 li 节点添加事件监听
    for(let i = 0; i < lis.length; i++) {
      lis[i].addEventListener('click', function () {
        // 前一个节点
        console.log(this.previousSibling)
        // 下一下节点
        console.log(this.nextSibling)
      })
    }
  </script>
</body>

结论：

previousSibling 获取前一个节点，以相对位置查找节点，实际应用中非常灵活。
nextSibling 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。

M端

触屏事件 touch（也称触摸事件），Android 和 IOS 都有
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作

触屏touch事件	说明
touchstar	手指戳摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

<body>
  <div></div> //一个可以触摸的DOM块
  <script>
    const div = document.querySelector('div')
    // 1. 触摸
    div.addEventListener('touchstart', function () {
      console.log('开始摸我了')
    })
    // 2. 离开
    div.addEventListener('touchend', function () {
      console.log('离开了')
    })
    // 3. 移动
    div.addEventListener('touchmove', function () {
      console.log('一直摸，移动')
    })
  </script>
</body>

插件

插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果熟悉官网,了解这个插件可以完成什么需求 www.swiper.com.cn/

案例-学生信息表

案例-网页时钟

创建日期对象获取当前时间
多次定时器，重复获取时间，让指针动起来

<body>
 <div class="clock">
    <div class="hh" id="h"></div>
    <div class="mm" id="m"></div>
    <div class="ss" id="s"></div>
  </div>
<script>
    // 查找页面的元素，定时器调用的函数外面，查找一次即可
    let hour = document.getElementById('h');
    let minute = document.getElementById('m');
    let second = document.getElementById('s');
    // 封装时钟效果，定时器定时调用的函数
    function clock() {
      /* 业务1：获取系统时间 */
      let date = new Date();
      // 获取时分秒
      let hh = date.getHours();
      let mm = date.getMinutes();
      let ss = date.getSeconds();
      /* 业务2：时钟动画效果 */
      // 角度换算： 公式复制即可
      //   小时角度公式：小时 * 30 + 分钟 / 60 * 30 
      //   分钟角度公式：分钟* 6 + 秒 / 60 * 6
      //   秒角度公式： 当前秒数 * 6
      hour.style.transform = `rotate(${hh * 30 + mm / 60 * 30}deg)`;
      minute.style.transform = `rotate(${mm * 6 + ss / 60 * 6}deg)`;
      second.style.transform = `rotate(${ss * 6}deg)`;
    }
    // 主动调用一次，页面加载之后就要调用一次
    clock();
    // 通过定时器每隔一秒钟再调用一次。
    setInterval(clock, 1000);
  </script>
 </body>

Web APIs - Dom节点