标签：web const APIs 元素前端开发 60 ul document 节点

Web APIs - 第4天

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

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

1 日期对象

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

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

1.1 实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化

  // 1. 实例化
  // const date = new Date(); // 系统默认时间
  const date = new Date('2020-05-01') // 指定时间
  // date 变量即所谓的时间对象

  console.log(typeof date)

1.2 方法

  // 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

div.innerHTML = date.toLocaleDateString()  // 2022/4/1
div.innerHTML = date.toLocaleTimeString()  // 09:41:21
div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21



<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    // 得到日期对象
    const date = new Date()
    div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21
    setInterval(function () {
      const date = new Date()
      div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21

    }, 1000)
    // div.innerHTML = date.toLocaleDateString()  // 2022/4/1
    // div.innerHTML = date.toLocaleTimeString()  // 09:41:21
  </script>
</body>

</html>

1.3 时间戳

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

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

    // 1. 实例化
  const date = new Date()
  // 2. 获取时间戳
  console.log(date.getTime())
// 还有一种获取时间戳的方法
  console.log(+new Date())
  // 还有一种获取时间戳的方法
// 但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳
  console.log(Date.now())



//通过时间戳得到是毫秒，需要转换为秒在计算


const now = +new Date()
// 2. 得到将来的时间戳
const last = +new Date('2023-2-16 18:30:00')
// console.log(now, last);
// 3. 得到剩余的时间戳  记得转换为秒
const count = (last - now) / 1000
// console.log(count);

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

      // d = parseInt(总秒数/ 60/60 /24); // 计算天数
      // s = parseInt(总秒数 / 60 / 60 % 24) // 计算小时
      // m = parseInt(总秒数 / 60 % 60); // 计算分数
      // s = parseInt(总秒数 % 60); // 计算当前秒数

毕业倒计时效果

<body>
  <div class="countdown">
    <p class="next">今天是2222年2月22日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="scond">20</span>
    </p>
    <p class="tips">18:30:00下课</p>
  </div>
  <script>
    
    // 函数封装 getCountTime
    function getCountTime() {
      // 1. 得到当前的时间戳
      const now = +new Date()
      // 2. 得到将来的时间戳
      const last = +new Date('2023-2-16 18:30:00')
      // console.log(now, last);
      // 3. 得到剩余的时间戳  记得转换为秒
      const count = (last - now) / 1000
      // console.log(count);

      // 4. 转换为时分秒 
      // d = parseInt(总秒数/ 60/60 /24); // 计算天数
      // s = parseInt(总秒数 / 60 / 60 % 24) // 计算小时
      // m = parseInt(总秒数 / 60 % 60); // 计算分数
      // s = parseInt(总秒数 % 60); // 计算当前秒数
      // let d = parseInt(count / 60 / 60 / 24); // 计算天数
      let h = parseInt(count / 60 / 60 % 24) // 计算小时
      h = h < 10 ? '0' + h : h
      let m = parseInt(count / 60 % 60); // 计算分数
      m = m < 10 ? '0' + m : m
      let s = parseInt(count % 60); // 计算当前秒数
      s = s < 10 ? '0' + s : s
      // console.log(h, m, s);

      // 5. 把时分秒写到对应的盒子里面
      const hour = document.querySelector('#hour')
      const minutes = document.querySelector('#minutes')
      const scond = document.querySelector('#scond')
      hour.innerHTML = h
      minutes.innerHTML = m
      scond.innerHTML = s
    }

    // 先调用一次
    getCountTime()

    //开启定时器
    setInterval(getCountTime, 1000)
  </script>
</body>

</html>

2 DOM 节点

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

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

DOM节点

DOM树里每一个内容都称之为节点

节点类型

元素节点( 可以更好的让我们理清标签元素之间的关系)

所有的标签比如 body、 div
html 是根节点

属性节点

所有的属性比如 href

文本节点

所有的文本

其他

2.1 查找节点

节点关系：针对的找亲戚返回的都是对象

父节点
子节点
兄弟节点

2.1.1 父节点查找：

parentNode 属性
```
子元素.parentNode 
```
返回最近一级的父节点找不到返回为null

<body>
  <div class="yeye">
    <div class="dad">
      <div class="baby">x</div>
    </div>
  </div>
  <script>
    const baby = document.querySelector('.baby')
    console.log(baby)  // 返回dom对象
    console.log(baby.parentNode)  // 返回dom对象
    console.log(baby.parentNode.parentNode)  // 返回dom对象
  </script>
</body>

2.1.2 子节点查找：

childNodes

获得所有子节点、包括文本节点（空格、换行）、注释节点等

children 属性（重点）

仅获得所有元素节点(标签)（包含里面的所有内容）
返回的还是一个伪数组HTMLCollection(5)

父元素.children

2.1.3 兄弟关系查找：

下一个兄弟节点

nextElementSibling 属性

上一个兄弟节点

previousElementSibling 属性

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    // const ul = document.querySelector('ul')  // ul
    // console.log(ul.children)  // 得到伪数组  选择的是 亲儿子 
    const li2 = document.querySelector('ul li:nth-child(2)')
    console.log(li2.previousElementSibling)  // 上一个兄弟
    console.log(li2.nextElementSibling)  // 下一个兄弟
  </script>
</body>

2.2 增加节点

2.2.1 创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

创建元素节点方法：

const div = document.createElement('div')
console.log(div);

2.2.2 追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素:

父元素.appendChild(li)

插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素, 在哪个元素前面)

<body>
  <ul>
    <li>老大</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    const li = document.createElement('li')
    li.innerHTML = 'lalal'
    // ul.appendChild(li)
    ul.insertBefore(li, ul.children[0])
  </script>
</body>

2.2.3 克隆节点

特殊情况下，我们新增节点，按照如下操作：

复制一个原有的节点
把复制的节点放入到指定的元素内部

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

cloneNode 会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true（深克隆），则代表克隆时会包含后代节点一起克隆
若为false（浅克隆），则代表克隆时不包含后代节点（只包含标签，不包含内容等）
默认为false

2.3 插入节点

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

如下代码演示：

<body>
  <h3>插入节点</h3>
  <p>在现有 dom 结构基础上插入新的元素节点</p>
  <hr>
  <!-- 普通盒子 -->
  <div class="box"></div>
  <!-- 点击按钮向 box 盒子插入节点 -->
  <button class="btn">插入节点</button>
  <script>
    // 点击按钮，在网页中插入节点
    const btn = document.querySelector('.btn')
    btn.addEventListener('click', function () {
      // 1. 获得一个 DOM 元素节点
      const p = document.createElement('p')
      p.innerText = '创建的新的p标签'
      p.className = 'info'
      
      // 复制原有的 DOM 节点
      const p2 = document.querySelector('p').cloneNode(true)
      p2.style.color = 'red'

      // 2. 插入盒子 box 盒子
      document.querySelector('.box').appendChild(p)
      document.querySelector('.box').appendChild(p2)
    })
  </script>
</body>

结论：

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

再来看另一种情形的代码演示：

<body>
  <h3>插入节点</h3>
  <p>在现有 dom 结构基础上插入新的元素节点</p>
	<hr>
  <button class="btn1">在任意节点前插入</button>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <script>
    // 点击按钮，在已有 DOM 中插入新节点
    const btn1 = document.querySelector('.btn1')
    btn1.addEventListener('click', function () {

      // 第 2 个 li 元素
      const relative = document.querySelector('li:nth-child(2)')

      // 1. 动态创建新的节点
      const li1 = document.createElement('li')
      li1.style.color = 'red'
      li1.innerText = 'Web APIs'

      // 复制现有的节点
      const li2 = document.querySelector('li:first-child').cloneNode(true)
      li2.style.color = 'blue'

      // 2. 在 relative 节点前插入
      document.querySelector('ul').insertBefore(li1, relative)
      document.querySelector('ul').insertBefore(li2, relative)
    })
  </script>
</body>

结论：

createElement 动态创建任意 DOM 节点
cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
insertBefore 在父节点中任意子节点之前插入新节点

2.4 删除节点

若一个节点在页面中已不需要时，可以删除它

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

语法

父元素.removeChlid(子元素)

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

<body>
  <div class="box">123</div>
  <ul>
    <li>没用了</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    // 删除节点  父元素.removeChlid(子元素)
    ul.removeChild(ul.children[0])
  </script>
</body>

<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(ul.children[0])
      ul.removeChild(lis[0])
    })
  </script>
</body>

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

2.4.1 兄弟关系

<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 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。

3 M端事件

移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。

触屏事件 touch（也称触摸事件），Android 和 IOS 都有。

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

常见的触屏事件如下：

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

标签：web,const,APIs,元素,前端开发,60,ul,document,节点
From： https://www.cnblogs.com/LuckFairy/p/17129743.html

【博学谷学习记录】超强总结，用心分享 | 前端开发 web APIs(四)