• 节点操作.

    在这里插入图片描述

    1、查找节点

    1.1、节点操作-父节点

    在这里插入图片描述

    子元素.parentNode属性返回的是最近的父节点，
    如果指定的节点没有父节点，就返回null

    <div class="father">
    <div class="son">✖</div>
</div>
<script>
    // 查看元素-父节点
    const son=document.querySelector('.son');
    console.log(son);//返回dom对象，没有找到就返回空
    console.log(son.parentNode);//返回dom对象，没有找到就返回空
    console.log(document.parentNode);//null
</script>

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

    在这里插入图片描述

        <style>
        .father{
            position: relative;
            width: 500px;
            height: 200px;
            background-color: pink;
        }
        .son{
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="father">1
        <div class="son">✖</div>
    </div>
    <div class="father">2
        <div class="son">✖</div>
    </div>
    <div class="father">3
        <div class="son">✖</div>
    </div>
    <script>
        // 假如有很多需要关闭的广告
        // 1、选中所有的关闭按钮
        const close=document.querySelectorAll('.son');
        console.log(close);
        
        for (let  i= 0; i < close.length; i++) {
            close[i].addEventListener('click',function name(){
                this.parentNode.style.display='none';
            })
        }
    </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

    点击可以关闭:把广告2关闭了
    在这里插入图片描述

    1.2、节点操作-子节点

    在这里插入图片描述

    父元素.childNodes属性。返回所有子节点 包含 元素节点 文本节点
    children属性 只包含元素节点

    <body>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        var ul=document.querySelector('ul');
        // childNodes所有子节点 包含 元素节点 文本节点
        console.log(ul.childNodes);
        console.log(ul.children);//只包含元素节点 是一个伪数组
        console.log(ul.children[0]);得到li   
    </script>

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

    在这里插入图片描述

    1.3、节点操作-兄弟节点

    在这里插入图片描述

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    const li2=document.querySelector('li:nth-child(2)');
    console.log(li2);
    // "查看li2的下一个节点："
    console.log(li2.nextElementSibling);
    // "查看li2的上一个节点："+
    console.log(li2.previousElementSibling);
</script>

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

    在这里插入图片描述

    1.4、获取第一个和最后一个子节点的操作

    获取第一个子节点:parentNode.firstChild 找不到返回null
    同样也是包含所有节点 元素节点 文本节点
    最后一个节点是parentNode.lastChild

    firstElementChild和lastElementChild，只包含元素节点
    实际开发常用：
    children[0]
    “最后一个元素：”+ul.children[ul.children.length-1]

    <body>
    <ul>
        <p>我是p</p>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        var ul=document.querySelector('ul');
        // 获取第一个子节点:parentNode.firstChild 找不到返回null
        // 同样也是包含所有节点  元素节点 文本节点
        // 最后一个节点是parentNode.lastChild
        console.log(ul.firstChild);
        console.log(ul.lastChild);
        // -------只获取元素节点-------------------------
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);
        //实际开发 没兼容性问题
        console.log(ul.children[0]);
        console.log("最后一个元素："+ul.children[ul.children.length-1]);
    </script>

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

    在这里插入图片描述

    2、创建节点

    在这里插入图片描述

    <script>
    // 创建节点  创建一个div节点
    const div=document.createElement('div');
    console.log(div);
</script>

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    3、追加节点

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

    <ul>
        <li>我是第一个li</li>
</ul>
<script>
    // 创建节点  创建一个div节点
    const div=document.createElement('div');
    console.log(div);
    div.innerHTML='我是追加进去的，最为最后一个子元素'
    document.body.appendChild(div);
</script>

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

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

    const ul=document.querySelector('ul');
// 创建一个节点li
const li=document.createElement('li');
// 把节点li 追加到ul里面
ul.appendChild(li);

    • 1
    • 2
    • 3
    • 4
    • 5

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

    const li0=document.createElement('li');
// ul.children 获取ul的所有元素 是个伪数组
ul.insertBefore(li0,ul.children[0])

    • 1
    • 2
    • 3

    在这里插入图片描述

    4、节点操作之添加内容

    需求：创建li，并添加内容

    <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <img src="../学成在线/images/图层2.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                    <em>
                <img src="../学成在线/images/形状23.png" alt="" class="hot">
           </em>
     </li>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    <script>
        let data = [
            {
                src: 'images/图层2.5.png',
                title: 'Android Hybrid APP开发实战 H5+原生！',
                num: 6788
            },
           。。。。。此处省略很多数据。。。。。。
            {
                src: 'images/图层2.5.png',
                title: 'Android Hybrid APP开发实战 H5+原生！',
                num: 6788
            }

        ];
        //1.获取父元素ul
        const ul = document.querySelector('.box .box-bd ul');
        for (let i = 0; i < data.length; i++) {
        	//2、通过循环创建多个li
            const li = document.createElement('li');
            // 重点--给li里面添加内容
             li.innerHTML = `
                     <img src="${data[i].src}" alt="">
                    <h4>${data[i].title}</h4>
                     <div class="info">
                         <span>高级</span> • ${data[i].num}人在学习
                     </div>
                     <em>
                       <img src="../学成在线/images/形状23.png" alt="" class="hot">
                     </em>
             `;
            ul.appendChild(li);
        }
    </script>

    • 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

    在这里插入图片描述

    4、克隆节点

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

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    // 需求：把第一个li克隆一下，并放在ul里
    const ul=document.querySelector('ul');
    // 克隆节点 true是深克隆，把标签和内容全部克隆
    // 浅克隆，只克隆标签，标签中的内容不克隆
    let li0=ul.children[0].cloneNode(true);
    // 再追加进去
    ul.appendChild(li0);

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

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

    // cloneNode()
const body=document.querySelector('body');
let uls=ul.cloneNode();
body.appendChild(uls);

    • 1
    • 2
    • 3
    • 4

    后代没有被克隆
    在这里插入图片描述

    5、删除节点

    在这里插入图片描述
    有5个li

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

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

    在这里插入图片描述

    <script>
    // 需求：删除第三个li
    // 1、获取父元素ul
    const ul=document.querySelector('ul');
    // 2、删除第三个li
    ul.removeChild(ul.children[2]);
</script>

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

    在这里插入图片描述

  • 相关阅读:
    编译时编程（Compile-Time Programming）
    基于Java的教学评价管理系统设计与实现(源码+lw+部署文档+讲解等)
    穿越时空的创新：解析云原生与Web3.0的奇妙渊源
    经典算法之快速排序法(附B站最细讲解视频)
    MySQL中比较运算符的使用
    基于 java+springboot+vue 的酒店⺠宿⽹站250910
    【夜读】影响一生的五大定律内心强大的人，有这五种特质
    Day09--全局事件共享-在页面中使用store中的成员
    第6章 初识Spring框架
    远程小组软件开发过程(3):人
  • 原文地址：https://blog.csdn.net/lxllxl211/article/details/127728697