DOM节点操作总结

最新推荐文章于 2022-10-14 21:46:05 发布
最新推荐文章于 2022-10-14 21:46:05 发布
阅读量454 收藏
点赞数 2
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40630195/article/details/122141479
版权

01-DOM节点：网页一切内容皆节点

1.1-DOM节点介绍

  • 1.什么是节点：在HTML文档中，一切皆节点（HTML文档本身、标签、属性、注释内容、文本）
  • 2.什么是元素：元素在HTML中叫做标签，在JS的dom对象中称为元素（可以理解为标签的面向对象的叫法）
  • 3.HTML标签属于节点的一种，叫做元素节点
  • 4.节点三要素：
    • 节点类型：标签、属性、注释、文本
    • 节点名称：p、div、class（标签名）
    • 节点的值：one（属性的值）
  • 在JavaScript中，document这个对象大家一定很熟悉，哪怕是刚刚开始学习的新人，也会很快接触到这个对象。而document对象不仅仅是一个普通的JavaScript内置对象，它还是一个巨大API的核心对象，这个巨大的API就是DOM（Document Object Model），它将文档的内容呈现在JS面前，并赋予了JS操作文档的能力。
    • DOM树体现着HTML页面的层级结构，学习中经常提到的父元素子元素的说法也是建立在树这种数据结构的基础之上的,而DOM文档树则包含文档中所有内容。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 我是注释 -->
    <div class="box" id="box">我是班长</div>
    <p>我是班长的小迷妹</p>

    黑马程序员

    <script>
        /* 
        1.网页内容是由标签组成   ：  不严谨的

        2.网页内容由  节点组成 ： 一切内容皆节点
            元素(标签)节点 ： 例如 div标签
            属性节点 ： 例如 class属性
            文本节点 ： 比如标签里面的文字
            注释节点 ： 比如HTML中的注释

        3.DOM节点操作重点记住： 元素节点
        */
    
    </script>
</body>
</html>

1.2-查找节点：子节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <ul>
      <!-- 我是注释哟 -->
      我是文本哈
      <li>我是班长1</li>
      <li>我是班长2</li>
      <li>我是班长3</li>
      <li>我是班长4</li>
      <li>我是班长5</li>
    </ul>
    <script>
      /* 学习目标： 获取子节点与子元素
            1.获取子节点 :  父元素.childNodes
            2.获取子元素节点（重点）:   父元素.children
        */

      let ul = document.querySelector('ul')

      //1.获取子节点 : 文本节点 、 注释节点 、 元素节点
      console.log(ul.childNodes) //13  标签之间的换行也算空文本节点

      //2.获取子元素 ： 元素节点
      console.log(ul.children) //仅获得5个元素节点
    </script>
  </body>
</html>

1.3-查找节点：兄弟节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <button class="btn">点我操作li2的兄弟节点</button>
    <ul>
      <li>我是班长1</li>
      <li id="li2">我是班长2</li>
      <li>我是班长3</li>
      <li>我是班长4</li>
      <li>我是班长5</li>
    </ul>
    <script>
      /* 学习目标： 获取兄弟元素
            1.获取上一个元素节点 : 元素.previousElementSibling
            2.获取下一个元素节点 : 元素.nextElementSibling
         */

      let li2 = document.querySelector('#li2')

      document.querySelector('.btn').onclick = function () {
        //兄弟元素 ： 元素节点
        //1 上一个兄弟元素
        console.log(li2.previousElementSibling) //班长1
        li2.previousElementSibling.style.color = 'red'
        //2 下一个兄弟元素
        console.log(li2.nextElementSibling) //班长3
        li2.nextElementSibling.style.color = 'red'
      }
    </script>
  </body>
</html>

1.4-查找节点：父节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li>我是班长1</li>
      <li id="li2">我是班长2</li>
      <li>我是班长3</li>
      <li>我是班长4</li>
      <li>我是班长5</li>
    </ul>
    <script>
      /* 学习目标： 获取父节点 
            子元素.parentNode
         */

      let li2 = document.querySelector('#li2')

      console.log(li2.parentNode) //ul
      console.log(li2.parentNode.parentNode) //body
      console.log(li2.parentNode.parentNode.parentNode) //html
      console.log(li2.parentNode.parentNode.parentNode.parentNode) //document 
      console.log(li2.parentNode.parentNode.parentNode.parentNode.parentNode) //null
    </script>
  </body>
</html>

1.5-案例：点击关闭二维码

在这里插入图片描述

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>关闭二维码</title>
    <style>
        .box {
            border: 1px solid #D9D9D9;
            margin: 100px auto;
            position: relative;
            width: 107px;
        }

        #x {
            border: 1px solid #D9D9D9;
            width: 14px;
            height: 14px;
            line-height: 14px;
            color: #D6D6D6;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: -15px;
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="images/taobao.jpg" alt="" />
        <span id="x">×</span>
    </div>

    <script>
        /* 需求： 点击xx，隐藏box */

        //1.获取元素
        let x = document.querySelector('#x');
        // let box = document.querySelector('.box');
        //2.注册事件
        x.onclick = function(){
            //3.事件处理:隐藏box   
            //this : x 
            this.parentNode.style.display = 'none';
        };
    </script>
</body>

</html>

1.6-新增节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li>我是班长1</li>
      <li id="li2">我是班长2</li>
      <li>我是班长3</li>
      <li>我是班长4</li>
      <li>我是班长5</li>
    </ul>
    <script>
        /* 学习目标： 新增节点三个流程
           1.内存中创建一个空节点：  document.createElement('标签名')
           2.设置节点内容
           3.追加到页面
                追加到最后面    ：   父元素.appendChild(子元素)
                追加指定元素前面 ：  父元素.insertBefore(子元素,哪个元素的前面)
        */

        //1.内存中创建一个空节点 
        let newLi = document.createElement('li')
        //2.设置节点内容
        newLi.innerText = '我是新增节点'
        //3.追加到页面
        
        let ul = document.querySelector('ul')
        let li2 = document.querySelector('#li2')
        //3.1 追加到最后面    ：   父元素.appendChild(子元素)
        ul.appendChild(newLi)
        //3.2 追加指定元素前面 ：  父元素.insertBefore(A元素,B元素)
        ul.insertBefore(newLi,li2)
    </script>
  </body>
</html>

1.7-克隆节点

在这里插入图片描述

<!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>
        .box{
            width: 300px;
            height: 100px;
            border: 1px solid pink;
            margin-top: 10px;
        }

    </style>
</head>
<body>
    <button class="btn">点我克隆节点</button>
    <div class="box">
        <a href="我是链接"></a>
        <p>我是p标签</p>
        <ul>
            <li>我是ikun1</li>
            <li>我是ikun2</li>
        </ul>
    </div>

    <script>
        /* 本小节学习目标：克隆节点
            ul.cloneNode(布尔类型)
                默认false：不克隆后代节点
                true:克隆后代节点
        */
        let box = document.querySelector('.box')
		
        document.querySelector('.btn').onclick = function(){
            //克隆节点  false:不克隆后代节点  true:克隆后代节点
            let newBox = box.cloneNode(true)
            document.body.appendChild(newBox)
        }

    </script>
</body>
</html>

1.8-删除节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button class="btn">点我删除节点</button>
    <ul>
        <li>我是班长1</li>
        <li id="li2">我是班长2</li>
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
    </ul>

    <script>
        /*学习目标：  删除节点
            父元素.removeChild(子元素) 
         */

         let ul = document.querySelector('ul')
         let li2 = document.querySelector('#li2')
        document.querySelector('.btn').onclick = function(){
            //删除节点
            ul.removeChild(li2)
        }
    </script>
</body>

</html>

02-综合案例：微博发布

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>微博发布</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      .w {
        width: 900px;
        margin: 0 auto;
      }

      .controls textarea {
        width: 878px;
        height: 100px;
        resize: none;
        border-radius: 10px;
        outline: none;
        padding-left: 20px;
        padding-top: 10px;
        font-size: 18px;
      }

      .controls {
        overflow: hidden;
      }

      .controls div {
        float: right;
      }

      .controls div span {
        color: #666;
      }

      .controls div .useCount {
        color: red;
      }

      .controls div button {
        width: 100px;
        outline: none;
        border: none;
        background: rgb(0, 132, 255);
        height: 30px;
        cursor: pointer;
        color: #fff;
        font: bold 14px '宋体';
        transition: all 0.5s;
      }

      .controls div button:hover {
        background: rgb(0, 225, 255);
      }

      .controls div button:disabled {
        background: rgba(0, 225, 255, 0.5);
      }

      .contentList {
        margin-top: 50px;
      }

      .contentList li {
        padding: 20px 0;
        border-bottom: 1px dashed #ccc;
        position: relative;
      }

      .contentList li .info {
        position: relative;
      }

      .contentList li .info span {
        position: absolute;
        top: 15px;
        left: 100px;
        font: bold 16px '宋体';
      }

      .contentList li .info p {
        position: absolute;
        top: 40px;
        left: 100px;
        color: #aaa;
        font-size: 12px;
      }

      .contentList img {
        width: 80px;
        border-radius: 50%;
      }

      .contentList li .content {
        padding-left: 100px;
        color: #666;
        word-break: break-all;
      }

      .contentList li .the_del {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 28px;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="w">
      <!-- 操作的界面 -->
      <div class="controls">
        <img src="./images/9.6/tip.png" alt="" /><br />
        <!-- maxlength 可以用来限制表单输入的内容长度 -->
        <textarea
          placeholder="说点什么吧..."
          id="area"
          cols="30"
          rows="10"
          maxlength="200"
        ></textarea>
        <div>
          <span class="useCount" id="useCount">0</span>
          <span>/</span>
          <span>200</span>
          <button id="send">发布</button>
        </div>
      </div>
      <!-- 微博内容列表 -->
      <div class="contentList">
        <ul id="list"></ul>
      </div>
    </div>

    <!-- 添加了hidden属性元素会直接隐藏掉 -->
    <li hidden>
      <div class="info">
        <img class="userpic" src="./images/9.6/03.jpg" />
        <span class="username">死数据:百里守约</span>
        <p class="send-time">死数据:发布于 2020年12月05日 00:07:54</p>
      </div>
      <div class="content">死数据:111</div>
      <span class="the_del">X</span>
    </li>

    <script>
      // maxlength 是一个表单属性, 作用是给表单设置一个最大长度
      // 模拟数据
      let dataArr = [
        { uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
        { uname: '女娲', imgSrc: './images/9.5/02.jpg' },
        { uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
        { uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
        { uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
        { uname: '张良', imgSrc: './images/9.5/06.jpg' },
        { uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
        { uname: '李白', imgSrc: './images/9.5/08.jpg' },
        { uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
        { uname: '墨子', imgSrc: './images/9.5/10.jpg' },
        { uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
        { uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
        { uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
        { uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
        { uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
        { uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
        { uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
        { uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
        { uname: '露娜', imgSrc: './images/9.5/19.jpg' },
        { uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
        { uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
        { uname: '百里玄策', imgSrc: './images/9.5/22.jpg' }
      ]

      /*需求分析：找交互 
      1.文本框输入事件：   获取用户输入文本长度  赋值给 span标签

      2.发布按钮点击事件：
        (1) 检测内容是否为空， 为空则不添加内容
        (2) 根据用户输入内容，生成li元素
        (3) 将新生成的li元素追加到最前面
        (4) 重置输入框： 文本 和 数量都要重置

      3.删除按钮点击事件： 点删除，移除自身所在的li元素
        * 本案例难点： 动态添加的元素不能直接注册事件
          * 分析原因： 删除按钮一开始页面是没有的，因此无法获取。 只有用户点击发送按钮，才会动态新增。
          * 解决方案：
            * 1.在新增li元素的后面，获取删除按钮并注册事件
            * 2.事件委托技术（实际开发解决方案，明天学习）   
      */

      //1.获取元素
      let textarea = document.querySelector('textarea')
      let useCount = document.querySelector('.useCount')
      let send = document.querySelector('#send')
      let list = document.querySelector('#list') //ul

      //2.注册事件

      //2.1 文本框输入事件
      textarea.oninput = function () {
        //3.事件处理：获取用户输入文本长度  赋值给 span标签
        useCount.innerHTML = this.value.length
      }

      //2.2 发布按钮点击事件
      send.onclick = function () {
        //3.1 检测内容是否为空， 为空则不添加内容   trim() : 去除字符串两头空格
        if (textarea.value.trim() === '') {
          //(1)提示用户
          alert('内容不能为空')
          //(2)清空输入框
          textarea.value = ''
          //(3)清空数量
          useCount.innerHTML = 0
          //(4)非空判断核心： 如果用户输入为空，则不执行后面代码
          return
        }

        //3.2 根据用户输入内容，生成li元素
        //(1)创建li元素
        let li = document.createElement('li')
        //(2)设置li元素内容
        let index = parseInt(Math.random() * dataArr.length)
        li.innerHTML = `
        <div class="info">
          <img class="userpic" src=${dataArr[index].imgSrc}>
          <span class="username">${dataArr[index].uname}</span>
          <p class="send-time"> ${new Date().toLocaleString()} </p>
        </div>
        <div class="content">${textarea.value}</div>
        <span class="the_del">X</span>`

        /* 删除按钮是动态新增的，所以必须要先有li元素，才可以找到这个xx按钮 
        document.querySelector() : 在整个dom树去查询元素
        父元素.querySelector()    : 在父元素所有的后代元素中查询元素
        */
        li.querySelector('.the_del').onclick = function () {
          //this : 删除按钮
          //this.parentNode : li元素
          //this.parentNode.parentNode : ul元素
          this.parentNode.parentNode.removeChild(this.parentNode)
        }

        //3.3 将新生成的li元素追加到最前面
        list.insertBefore(li, list.children[0])

        //3.4 重置输入框： 文本 和 数量都要重置
        textarea.value = ''
        useCount.innerHTML = 0
      }
    </script>
  </body>
</html>

03-定时器

1.1-setInterval永久定时器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">移除定时器</button>
    <p id="pp">0</p>

    <script>
      /* 
        1.定时器作用 ：一件事 在 间隔时间 反复执行

        2.定时器语法 ：
            2.1 添加定时器
                let timeID = setInterval(回调函数,时间间隔)
            2.2 移除定时器
                clearInterval(timeID)

        3.定时器应用场景 ： 

        4. setInterval与setTimeout区别 :
        
        */

      /**
       * @description: 添加定时器
       * @param {function} 回调函数  做什么事
       * @param {number} 间隔时间 单位: ms
       * @return: number类型 : timeID 定时器id
       * 一个页面可以开启很多定时器，浏览器为了便于识别这些浏览器，所以给每一个定时器都添加一个编号，这个编号称之为定时器id
       */
       let timeID = setInterval(function () {
        console.log('哈哈')
        document.querySelector('#pp').innerText++
      }, 1000)

      document.querySelector('.btn').onclick = function () {
        //参数： 你想要清除的定时器id
        clearInterval(timeID)
      }
    </script>
  </body>
</html>

1.4-setTimeout一次定时器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn1">添加定时器</button>
    <button id="btn2">移除定时器</button>
    <p id="pp">0</p>

    <script>
      /* 
        1.定时器作用 ：一件事 在 间隔时间 反复执行

        2.定时器语法 ：
            2.1 添加定时器
                let timeID = setInterval(回调函数,时间间隔)
                let timeID = setTimeout(回调函数,时间间隔)
            2.2 移除定时器
                clearInterval(timeID)
                clearTimeout(timeID)

        3. setInterval与setTimeout区别 :
            3.1 setInterval :永久定时器。一旦开启，在间隔时间 永久执行，除非手动清除
            3.2 setTimeout : 一次定时器。间隔时间内 只执行一次，完毕后自动清除

        4.定时器应用场景 ：
            4.1 电商类网站： 秒杀功能
            4.2 动画
         */


      document.querySelector('#btn1').onclick = function () {
        /**
         * @description: 添加定时器
         * @param {function} 回调函数  做什么事
         * @param {number} 间隔时间 单位: ms
         * @return: number类型 : timeID 定时器id
         * 一个页面可以开启很多定时器，浏览器为了便于识别这些浏览器，所以给每一个定时器都添加一个编号，这个编号称之为定时器id
         */
         let timeID = setTimeout(function () {
          alert('我是一次定时器，我一旦触发之后，会自动移除')
        }, 5000)
      }

      document.querySelector('#btn2').onclick = function () {
        //参数： 你想要清除的定时器id
        clearTimeout(timeID)
      }
    </script>
  </body>
</html>

1.3-案例：3秒自动消失广告

在这里插入图片描述

<!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>
      img {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    </style>
  </head>

  <body>
    <img src="./images/ad.png" alt="" />
    <script>
      let img = document.querySelector('img')
      setTimeout(function () {
        img.style.display = 'none'
      }, 3000)
    </script>
  </body>
</html>

1.4-Date日期内置对象使用

  • 课后学习传送门：https://www.runoob.com/js/js-obj-date.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
       /* Date:日期对象 */     
       let d = new Date()
       console.log(d)

       //1.获取年 月 日 时 分 秒
       console.log( d.getFullYear() )//年 2021
       console.log( d.getMonth() )//月 范围0-11   8下标：9月份
       console.log( d.getDate() )//日 25
       console.log( d.getDay() )//星期 0-6 日0-六6
       console.log( d.getHours() )//时
       console.log( d.getMinutes() )//分
       console.log( d.getSeconds() )//秒

       //2.获取时间戳 : 返回 1970 年 1 月 1 日至今的毫秒数   (应用场景：适配时区)
       console.log( Date.now() )//1632554590674
       console.log( new Date().getTime() )//1632554590674
       
       
       
    </script>
</body>
</html>

1.5-案例:电商秒杀

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <span>
      <span id="hour">01</span> : <span id="minute">02</span> :
      <span id="second">15</span>
    </span>

    <script>
      /*秒杀功能思路分析 
            1.开启1s间隔执行
            2.先获取当前的h m s
            3. s--
            4. 如果s < 0, s = 59,m--
            5. 如果m < 0, m = 59,h--
            6. 优化： 如果h m s 小于10，则在前面加上0
            7. 将计算之后的h m s 显示到页面
            8. 如果 h = 0 m = 0 s = 0,清除定时器
         */

      //1.开启1s间隔执行
      let timeID = setInterval(function () {
        //2.先获取当前的h m s
        /* 注意点; innerText获取的是字符串类型，应该先转成数字后再做计算 */
        let h = +document.querySelector('#hour').innerText
        let m = +document.querySelector('#minute').innerText
        let s = +document.querySelector('#second').innerText

        //3.s--
        s--
        //4.如果s < 0, s = 59,m--
        if (s < 0) {
          s = 59
          m--
        }
        //5.如果m < 0, m = 59,h--
        if (m < 0) {
          m = 59
          h--
        }

        //6. 优化： 如果h m s 小于10，则在前面加上0
        h = h < 10 ? '0' + h : h
        m = m < 10 ? '0' + m : m
        s = s < 10 ? '0' + s : s

        //7.计算后的结果重新显示到页面
        console.log(h, m, s)
        document.querySelector('#hour').innerText = h
        document.querySelector('#minute').innerText = m
        document.querySelector('#second').innerText = s

        //8.倒计时结束
        if (h == 0 && m == 0 && s == 0) {
          clearInterval(timeID)
        }
      }, 1000)
    </script>
  </body>
</html>

04-拓展进阶：关于渲染引擎的重绘与回流介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pre0Ay8D-1640405100238)(day03.assets/1636883841422.png)]

在这里插入图片描述

  • 浏览器渲染解析页面完整流程

  • 1.先解析HTML，生成DOM树（重要步骤）

  • 2.后解析CSS，生成样式规则

  • 3.根据DOM树与样式规则，得到一颗渲染树Render Tree（重要步骤）

    • DOM树：只有结构没有样式
    • 渲染数：DOM树 + CSS样式 （可以理解为附加了样式的DOM树）

  • 4.渲染引擎开始工作，解析渲染树。

    • 这个步骤发生 回流(又称重排) : 计算节点的尺寸、结构、布局

  • 5.开始绘制

    • 这个步骤发生重绘 : 根据重排结果进行绘制页面

  • 6.渲染完成，呈现页面

  • 重要概念： 重排一定会引起重绘，但是重绘不一定引起重排

    • 引起重排操作：主要是修改了尺寸、布局（总结起来就是对布局产生印象）
      • 如：修改盒子的尺寸， 修改盒子位置、修改字体大小、边框等等影响盒子模型布局的都会导致重绘
      • 重排：会导致页面大面积重绘，甚至是整个页面重新绘制。（影响性能）
    • 引起重绘操作：不影响布局，只是影响盒子自身属性
      • 如：修改颜色，修改透明度等，对布局没有任何影响的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PknVnZck-1640405100239)(day03.assets/1636884113156.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AeZxADWA-1640405100240)(day03.assets/1636884129735.png)]

码少女壮士
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
DOM节点的使用（常用方法+代码）
zzvar的博客
04-24 2006
JavaScript入门学习总结1. 什么是 JavaScript2. JavaScript 的特点3. JS的使用编写位置基本语法变量打印变量数据类型运算符3. 函数的定义函数语法函数的调用4.面向对象构造函数(类)定义创建对象和操作成员5.内置对象DateString6.数组数组的定义方式数组中的常用属性和方法**数组的遍历方式**7. JavaScript小例题总结 学习总结 1. 什么是 JavaScript JavaScript（简称"JS"）是一种具有函数优先的轻量级，解释型或即时编译型的编程
要求使用DOM内关于事件和元素结点的相关知识达成点击按钮输出对应行某列数据的功能
new_technician的博客
07-18 87
要求使用DOM内关于事件和元素结点的相关知识达成点击按钮输出对应行某列数据的功能 效果图 代码实现 <script> window.onload = function(){ var allA = document.getElementsByTagName('a'); var tab = document.getElementById('tab'); //方法一
JavaScript基础——DOM节点操作学习笔记
爱前端的程序媛的博客
03-10 606
目录 笔记 方法的使用 案例一、动态生成表格 案例二、下拉菜单，鼠标经过和离开实现 案例全部代码 笔记 ###节点概述 1.网页中的任何内容都是节点——文字、标签、元素、文档等。 节点至少有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)三个基本属性 节点的类型nodeType 元素节点：...
JS最实用的dom节点操作大全
这个世界上有各种各样的人.
11-17 1178
文章目录学习目标一、排他操作二、节点操作2.1 节点概述2.2 节点层级2.3 父级节点2.4 子节点2.5 兄弟节点2.6 创建节点2.7 添加节点2.8 删除节点2.9 复制（克隆）节点三、创建元素的三种方式总结 学习目标 能够区分元素节点、文本节点、属性节点 能够获取指定元素的父元素 能够获取指定元素的所有子元素 能够说出childNodes和children的区别 能够使用createElement创建页面元素 能够使用removeChild()方法删除节点 一、排他操作
DOM--节点操作
JJ_Smilewang的博客
06-16 735
我们知道，DOM主要是对元素进行增删改查和绑定事件，那么获取元素作为前提，就显得格外的重要。获取元素通常使用两种方式：(1) 利用 DOM 提供的方法获取元素 (2) 利用节点层级关系获取元素DOM提供的方法，在前面的文章里已经介绍过了，就是 document.getElementById()document.getElementsByTagName()、document.querySelector 等。这些方法其实逻辑性不强、而且相对来说有些繁琐。所以，本文将介绍第二种方式-
JavaScript DOM节点操作方法总结
11-25
下面就分别从对元素节点的操作和对属性节点的操作来介绍。 元素节点 查 在对DOM进行增删改之前，首先要找到对应的元素。具体的查找方法如下： getElementByID() // 得到单个节点 getElementsByTagName() // 得到...
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
10-20
主要介绍了JavaScript DOM节点操作,结合实例形式总结分析了JS操作DOM实现新建与删除HTML元素的具体步骤与相关技巧,需要的朋友可以参考下
jQuery学习之DOM节点的插入方法总结
01-19
本文主要总结了jQuery中DOM节点的插入方法，以及各种方法的注意点，下面话不多说，来看看详细的介绍吧。 一、内部插入append()与appendTo() append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加...
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
01-19
本文实例讲述了JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支。分享给大家供大家参考，具体如下： 页面加载事件的比较 [removed] jquery 中的 document.ready document.ready = function ...
20、DOM的基本操作
qq_40637729的博客
10-14 1174
DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合(DOM不能操作css)。也有人称DOM是对HTML以及XML的标准编程接口。 1.对节点的增删改查 查看元素节点 document代表整个文档 document.getElementByld() getElementsByTagName() getElementsByName() getElementsByClassName() querySelector() querySelectorAll() 遍
几种设置表单元素中文本输入框不可编辑的方法总结
12-02
代码: 代码如下:<input type=”text” value=”fisker” onclick=”alert(this.value);” onfocus=”this.blur()” /> 输入框无法获得焦点，不能编辑 表单可以获得值。 可以复制。 蛮奇怪的，都选住了，还没有获得焦点？ 2,readonly 代码: <input type=”text” value=”fisker” onclick=”alert(this.value);” readonly /> 输入框只读。不能编辑 同样表单可以获得值。 也可以复制。 3,disabled 代码: 代码如下:<input t
【JavaScript】DOM
自学前端的小菜鸡的博客
10-17 116
DOM（Document Object Model） - 文档对象模型，通过DOM可以来任意来修改网页中各个内容 - 文档 - 文档指的是网页，一个网页就是一个文档 - 对象 - 对象指将网页中的每一个节点都转换为对象 转换完对象以后，就可以以一种纯面向对象的形式来操作网页了 - 模型 - 模型用来表示节点和节点之间的关系，方便操作页面 节点（Node） - 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点 - 虽然都是节点，但是节点的类型却是不同的 - 常用的节点
Javascript基础——利用Dom元素对节点进行创建、插入和删除、文档碎片
zxy9602的博客
11-07 751
1、创建节点——createElement （例如在ul元素后创建li元素） var oUl=docuemnt.getElementById('ul1'); var oLi=oUl.createElement('li'); 2、插入节点(两种方式) 第一种——appendChild 前提是在按钮点击创建基础上，进行相对应节点的插入。 var oBtn=document.get
JavaScript DOM 基础操作
qq_57340195的博客
01-18 131
JavaScript DOM 基础操作 一、获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclassName('元素类名') //根据元素类名获取 返回值：伪数组 document.getElementsByTagName('元素类名') //根据元素标签获...
JS——DOM操作（普通添加li元素和文件碎片添加li元素）
weixin_30612769的博客
05-23 855
创建10000个li元素案例，把普通方法和碎片化方法进行比较 （1）普通添加li元素案例，代码如下图： 运行结果见链接： https://ytraister.github.io/js-text/js%E4%BB%A3%E7%A0%81%E6%BC%94%E7%A4%BA/JS%E2%80%94%E2%80%94%E6%99%AE%E9%80%9A%E6%B7%BB%E5%8A%A0l...
JavaScript自动生成li节点 并把文本框的值赋给li.innerHtml
hyzhang6的博客
10-12 1918
作者：hyzhang 时间：2017-10-11 描述：自动生成li标签 并把文本框的值赋给li标签 --> window.onload =function(){ var  inpt = document.getElementById("txt"); var oUl =document.getElementById("ull"); var btn1 = d
JavaScript----DOM基础知识（三）动态创建标签
yufanhui的博客
07-14 1727
JavaScript不仅可以用来改变网页的结构和内容，还可以通过创建新元素和修改现有元素来改变网页结构。在学习利用DOM方法在web浏览器中添加标记时，常常能想到document.write（）和element.innerHTML方法，但是，不推荐使用这两种方法。这两种方法都右一种共同的弊端：结构、样式、行为没有分离。例如：&lt;html lang="en"&gt; &lt;head&gt; ...
DOM编程-节点操作(二)
Raaabbt GO!!
07-23 224
一段范例用代码<div id="users"> <h2>学习</h2> <ul> <li class="user"> <img src="1.jpg" > <a href="/user/1">小明</a> </li> <li class="user"> <img s
js第7章DOM 课后习题——利用HTML DOM实现全选、全不选、反选功能
WHT869706733的博客
11-26 7352
填空题 DOM中__document.createElement()____方法可用于创建一个元素节点。 HTML DOM中的根节点是_<html>标签_____。 判断题 document.querySelector('div').classList可以获取文档中所有div的class值。（ ×） 删除节点的removeChild()方法返回的是一个布尔类型值。（×） HTML文档每个换行都是一个文本节点。（ √） document对象的getElementsByClassN...
虚拟DOM是怎么转换成DOM的
最新发布
07-20
虚拟DOM（Virtual DOM）是一个以...总结来说，虚拟DOM转换为真实DOM的过程主要包括差异计算、DOM节点的创建和删除、属性和内容的更新等步骤。这些操作最终将虚拟DOM的描述转化为浏览器能够渲染的真实DOM结构。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值