• DOM- 节点操作

    一、节点操作

    1、DOM 节点

    • DOM节点： DOM树里每一个内容都称之为节点
    • 节点类型(元素节点最重要，因为需要对他操作)
      • 元素节点
        所有的标签 比如 body、 div
        html 是根节点
      • 属性节点
        所有的属性 比如 href
      • 文本节点
        所有的文本
      • 其他
        在这里插入图片描述

    节点可以让我们更好的理清标签元素之间的关系

    2、查找节点

    • 关闭二维码案例：
      点击关闭按钮 i， 关闭的是二维码的盒子， 需要获取box盒子
      ![在这里插入图片描述](https://img-blog.csdnimg.cn/8422ef22fa7e4f3c8cf46897b554978d.png
    • 思考：
      关闭按钮 i 和 box 是什么关系呢？ 父子关系
       所以，我们完全可以这样做：
      点击关闭按钮， 直接关闭它的爸爸，就无需获取 box 元素了
    • 节点关系：
       父节点
       子节点
       兄弟节点

    （1） 父节点查找：

     parentNode 属性，子元素.parentElement 返回的是一个对象
     返回最近一级的父节点 找不到返回为null
    在这里插入图片描述

    案例–关闭多个二维码案例

    需求：多个二维码，点击谁，谁关闭

    分析：
①：需要给多个按钮绑定点击事件
②：关闭的是当前的父节点

    • 1
    • 2
    • 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>Documenttitle>
    <style>
        .box{
            display: flex;         
        }
        .box img{
            border: 1px solid #000;
        }
        .box i{
            width: 10px;
            height: 10px;
            border: 1px solid #000;
            line-height: 7px;
            text-align: center;
            color: #ccc;
            cursor: pointer;
        }
    style>
head>
<body>
    <div class="box">   
        <img src="./images/456.png" alt="">
        <i>xi>
    div>
    <div class="box">   
        <img src="./images/456.png" alt="">
        <i>xi>
    div>
    <div class="box">   
        <img src="./images/456.png" alt="">
        <i>xi>
    div>
    <div class="box">   
        <img src="./images/456.png" alt="">
        <i>xi>
    div>
    <div class="box">   
        <img src="./images/456.png" alt="">
        <i>xi>
    div>    
    <script>
        //获取元素
        let i = document.querySelectorAll('i')
        //绑定事件
        for (let j = 0; j < i.length; j++){
            i[j].addEventListener('click',function(){
                //关闭当前的二维码，点击谁就关闭谁的爸爸
                //没用display='none',这样关掉后不占位，剩下的所有二维码会自动往上移
                //this.parentElement返回的是一个对象
                this.parentElement.style.visibility = 'hidden'
            })
        }
    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

    在这里插入图片描述

    注意：
    使用visibility = 'hidden'而不是display='none'是因为：
    在这里插入图片描述

    （2）子节点查找

    • childNodes
      获得所有子节点、包括文本节点（空格、换行）、注释节点等，这些节点获取来没啥用，所以childNodes了解即可
    • children （重点）
      仅获得所有元素节点，返回的是一个伪数组
      在这里插入图片描述
    • 例：点击按钮，让所有孩子变红色
      在这里插入图片描述
    <button>点击button>
<ul>
    <li>孩子1li>
    <li>孩子2li>
    <li>孩子3li>
    <li>孩子4li>
ul>
<script>
    // 获取元素
    let btn = document.querySelector('button')
    let ul = document.querySelector('ul')
    //事件监听
    btn.addEventListener('click',function(){
        //通过ul控制所有li，ul.children是伪数组，循环
        for (let i = 0; i<ul.children.length; i++ ){
           ul.children[i].style.color = 'red'
        }
    })
script>

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

    注意，通过父元素.children 获得的是一个伪数组，想对里面的元素操作都得先遍历或者取出（父元素.children[0]）

    （3）兄弟节点查找

    • 下一个兄弟节点
      nextElementSibling 属性
    • 上一个兄弟节点
      previousElementSibling 属性
    
兄弟[i].nextElementSibling.style.color = 'red'

    • 1
    • 2

    3、增加节点

    • 很多情况下，我们需要在页面中增加元素
       比如，点击发布按钮，可以新增一条信息
      在这里插入图片描述

    • 一般情况下，我们新增节点，按照如下操作：
       创建一个新的节点
       把创建的新的节点放入到指定的元素内部

    创建节点

    创造出一个新的网页元素，创建元素节点方法：
    在这里插入图片描述
    注意标签名只能是标签选择器，如div、p等，不能是类选择器或者ID选择器，如果想创建类选择器：

    <script>
    let div = document.createElement('div')
    div.className = 'box'
script>

    • 1
    • 2
    • 3
    • 4

    追加节点

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

    • 插入到父元素的最后一个子元素
      在这里插入图片描述

    • 插入到父元素中某个子元素的前面
      在这里插入图片描述

    • 例：
      在这里插入图片描述

    案例–学成在线案例渲染

    追加各个小课程
    在这里插入图片描述

    分析：
①：准备好空的ul 结构
②：根据数据的个数，创建一个新的空li
③：li里面添加内容 img 标题等
④：追加给ul

    • 1
    • 2
    • 3
    • 4
    • 5
    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>Documenttitle>
    <link rel="stylesheet" href="./index.css">
head>
<body>  
    <div class="box">
        <div class="head">
            <h3>精品推荐h3>
            <p>查看全部p>
        div> 
        <div class="body">
            <ul>
            
            ul>
        div>
    div>
    
    <script>
        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
                        }                   
                       
                    ]   
        //获取元素
        let ul = document.querySelector('ul')
        for(let i = 0; i<data.length;i++){
            //根据数据的个数，创建li
            let li = document.createElement('li')
            //li添加内容
            li.innerHTML = `
                ${data[i].src}" alt="">
                
    ${data[i].title}
    
                
    
                高级 • 
                ${data[i].num}人在学习
                
         `    
            //追加给ul
            ul.appendChild(li)
        }
        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

    原本是将