一、节点类型

01-DOM节点

DOM节点：DOM树里每一个内容都称之为节点
节点类型
- 元素节点
  - 所有的标签比如 body、 div
  - html 是根节点
- 属性节点
  - 所有的属性比如 href
- 文本节点
  - 所有的文本
- 其他

02-查找节点-子找父

父节点查找：
- parentNode 属性
- 返回最近一级的父节点找不到返回为null
语法
- 子元素.parentNode

<body>
    <div class="box">
      <p>我是p元素</p>
    </div>

    <script>
      let p = document.querySelector('p')
      let box = document.querySelector('.box')
      // parentNode：获取当前节点的最近的上一级--父节点
      console.log(p.parentNode)
      console.log(box.parentNode)
      // document.body --- body
      console.log(document.body.parentNode)
      // // document.documentElement -- html
      console.log(document.documentElement.parentNode)
    </script>
  </body>
复制代码

03-关闭二维码--一个

<style>
      .erweima {
        position: relative;

        width: 160px;
        height: 160px;

        margin: 100px auto;
      }

      span {
        position: absolute;
        left: -20px;
        top: 0;

        display: block;
        width: 20px;
        text-align: center;
        border: 1px solid #ccc;

        /* 鼠标效果 */
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="erweima">
      <img src="./images/code.png" alt="" />
      <span> X1 </span>
    </div>
    <script>
      let span = document.querySelector('span')
      span.addEventListener('click', function() {
        // 找到父容器进行处理
        span.parentNode.style.display = 'none'
      })
    </script>
  </body>
复制代码

04-查找节点-父找子

子节点查找：
- childNodes
  - 获得所有子节点、包括文本节点（空格、换行）、注释节点等
- children （重点）
  - 仅获得所有元素节点
  - 返回的还是一个伪数组
- 语法：父元素.children

<body>
    <div class="box">
      <!-- 这是注释 -->
      <p>aaaa</p>
      <span>span</span>
      这是字
    </div>

    <script>
      let box = document.querySelector('.box')
      console.log(box.childNodes)
      console.log(box.children)
    </script>
  </body>
复制代码

04-关闭二维码--多个

<style>
      .erweima {
        position: relative;

        width: 160px;
        height: 160px;

        margin: 100px auto;
      }

      span {
        position: absolute;
        left: -20px;
        top: 0;

        display: block;
        width: 20px;
        text-align: center;
        border: 1px solid #ccc;

        /* 鼠标效果 */
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="erweima">
      <img src="./images/code.png" alt="" />
      <span> X1 </span>
    </div>
    <div class="erweima">
      <img src="./images/code.png" alt="" />
      <span> X2 </span>
    </div>
    <div class="erweima">
      <img src="./images/code.png" alt="" />
      <span> X3 </span>
    </div>
    <div class="erweima">
      <img src="./images/code.png" alt="" />
      <span> X4 </span>
    </div>
    <div class="erweima">
      <img src="./images/code.png" alt="" />
      <span> X5 </span>
    </div>
    <script>
      // 获取所有的关闭按钮
      let spans = document.querySelectorAll('span')
      // 遍历的所有关闭按钮，为其绑定事件
      spans.forEach(function(ele) {
        ele.addEventListener('click', function() {
          // 在事件处理函数中通过parentNode获取父节点进行关闭
          ele.parentNode.style.display = 'none'
        })
      })
    </script>
  </body>
复制代码

05-查找节点-找兄弟

兄弟关系查找：
- 1. 下一个兄弟节点
  - nextElementSibling 属性
- 1. 上一个兄弟节点
  - previousElementSibling 属性

<body>
    <div class="box">
      <p>我是p元素</p>
      <span>我是span</span>
      <h2>我是h2</h2>
    </div>

    <script>
      let span = document.querySelector('span')
      let p = document.querySelector('p')
      let h2 = document.querySelector('h2')

      console.log(h2.nextElementSibling)
      console.log(h2.previousElementSibling)
    </script>
  </body>
复制代码

06-创建元素

1.创建节点
- 即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
- 创建元素节点方法
- 语法：document.createElement('标签名')
2.追加节点
- 要想在界面看到，还得插入到某个父元素中
- 插入到父元素的最后一个子元素:
- 语法：父元素.appendChild(要插入的元素)
- 插入到父元素中某个子元素的前面
- 语法：父元素.insertBefore(要插入的元素，在哪个元素的前面)

<style>
      .box {
        width: 500px;
        height: 500px;
        border: 1px solid red;
      }
      span {
        display: block;
      }
    </style>
  </head>
  <body>
    <button>来一个p元素</button>
    <div class="box">
      <span>这是原始就有的1</span>
      <span>这是原始就有的2</span>
      <span>这是原始就有的3</span>
    </div>

    <script>
      let btn = document.querySelector('button')
      let box = document.querySelector('.box')

      btn.addEventListener('click', function() {
        // 创建一个新的p元素
        let newP = document.createElement('p')
        newP.innerText = '以前怎么写现在也怎么写'
        newP.style.color = 'red'
        console.log(newP)

        // 将创建的元素追加到box里面的最后 -- 父子关系
        // 父容器.appendChild(新创建的元素)
        box.appendChild(newP)
        // 将创建的元素放到box的某个子元素的前面:父容器.insertBefore(需要添加的子元素，参照元素) -- 父子关系
        // 如果没有找到参照位置，则默认功能为appendChild
        // 但是：第二个参数不能省略
        box.insertBefore(newP.cloneNode(true), box.children[0])
      })
    </script>
  </body>
复制代码

07-元素操作

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      select {
        width: 200px;
        background-color: teal;
        height: 200px;
        font-size: 20px;
      }

      .btn-box {
        width: 30px;
        display: inline-block;
        vertical-align: top;
      }
    </style>
  </head>

  <body>
    <h1>城市选择：</h1>
    <!-- multiple:选择多项 -->
    <select id="src-city" name="src-city" multiple>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">深圳</option>
      <option value="4">广州</option>
      <option value="5">西红柿</option>
    </select>
    <div class="btn-box">
      <!--实体字符-->
      <button id="btn1">&gt;&gt;</button>
      <button id="btn2">&lt;&lt;</button>
      <button id="btn3">&gt;</button>
      <button id="btn4">&lt;</button>
    </div>
    <!-- multiple 支持多选 -->
    <select id="tar-city" name="tar-city" multiple></select>

    <script>
      // webapi的案例步骤： 取元素  绑事件  做操作
      let srcCity = document.querySelector('#src-city')
      let tarCity = document.querySelector('#tar-city')
      let btn1 = document.querySelector('#btn1')
      let btn2 = document.querySelector('#btn2')
      let btn3 = document.querySelector('#btn3')
      let btn4 = document.querySelector('#btn4')

    </script>
  </body>
</html>
复制代码

08-复制节点

<body>
    <button>复制节点并添加到另外一个div中</button>

    <div class="first">
      <p><span>我是first的p元素</span></p>
    </div>
    <div class="second"></div>

    <script>
      let btn = document.querySelector('button')
      let first = document.querySelector('.first')
      let second = document.querySelector('.second')
      let p = document.querySelector('p')

      btn.addEventListener('click', function() {
        // 移动元素： 剪切 + 粘贴
        // second.appendChild(p)
        // 实现 复制 + 粘贴 的效果
        // cloneNode() | cloneNode(false):浅拷贝，只拷贝结构
        // second.appendChild(p.cloneNode())

        // cloneNode(true):深拷贝，拷贝结构和html内容
        second.appendChild(p.cloneNode(true))
      })
    </script>
  </body>
复制代码

09-删除节点

 <body>
    <table border="1" width="400">
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>20</td>
          <td>
            <button>删除1</button>
          </td>
        </tr>
        <tr>
          <td>2</td>
          <td>李四</td>
          <td>30</td>
          <td>
            <button>删除2</button>
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td>王五</td>
          <td>40</td>
          <td>
            <button>删除3</button>
          </td>
        </tr>
      </tbody>
    </table>
    <script>
      let dels = document.querySelectorAll('button')
      let tbody = document.querySelector('tbody')

      dels.forEach(function(ele) {
        ele.addEventListener('click', function() {
          // console.log(ele.parentNode.parentNode)

          // 子元素：tr
          // 父容器：tbody
          // 父容器.removeChild(子元素)
          // tbody.removeChild(ele.parentNode.parentNode)
          ele.parentNode.parentNode.remove()
        })
      })
    </script>
复制代码

二、时间对象

10-实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间
- 获得当前时间
  - let date = new Date()
- 获得指定时间
  - let date = new Date('1949-10-01')

<body>
    <h1></h1>
    <button>获取时间</button>
    <input type="datetime-local" />
    <script>
      // let str = 'aaa' // 语法糖
      // let str = new String('aaa')
      // console.log(str)
      // let arr = []
      // let arr = new Array()
      // let obj = {}
      // let obj = new Object()

      // 获取当前系统时间： 年月日 时分秒
      let date = new Date()
      console.log(date)

      // 获取指定时间的日期对象
      // let date = '2000-1-1'
      let btn = document.querySelector('button')
      let input = document.querySelector('input')
      btn.addEventListener('click', function() {
        console.log(input.value, typeof input.value)
        console.log(new Date(input.value), typeof new Date(input.value))
      })
    </script>
  </body>
复制代码

11-时间对象-api

<body>
    <h1></h1>
    <script>
      let h1 = document.querySelector('h1')

      setInterval(function() {
        let date = new Date()
        // console.log(date)
        // 获取年
        let year = date.getFullYear() // 2022 :四位年份
        // console.log(year)
        let month = date.getMonth() + 1 // 获取月，从0 -11
        // console.log(month)
        let day = date.getDate() // 一个月中的第几天
        // 时
        let hour = date.getHours() // 0-23
        // 分
        let minute = date.getMinutes()
        minute = minute < 10 ? '0' + minute : minute
        // 秒
        let second = date.getSeconds()
        second = second < 10 ? '0' + second : second

        h1.innerHTML = `${year}-${month}-${day} ${hour}:${minute}:${second}`
      }, 1000)
    </script>
  </body>
复制代码

12-时间戳

什么是时间戳
- 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
三种方式获取时间戳
- 1. 使用 getTime() 方法--------需要创建对象可以指定任意的时间
- 1. 简写 +new Date()--------需要创建对象可以指定任意的时间
- 1. 使用 Date.now()--------不需要创建对象但是不能指定任意的时间

<script>
      // console.log(new Date('2022-6-23 18:30') - new Date('2022-6-23 15:42'))
      
      let date = new Date()
      console.log(date.getTime())

      console.log(+new Date('1971-1-1'))

      console.log(Date.now())
</script>
复制代码

13-下班倒计时(案例)

<!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>
      .countdown {
        width: 240px;
        height: 305px;
        text-align: center;
        line-height: 1;
        color: #fff;
        background-color: brown;
        /* background-size: 240px; */
        /* float: left; */
        overflow: hidden;
      }

      .countdown .next {
        font-size: 16px;
        margin: 25px 0 14px;
      }

      .countdown .title {
        font-size: 33px;
      }

      .countdown .tips {
        margin-top: 80px;
        font-size: 23px;
      }

      .countdown small {
        font-size: 17px;
      }

      .countdown .clock {
        width: 142px;
        margin: 18px auto 0;
        overflow: hidden;
      }

      .countdown .clock span,
      .countdown .clock i {
        display: block;
        text-align: center;
        line-height: 34px;
        font-size: 23px;
        float: left;
      }

      .countdown .clock span {
        width: 34px;
        height: 34px;
        border-radius: 2px;
        background-color: #303430;
      }

      .countdown .clock i {
        width: 20px;
        font-style: normal;
      }
    </style>
  </head>

  <body>
    <div class="countdown">
      <p class="next">今天是2022年3月28日</p>
      <p class="title">下班倒计时</p>
      <p class="clock">
        <span id="hour">00</span>
        <i>:</i>
        <span id="minutes">00</span>
        <i>:</i>
        <span id="scond">00</span>
      </p>
      <p class="tips">
        现在是18:30:00
      </p>
    </div>

    <script>
      let hourEle = document.querySelector('#hour')
      let minutesEle = document.querySelector('#minutes')
      let scondEle = document.querySelector('#scond')
      // 再获取目标时间的时间戳
      let end = +new Date('2022-6-23 18:30:00')

      setInterval(function() {
        // 先获取当前日期的时间戳
        let start = Date.now()
        // 获取两个时间戳的差异
        let offset = parseInt((end - start) / 1000)
        console.log(offset)

        // 进行换算
        let hour = parseInt(offset / 3600)
        let minute = parseInt((offset % 3600) / 60)
        let second = offset % 60

        hourEle.innerHTML = hour < 10 ? '0' + hour : hour
        minutesEle.innerHTML = minute < 10 ? '0' + minute : minute
        scondEle.innerHTML = second < 10 ? '0' + second : second
      }, 1000)
    </script>
  </body>
</html>

Web APIs-节点操作

一、节点类型

01-DOM节点

02-查找节点-子找父

03-关闭二维码--一个

04-查找节点-父找子

04-关闭二维码--多个

05-查找节点-找兄弟

06-创建元素

07-元素操作

08-复制节点

09-删除节点

二、时间对象

10-实例化

11-时间对象-api

12-时间戳

13-下班倒计时(案例)