• JS6day(DOM结点的查找、增加、删除。实例化时间)

    文章目录

    什么是DOM 节点？

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

    DOM节点的分类？

    • 元素节点(重点)：
      所有的标签 比如 body、 div
      html 是根节点
    • 属性节点：
      所有的属性 比如 href
    • 文本节点：
      所有的文本
    • 其他
      比如标签里的文字

    查找节点：

    父节点查找：

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

    • 1

    在这里插入图片描述

    关闭二维码案例：

      <style>
    .erweima {
      width: 149px;
      height: 152px;
      border: 1px solid #000;
      background: url(./images/456.png) no-repeat;
      position: relative;
    }

    .close {
      position: absolute;
      right: -52px;
      top: -1px;
      width: 50px;
      height: 50px;
      background: url(./images/bgs.png) no-repeat -159px -102px;
      cursor: pointer;
      border: 1px solid #000;
    }
  </style>

<body>
  <div class="erweima">
    <span class="close"></span>
  </div>   //5个这样的div
  <script>
    let closeBtn = document.querySelectorAll('.close')    //获取子节点
    console.log(closeBtn.parentNode)   //验证是否是父节点
    for (let i = 0; i < closeBtn.length; i++) {
      closeBtn[i].addEventListener('click', function () {
        // guanbi[i].parentNode.style.display = 'none'  //改变父节点样式
        // this.parentNode.style.display = 'none'  //改变父节点样式
        this.parentNode.style.visibility = 'hidden'   //这里不要用display，div会被占位置
        console.log(i)
      })
    }
  </script>
</body>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    子节点查找：

    • childNodes（了解，几乎不用）
      获得所有子节点、包括文本节点（空格、换行）、注释节点等
    • children （重点）
      仅获得所有元素节点
      返回的还是一个伪数组
    父元素.children

    • 1

    兄弟关系查找：

    1. 下一个兄弟节点
      nextElementSibling 属性
    2. 上一个兄弟节点
      previousElementSibling 属性
         let btn = document.querySelector('button')
     let two = document.querySelector('.two')
     btn.addEventListener('click', function () {
         two.style.color = 'red'
         two.nextElementSibling.style.color = 'red'
         two.previousElementSibling.style.color = 'red'
     })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    增加节点：

    在这里插入图片描述

    1. 创建节点

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

    document.creatElement('标签名')

    • 1
    1. 追加节点
      要想在界面看到，还得插入到某个父元素中，插入到父元素的最后一个子元素:
    //插入到这个父元素的最后
父元素.appendChild(要插入的元素)

    • 1
    • 2

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

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

    • 1
    • 2

    学成在线重构案例部分代码:

        let ul = document.querySelector('ul')
    // 1. 根据数据的个数，决定这小li的个数
    for (let i = 0; i < data.length; i++) {
        // 2. 创建小li
        let li = document.createElement('li')
        // console.log(li)

        // 4. 先准备好内容，再追加，li里面的标签不用再另外创建元素 
        li.innerHTML = `
        <img src=${data[i].src} alt="">
        <h4>
            ${data[i].title}
        </h4>
        <div class="info">
            <span>高级</span> • <span> ${data[i].num}</span>人在学习
        </div>
        `
        // 3. 追加给ul   父元素.appendChild(子元素)
        ul.appendChild(li)
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    克隆节点

    先克隆后追加！！
    在这里插入图片描述
    cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
     若为true，则代表克隆时会包含后代节点一起克隆
     若为false，则代表克隆时不包含后代节点
     默认为false

        <ul>
        <li>这是个例子</li>
    </ul>
    <script>
        let ul = document.querySelector('ul')
        let newUL = ul.cloneNode(true)  //先克隆，true代表后代节点一起克隆
        // console.log(newUL)
        document.body.appendChild(newUL)  //追加到父元素body中
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    删除节点

    • 若一个节点在页面中已不需要时，可以删除它
    • 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
    • 语法
    父元素.removeChild(要删除的元素)

    • 1
    • 注：
       如不存在父子关系则删除不成功
       删除节点和隐藏节点（display:none） 有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点。
        <button>点击</button>
    <ul>
        <li>这是个例子</li>
    </ul>
    <script>
        //点击按钮，删除小li
        let ul = document.querySelector('ul')
        let btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            ul.removeChild(ul.children[0])
        })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    实例化 (new)

      <script>
      //new 实例化 时间对象
      let date = new Date()  //创建一个时间对象并获取时间,空则得到当前时间
      document.write(date)   //输出Sun Jun 26 2022 21:40:42 GMT+0800 (中国标准时间)
  </script>

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述
    注意：月份和星期取值要+1才正常！！

    案例：

            let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        let div = document.querySelector('div')
        // 先调用，就省去了1秒的空白期
        getTime()    //就不会出现空白期
        setInterval(getTime, 1000)
        function getTime() {
            // 1. 实例化时间对象 一定写到定时器里面才可以额
            let date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let date1 = date.getDate()
            let hour = date.getHours()
            let min = date.getMinutes()
            let sec = date.getSeconds()
            let day = date.getDay()
            div.innerHTML = `今天是： ${year}年${month}月${date1}日 ${hour}:${min}:${sec} ${arr[day]}`
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述

    时间戳：

    什么是时间戳

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

    三种方式获取时间：

    • date.getTime() 需要实例化

    • +new Date()

    • 使用 Date.now()

    重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳
    无需实例化，但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳

            //第一种
        console.log(Date.now())  //1656332467573
        //第二种
        date = new Date()
        console.log(date.getTime())   //1656332467573
        //第三种 
        console.log(+new Date())    // 当前的时间戳 1656332467573
        console.log(+new Date('2022-6-27 12:00:00'))  // 指定时间的时间戳

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    浏览器是如何进行界面渲染的

    1. 解析（Parser）HTML，生成DOM树(DOM Tree)
    2. 同时解析（Parser） CSS，生成样式规则 (Style Rules)
    3. 根据DOM树和样式规则，生成渲染树(Render Tree)
    4. 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
    5. 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
    6. Display: 展示在页面上

    重绘和回流(重排)

    回流(重排)
    当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过
    程称为回流。
    重绘
    由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、
    outline    等), 称为重绘。
    重绘不一定引起回流，而回流一定会引起重绘。
    在这里插入图片描述
    在这里插入图片描述

    一个经过我修改的下班倒计时完美案例

    在这里插入图片描述

    <!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">今天是2021年8月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 next = document.querySelector('.next')
    let clock = document.querySelector('.clock')
    //获取时间
    getTime()
    setInterval(getTime, 500)
    function getTime() {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours()
      let minute = date.getMinutes()
      let second = date.getSeconds()
      //显示现在时间
      next.innerHTML = `今天是${year}年${month}月${day}日`
      let time = TimeMachine(hour, minute, second)  //时间转换器<10就加'0'
      clock.nextElementSibling.innerHTML = `现在是${time[0]}:${time[1]}:${time[2]}`
      //时间戳计算
      now = +new Date()
      future = +new Date(`${year}-${month}-${day} 22:00:00`)
      // future = +new Date(`${year}-${month}-${day} 22:00:00`)
      console.log(future)
      total = (future - now) / 1000  //转换成秒数
      if (total <= 0) {
        return
      }
      //显示倒计时
      let h = parseInt(total / 60 / 60 % 24) // 计算小时
      let m = parseInt(total / 60 % 60); // 计算分数
      let s = parseInt(total % 60); // 计算当前秒数
      let time2 = TimeMachine(h, m, s)  //时间转换器<10就加'0'
      clock.children[0].innerHTML = time2[0]
      clock.children[2].innerHTML = time2[1]
      clock.children[4].innerHTML = time2[2]
    }

    //时间转换器<10就加'0'
    function TimeMachine(hour, minute, second) {
      hour = hour < 10 ? '0' + hour : hour //小于10补0，别忘了重新给h赋值
      minute = minute < 10 ? '0' + minute : minute
      second = second < 10 ? '0' + second : second
      return [hour, minute, second]
    }
  </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132

    微博发布案例部分代码（修改后）：

        let area = document.querySelector('#area')
    let useCount = document.querySelector('#useCount')
    let send = document.querySelector('#send')
    area.addEventListener('input', function () {
      useCount.innerHTML = this.value.length
    }
    )
    send.addEventListener('click', function () {
      if (area.value.trim() === '') {   //   防止输入无意义空格, 使用字符串.trim()去掉首尾空格
        alert('不能输入为空!')
        area.value = ''
        useCount.innerHTML = '0'
        return
      }
      let list = document.querySelector('#list')
      let li = document.createElement('li')
      let random = Math.floor(Math.random() * dataArr.length)
      // 利用时间对象将时间动态化       new Date().toLocaleString()
      li.innerHTML = `
            <div class="info">
            <img class="userpic" src=${dataArr[random].imgSrc} />
            <span class="username">${dataArr[random].uname}</span>
            <p class="send-time">${new Date().toLocaleString()}</p>   
            </div>
            <div class="content">${area.value}</div>
            <span class="the_del">X</span>
        `
      list.insertBefore(li, list.children[0])
      // 将表单域内容重置为空
      // 将userCount里面的内容重置为0
      area.value = ''
      useCount.innerHTML = '0'
      let del = li.querySelector('.the_del')     // 使用 li.querySelector()
      del.addEventListener('click', function () {
        list.removeChild(li)
      })
    })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    在这里插入图片描述
    在这里插入图片描述

  • 相关阅读:
    jenkins声明式流水线pipline深入学习
    【QML】警告Name is declared more than once
    C# 异步调用aysnc await
    查询不为空的字段
    「Python 」面向对象三大特性之继承性——（概念、语法、特点、相关术语、注意事项、代码示例）
    网络安全（黑客）——自学2024
    网络安全实战，潜伏与Python反向连接
    CSDN竞赛第四期季军 解题思路及参赛经历分享
    计算机视觉CV-目标检测OB
    刷题笔记（十八）--二叉树：公共祖先问题
  • 原文地址：https://blog.csdn.net/qq_44976531/article/details/125473405