Dom- 节点操作：

一.节点操作：

1. Dom 节点：

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

• 节点类型
  • 元素节点：
    • 所有的标签 比如 body、 div
    • html 是根节点
  • 属性节点：
    • 所有的属性 比如 href 、class属性
  • 文本节点：
    • 所有的文本 （比如标签里面的文字）
  • 其它

2. 查找节点：

• 节点关系：

  • 父节点

  • 子节点

  • 兄弟节点

• 父节点查找：

  • parentNode 属性

  • 返回最近一级的父节点 找不到返回为null

        <script>
            子元素.parentNode
        </script>
    

• 子节点查找：

  • childNodes:

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

  • children （重点）

    • 仅获得所有元素节点

    • 返回的还是一个伪数组

          <script>
              父元素.children
          </script>
      

• 兄弟关系查找：

  • 下一个兄弟节点 :
    • nextElementSibling 属性
  • 上一个兄弟节点 :
    • previousElementSibling 属性

    <script>
        let li = document.querySelector("li")
        li.addEventListener("click", function () {
            //上一个兄弟
            li.previousElementSibling
            //下一个兄弟
            li.nextElementSibling
        })
    </script>

3. 增加节点：

• 创建节点

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

  • 创建元素节点方法：

        <script>
            // 创建一个新的元素节点
            document.createElement('标签名')
        </script>
    

• **追加节点 ** / 增加节点

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

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

        <script>
            // 插入到这个父元素的最后
            父元素.appendChild(要插入的元素)
        </script>
    

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

        <script>
            // 插入到某个子元素的前面
            父元素.inserBefore(要插入的元素,在哪个元素的前面)
        </script>
    

• 克隆节点

  • 复制一个原有的节点

  • 把复制的节点放入到指定的元素内部

        <script>
            // 克隆一个已有的元素节点
            元素.cloneNode(布尔值) //布尔值=true或者false
        </script>
    

  • 若为true，则代表克隆时会包含后代节点一起克隆--深拷贝

  • 若为false，则代表克隆时不包含后代节点--浅拷贝

  • 默认为false

4. 删除节点：

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

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

• 语法：

      <script>
          父元素.removeChild(要删除的元素)
      </script>
  

• 注：

  • 如不存在父子关系则删除不成功

  • 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点

二.时间对象：

1.实例化:

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

• 创建一个时间对象并获取时间

• 获得当前时间

      <script>
          let data =new Date()
      </script>
  

• 获得指定时间

      <script>
          let data =new Date('2022-10-01')
      </script>
  

2.时间对象方法:

• 因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

  • getFullYear() 获得年份 获取四位年份

  • getMonth() 获得月份 取值0-11

  • getDade() 获得月份中的每一天 不同月份取值也不同

  • getDay() 获取星期 取值0-6

  • getHours() 获取小时 取值0-23

  • getMinutes() 获取分钟 取值0-59

  • getSeconds() 获取秒 取值0-59

        <script>
            // 函数调用时间对象方法：
               function getTime() {
                let nowTime = new Date()
                let year = nowTime.getFullYear()
                let month = nowTime.getMonth() + 1
                month = month < 10 ? '0' + month : month
                let date = nowTime.getDate()
                date = date < 10 ? '0' + date : date
                let hour = nowTime.getHours()
                hour = hour < 10 ? '0' + hour : hour
                let minutes = nowTime.getMinutes()
                minutes = minutes < 10 ? '0' + minutes : minutes
                let seconds = nowTime.getSeconds()
                seconds = seconds < 10 ? '0' + seconds : seconds
                return `${year}年${month}月${date}日${hour}: ${minutes}: ${seconds} `
            }
        </script>
    

3.时间戳：

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

• 三种方式获取时间戳

  • 使用 getTime() 方法

        <script>
            //1. 实例化：
            let date = new Date()
            // 2.获取时间戳
            console.log(date.getTime())
        </script>
    

  • 简写 +new Date()

  • 重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳

        <script>
            console.log(+new Date())
        </script>
    

  • 使用 Date.now()

        <script>
            console.log(Date.now())
        </script>
    

    • 无需实例化
    • 但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳

三.重绘与回流：

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

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

重绘和回流(重排)：

​ 重绘不一定引起回流，而回流一定会引起重绘。

1.回流(重排)：

• 当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为 回流。

2.重绘：

• 由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。

3.会导致回流（重排）的操作：

• 页面的首次刷新
• 浏览器的窗口大小发生改变
• 元素的大小或位置发生改变
• 改变字体的大小
• 内容的变化（如：input框的输入，图片的大小）
• 激活css伪类 （如：:hover）
• 脚本操作DOM（添加或者删除可见的DOM元素）

简单理解影响到布局了，就会有回流

    <script>
        let s = document.body.style
        s.padding = `2px`//重排+重绘
        s.border = `1px solid red`//再一次重排+重绘
        s.color = `red`//再一次重绘
        s.backgroundColor = `#ccc`//再一次重绘
        s.fontSize = `18px`//再一次重排+重绘
    </script>