当前位置: 首页 > article >正文

【WEB APIs】DOM-节点操作

1. 日期对象

1.1 实例化

  <script>
    // 实例化
    // 1.得到当前时间
    const date = new Date()
    console.log(date);
    // 2.得到指定时间
    const date1 = new Date('2025-3-14')
    console.log((date1));
  </script>

1.2 日期对象方法

千万不要忘记加小括号

    // 获得日期对象
    const date2 = new Date()
    // 使用里面的方法
    console.log(date2.getFullYear());
    console.log(date2.getMonth() + 1); //getMonth()取值0~11
    console.log(date2.getDate());
    console.log(date2.getDay()); //星期几,getDay()取值范围0~6,星期日是第0天

显示格式化时间

  <script>
    const div = document.querySelector('div')
    function getMyDate() {
      const date = new Date()
      // 不足10,前补0
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return `今天是:${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${h}:${m}:${s}`
    }
    div.innerHTML = getMyDate() //防止刚刷新时1秒的空白
    setInterval(function () {
      div.innerHTML = getMyDate()
    }, 1000)
  </script>

另一种写法(不用手动补0)

    const div = document.querySelector('div')
    const date = new Date()
    div.innerHTML = date.toLocaleString()
    setInterval(function () {
      const date = new Date() //要获取最新的时间
      div.innerHTML = date.toLocaleString() // 2025/3/16 11:46:04
      // div.innerHTML = date.toLocaleDateString() // 2025/3/16
      // div.innerHTML = date.toLocaleTimeString() // 11:46:04
    }, 1000)

1.3 时间戳

    //1. getTime()
    const date = new Date()
    console.log(date.getTime())
    // //2. +new Date()
    console.log(+new Date()) //new Date()是字符串 +转化成数字型
    // // 3. Date.now()  不需要实例化
    console.log(Date.now())
//返回指定时间的时间戳
console.log(+new Date('2025/3/16 11:46:04')) //2025-3-16 11:46:04 也行
    //返回星期几
    const arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    console.log(arr[new Date().getDay()])

倒计时效果

  <script>
    // 随机颜色函数
    // 1. 自定义一个随机颜色函数
    function getRandomColor(flag = true) {
      if (flag) {
        // 3. 如果是true 则返回 #ffffff
        let str = '#'
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        // 利用for循环随机抽6次 累加到 str里面
        for (let i = 1; i <= 6; i++) {
          // 每次要随机从数组里面抽取一个  
          // random 是数组的索引号 是随机的
          let random = Math.floor(Math.random() * arr.length)
          // str = str + arr[random]
          str += arr[random]
        }
        return str

      } else {
        // 4. 否则是 false 则返回 rgb(255,255,255)
        let r = Math.floor(Math.random() * 256)  // 55
        let g = Math.floor(Math.random() * 256)  // 89
        let b = Math.floor(Math.random() * 256)  // 255
        return `rgb(${r},${g},${b})`
      }

    }

    // 页面刷新随机得到颜色
    const countdown = document.querySelector('.countdown')
    countdown.style.backgroundColor = getRandomColor()
    // 函数封装 getCountTime
    function getCountTime() {
      // 1. 得到当前的时间戳
      const now = +new Date()
      // 2. 得到将来的时间戳
      const last = +new Date('20225-3-16 13:30:00')
      // console.log(now, last)
      // 3. 得到剩余的时间戳 count  记得转换为 秒数
      const count = (last - now) / 1000
      // console.log(count)
      // 4. 转换为时分秒
      // h = 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. 把时分秒写到对应的盒子里面
      document.querySelector('#hour').innerHTML = h
      document.querySelector('#minutes').innerHTML = m
      document.querySelector('#scond').innerHTML = s
    }
    // 先调用一次
    getCountTime()

    // 开启定时器
    setInterval(getCountTime, 1000)

    // 日期
    const next = document.querySelector('.next')
    function getDate() {
      const date = new Date()
      next.innerHTML = `今天是:${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
    }
    getDate()
    setInterval(getDate, 1000)
  </script>

2. 节点操作—元素节点

2.1 DOM节点

2.2 查找结点(通过关系 属性)

//关闭广告
<body>
  <div class="box">
    我是广告1
    <div class="box1">X</div>
  </div>
  <div class="box">
    我是广告2
    <div class="box1">X</div>
  </div>
  <div class="box">
    我是广告3
    <div class="box1">X</div>
  </div>
  </div>
  <script>
    //单个广告
    // const box1 = document.querySelector('.box1')
    // box1.addEventListener('click', function () {
    //   this.parentNode.style.display = 'none'
    // })

    //多个广告
    const closeBtn = document.querySelectorAll('.box1')
    for (let i = 0; i < closeBtn.length; i++) {
      closeBtn[i].addEventListener('click', function () {
        this.parentNode.style.display = 'none'
      })
    }
  </script>
</body>

得到的是伪数组,包含所有的亲儿子

2.3 增加节点(重点)

  <script>
    // 1.创建节点
    const li = document.createElement('li')
    // 2.追加节点
    const ul = document.querySelector('ul')
    li.innerHTML = '我是新增的li'
    // ul.appendChild(li) //尾增
    ul.insertBefore(li, ul.children[0]) //将li插入到ul中第一个li的前面
  </script>
    <script>
        // 1. 重构  
        let data = [
            {
                src: 'images/course01.png',
                title: 'Think PHP 5.0 博客系统实战项目演练',
                num: 1125
            },
            {
                src: 'images/course02.png',
                title: 'Android 网络动态图片加载实战',
                num: 357
            },
            {
                src: 'images/course03.png',
                title: 'Angular2 大前端商城实战项目演练',
                num: 22250
            },
            {
                src: 'images/course04.png',
                title: 'Android APP 实战项目演练',
                num: 389
            },
            {
                src: 'images/course05.png',
                title: 'UGUI 源码深度分析案例',
                num: 124
            },
            {
                src: 'images/course06.png',
                title: 'Kami2首页界面切换效果实战演练',
                num: 432
            },
            {
                src: 'images/course07.png',
                title: 'UNITY 从入门到精通实战案例',
                num: 888
            },
            {
                src: 'images/course08.png',
                title: 'Cocos 深度学习你不会错过的实战',
                num: 590
            },
        ]
        const ul = document.querySelector('.box-bd ul')
        // 1. 根据数据的个数,创建 对应的小li
        for (let i = 0; i < data.length; i++) {
            // 2. 创建新的小li
            const li = document.createElement('li')
            // 把内容给li
            li.innerHTML = `
                <a href="#">
                    <img src=${data[i].src} alt="">
                    <h4>
                        ${data[i].title}
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>${data[i].num}</span>人在学习
                    </div>
                </a>
            `
            // 3. ul追加小li
            ul.appendChild(li)
        }
    </script>

    const ul = document.querySelector('ul')
    // 克隆节点 元素.cloneNode(true) 深克隆 将被克隆元素中所有内容都克隆
    //.cloneNode(false) 浅克隆 只克隆标签
    const li1 = ul.children[0].cloneNode(true)
    // console.log(li1);
    ul.appendChild(li1)

2.4 删除节点

ul.removeChild(ul.children[0])

3. M端事件(了解)

4. JS插件

5. 案例—学生信息表

  <script>
    // 获取元素
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    const tbody = document.querySelector('tbody')
    // 获取所有带有name属性的 元素
    const items = document.querySelectorAll('[name]')
    // 声明一个空的数组, 增加和删除都是对这个数组进行操作
    const arr = []

    // 1. 录入模块
    // 1.1 表单提交事件
    const info = document.querySelector('.info')
    info.addEventListener('submit', function (e) {
      // 阻止默认行为  不跳转
      e.preventDefault()
      // console.log(11)

      // 这里进行表单验证  如果不通过,直接中断,不需要添加数据
      // 先遍历循环
      for (let i = 0; i < items.length; i++) {
        if (items[i].value === '') {
          return alert('输入内容不能为空')
        }
      }
      // 创建新的对象 取得表单元素的值
      const obj = {
        stuId: arr.length + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      }
      // console.log(obj)
      arr.push(obj) // 追加给数组里面
      this.reset() // 清空表单  重置 
      render() // 调用渲染函数
    })


    // 2. 渲染函数 因为增加和删除都需要渲染
    function render() {
      // 先清空tbody 以前的行 ,把最新数组里面的数据渲染完毕 
      tbody.innerHTML = ''
      // 遍历arr数组
      for (let i = 0; i < arr.length; i++) {
        // 生成 tr 
        const tr = document.createElement('tr')
        tr.innerHTML = `
          <td>${arr[i].stuId}</td>
          <td>${arr[i].uname}</td>
          <td>${arr[i].age}</td>
          <td>${arr[i].gender}</td>
          <td>${arr[i].salary}</td>
          <td>${arr[i].city}</td>
          <td>
            <a href="javascript:" data-id=${i}>删除</a>
          </td>
        `
        // 追加元素  父元素.appendChild(子元素)
        tbody.appendChild(tr)
      }
    }


    // 3. 删除操作
    // 3.1 事件委托 tbody
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // 得到当前元素的自定义属性 data-id
        // console.log(e.target.dataset.id)
        // 删除arr 数组里面对应的数据
        arr.splice(e.target.dataset.id, 1)
        render() // 重新渲染一次
      }
    })
  </script>


http://www.kler.cn/a/588703.html

相关文章:

  • 钉钉项目报销与金蝶系统高效集成技术解析
  • 人工智能中的线性代数基础详解
  • RabbitMQ实现定时/延迟任务
  • ES6(2) 函数详解
  • 【RNN神经网络】序列模型与RNN神经网络
  • 易境通集运系统:拼团模式重构社交化集运新生态
  • MobileNet家族:从v1到v4的架构演进与发展历程
  • Vue源码深度解析:从2.x到3.x的架构演进与核心原理剖析
  • pycharm配置镜像源【pycharm最新版(23.2.5及以上)方法】
  • 记第一次跟踪seatunnel的任务运行过程三——解析配置的具体方法getLogicalDag
  • 【vue3学习笔记】(第147-149节)vue3响应式原理_Reflect;reactive对比ref;setup的两个注意点
  • Solana
  • 《Python深度学习》第二讲:深度学习的数学基础
  • C#—【在不同的场景该用哪种线程?】
  • Chrome 浏览器的很多扩展不能用了
  • mysql数据库中多张表导出成excel方式
  • Bash语言的集合
  • 【NLP】10. 机器学习模型性能评估指标(含多类别情况), ROC,PRC
  • 嵌入式Zephyr RTOS面试题及参考答案
  • Spring Boot Actuator 详解:让你的应用可监控、可管理、更健壮