day04 操作DOM

最新推荐文章于 2024-09-06 13:29:35 发布

TreeShaking

最新推荐文章于 2024-09-06 13:29:35 发布

阅读量119

点赞数

分类专栏： JavaScript-webAPI 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_62643012/article/details/129973804

版权

JavaScript-webAPI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了WebAPIs中的日期对象使用，包括实例化、方法和时间戳的概念。同时，深入探讨了DOM节点操作，如查找、增加、删除和修改节点，以及父子和兄弟节点的关系。此外，还提到了移动端事件处理和JS框架swiper在移动端开发中的应用。最后，通过一个学生信息表的案例展示了数据操作的技术实现。

摘要由CSDN通过智能技术生成

文章目录

- Web APIs - 第4天

Web APIs - 第4天

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

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

1日期对象

data 数据 date 时间
ECMAScript 中内置了获取系统时间的对象 Date，使用 Date，需要借助 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 月份+1
getDate 获取月份中的每一天，不同月份取值也不相同
getDay 获取星期，取值为 0 ~ 6 星期天0
getHours 获取小时，取值为 0 ~ 23
getMinutes 获取分钟，取值为 0 ~ 59
getSeconds 获取秒，取值为 0 ~ 59

案例
格式化显示时间

实现1 date.toLocal
实现2 分别获取年月日，字符转的拼接

const date = new Date()
  div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21
  div.innerHTML = date.toLocaleDateString()  // 2022/4/1
  div.innerHTML = date.toLocaleTimeString()  // 11:55:12

1.3时间戳

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

注：ECMAScript 中时间戳是以毫秒计的。倒计时==将来时间戳毫秒数- 现在时间戳毫秒数

获取时间戳的方法

getTime 需要new 的实例化可以返回当前和指定未来
+new Date() 推荐不需要实例化前边的加号将串转为数值类型可以返回当前和指定未来
Date.now 不需要实例化只能返回当前的时间

    // 1. 实例化
  const date = new Date()
  // 2. 获取时间戳
  console.log(date.getTime())
// 还有一种获取时间戳的方法
  console.log(+new Date())
  // 还有一种获取时间戳的方法
  console.log(Date.now())

案例
倒计时封装函数:

        function countTime(){
         // 获取未来的时间戳戳
        const feature = +new Date('2023-6-1 08:00:00')
        // 获取现在的时间戳戳
        const now = +new Date()
        console.log(feature ,now);
        // 改事件格式
        const count = (feature - now)/1000
        let d = parseInt(count/  60 / 60 / 24 )
        d = d < 10 ? '0' + d : d
        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)
        // 填内容
        document.querySelector('#day').innerHTML = d
        document.querySelector('#hour').innerHTML = h
        document.querySelector('#minutes').innerHTML = m
       document.querySelector('#scond').innerHTML = s
       
    }

2.DOM 节点操作

DOM树里边的每一个内容都是节点
元素节点 a div html 属性节点 href id class 文本节点其他节点
掌握元素节点创建、复制、插入、删除等操作的方法，能够依据元素节点的结构关系查找节点

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

2.1查找节点

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

2.3.1 父节点查找

console.log(baby)  // 返回dom对象  孩子
console.log(baby.parentNode)  // 返回dom对象   孩子爸爸
console.log(baby.parentNode.parentNode)  // 返回dom对象  孩子爸爸的爸爸

2.3.2 子节点查找

// const ul = document.querySelector('ul')  // ul
console.log(ul.children)  // 得到伪数组  选择的是 亲儿子

2.3.3 兄弟节点查找

const li2 = document.querySelector('ul li:nth-child(2)')
console.log(li2.previousElementSibling)  // 上一个兄弟
console.log(li2.nextElementSibling)  // 下一个兄弟

2.2 增加节点

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

创建节点

document.createElement(‘创建的节点名字’)

插入到父亲节点的最后一个

父元素.appendChild(要插入的元素)

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

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

克隆节点

克隆节点元素.cloneNode(true) 克隆后需要追加位置
(p里边div的克隆出现问题。div改span后解决)
- true ：包含后代节点一起克隆
- false ：克隆不包含后代节点（默认）

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

  // 1.创建节点
  const div = document.createElement('div')
  // 2. 追加节点  作为最后一个子元素
  document.body.appendChild(div)

  // 放在ul 里边的第一个
  ul.insertBefore(li, ul.children[0])

  // 克隆并追加
   ul.appendChild(ul.children[0].cloneNode(true))

案例
重构学成在线项目—使用节点的创建追加
准备一个空ul，创建小li添加，随后渲染小li的内容

2.3删除节点

删除现有的 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 删除节点时一定是由父子关系。

2.4父子关系

<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>
    <tr>
      <td>2</td>
      <td><span>CSS</span></td>
      <td>初级</td>
      <td><button>变色</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td><span>Web APIs</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 获取父节点，以相对位置查找节点，实际应用中非常灵活。

2.5兄弟关系

<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移动端事件

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

4 移动端JS框架 swiper

综合案例----学生信息表(操作数据)

实现技术

录入模块
- 创建空数组准备存放表单信息，表单信息以创建的对象形式 push到数组
- 创建tr元素，数组对象里边的内容渲染tr的内容，渲染完成后需要添加tr的位置
删除操作

删除元素的id 通过属性选择器获得，
每一个删除的超链接，使用事件绑定的方法实现绑定再tbody上，

判断元素非空

属性选择器，要获取的表单控件都含有name属性，获取后 name.value不为空

const  lis  = document.querySelectorAll('[name]')
          for(let i = 0;i<lis.length;i++){
            if(lis[i].value === ''){
            return  alert('请输入内容')
            }
          }