WebAPI——DOM节点操作

其他 2020-08-03 13:20:28 阅读次数: 0

下一个节点与下一个

  • nextSibling：获得下一个节点，有可能是元素、注释、文本节点
    • 注意：在ie8中不兼容,空文本节点无法获取
  • nextElementSibling:获得下一个元素节点
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <p id="text">这是文本</p>
        <!-- 注释文本 -->
        <p>元素</p>
    </div>
    <script>
        let pBox = document.getElementById('text');

        // 获得下一个节点
        // nextSibling: 下一个节点-元素,文本,注释
        // 注意在ie8中不兼容,空文本节点无法获取
        console.log(text.nextSibling); //#text

        // 下一个元素节点
        // nextElementSibling:下一个元素节点
        // IE8中无法使用
        console.log(text.nextElementSibling); //  <p>元素</p>
    </script>
</body>

</html>

上一个节点与上一个元素节点

  • previousSibling:获得上一个节点，可能获得元素、文本、注释…节点
  • previousElementSibling：获得上一个元素节点
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <p>我是一个元素节点</p>
        <!-- 我是一个注释 -->
        <p id="text">测试文字</p>
    </div>
</body>
<script>
    // 获取当前元素
    let text = document.getElementById('text');
    // 获得上一个节点
    // previousSibling:可能获得元素、文本、注释...节点
    console.log(text.previousSibling);

    // 获得上一个元素节点
    console.log(text.previousElementSibling);
    // previousElementSibling:获得上一个元素节点
</script>
</html>

第一个子节点与第一个子元素节点

  • firstChild: 获得第一个子节点,大概率都是回车
    • 注意：在ie8中可以使用,无法获得空文本
  • firstElementChild：获得第一个子元素节点
    • 注意: ie8以及以下版本无法使用
<body>
    <div id='divBox'>
        <!-- 我是注释节点 -->
        <p>我是第一个元素节点1</p>
        <p>我是第一个元素节点2</p>
        <p>我是第一个元素节点3</p>   
    </div>
</body>
<script>
    // 获得父级元素
    let divBox =document.getElementById('divBox');

    // 获得第一个子节点
    console.log(divBox.firstChild);//#text

    // 获得第一个子元素节点
    console.log(divBox.firstElementChild);// <p>我是第一个元素节点1</p>
</script>

最后一个节点与最后一个元素子节点

  • lastChild:最后一个节点
  • lastElementChild：最后一个元素子节点
<body>
    <div id='divBox'>
        <!-- 我是注释节点 -->
        <p>我是第一个元素节点1</p>
        <p>我是第一个元素节点2</p>
        <p>我是第一个元素节点3</p>
    </div>
</body>
<script>
    // 获得父级元素
    let divBox = document.getElementById('divBox');

    // 获得最后一个子节点
    console.log(divBox.lastChild);//#text

    // 获得最后一个元素子节点
    console.log(divBox.lastElementChild);// <p>我是第一个元素节点3</p>
</script>

获取父节点

  • parentElement：获取父节点
<!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>
    <script>
        window.onload = function () {
            // 1. 先获取当前的子元素
            let pbox1 = document.getElementById('pbox1');
            let pbox2 = document.getElementById('pbox2');
            let pbox3 = document.getElementById('pbox3');

            // 2. 获得父节点
            console.log(pbox1.parentElement);
            console.log(pbox2.parentElement);
            console.log(pbox3.parentElement);
        }
    </script>
</head>
<body>
    <div name="我是他们的爹爹">
        <p id="pbox1">你是我爹爹吗?</p>
        <p id="pbox2">你是我爹爹吗?</p>
        <p id="pbox3">你是我爹爹吗?</p>
    </div>
</body>
</html>

克隆节点

  • cloneNode():浅克隆–只克隆标签本身并没有内容
  • cloneNode(true)： 深克隆 克隆的时候会将所有的属性一起复制
    • 注意id不能重复
<!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>
    <script>
        window.onload = function () {
            // 1. 获得元素
            let clone = document.getElementById('clone');
            let pbox = document.getElementById('pbox1');

            // 2. 给clone按钮设置点击事件
            let i = 2;
            clone.onclick = function () {
                // 3.开始克隆元素
                // let newBox = pbox.cloneNode();// 浅克隆--只克隆标签本身并没有内容
         	let newBox = pbox.cloneNode(true);// 深克隆
                // 克隆的时候会将所有的属性一起复制
                // 注意id不能重复
                newBox.id = 'pbox'+i;
                i++;
                
                // 4. 将克隆的元素,追加到结构中
                document.body.appendChild(newBox);
            }
        }
    </script>
</head>
<body>
    <button id="clone">开始克隆</button>
    <hr>
    <p id="pbox1">
        测试文本
    </p>
</body>
</html>

元素的增删插换

  • createElement()：创建一个元素（只有document可以创建新的元素）
  • appendChild():追加一个元素
<body>
    <button id="create">开始造起来</button>
    <script>
        let createBtn = document.getElementById('create');
        let index = 1;
        createBtn.onclick = function () {
            // 创建新的元素：createElement();
            // 只有document可以创建新的元素
            let newBox = document.createElement('div'); //创建一个空的div
            newBox.innerText = '这是一个寂寞的' + index + '天';
            index++;

            // 将新元素追加到body中
            document.body.appendChild(newBox);
        }
    </script>
</body>
  • removeChild(删除元素)：如果要删除某个元素，必须由父元素来删除
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <p>测试文本0</p>
        <p>测试文本1</p>
        <p>测试文本2</p>
        <p>测试文本3</p>
        <p>测试文本4</p>
        <p>测试文本5</p>
    </div>
    <br>
    <button id="remove">删除元素</button>
    <script>
        let removeBtn = document.getElementById('remove');
        let pArr = document.getElementsByTagName('p');
        let box = document.getElementById('box');
        // 如果要删除某个元素，必须由父元素来删除
        // 父元素，removeChild(删除元素)
        removeBtn.onclick = function () {
            // 删除指定的元素
            // box.removeChild(pArr[3]);
            // 删除所有的子元素
            // let num = pArr.length;
            // for (let i = 0; i < num.length; i++) {
            //     box.removeChild(pArr[0]);
            // }
            // 拓展删除所有子元素
            // box.innerHTML = '';
            // let num = pArr.length;
            // for (let i = pArr.length; i > 0; i--) {
            //     box.removeChild(pArr[0]);
            // }

        }
    </script>
</body>

</html>
  • 插入元素
    • insertBefore(要插入的元素, tag)：在tag之前插入
    • 在元素之后插入先找到它下个元素，在其下个元素之前插入
  • 替换元素
  • replaceChild(新元素, 旧元素)：
<body>
    <div id="box">
        <p id="tag">
            这是要替换的文本
        </p>
    </div>
    <hr>
    <button id="replace">替换元素</button>

</body>
<script>
    let replace = document.getElementById('replace');
    let pBox = document.getElementById('tag');
    let box = document.getElementById('box');
    replace.onclick = function () {
        let newBox = document.createElement('div');
        newBox.innerText = '替换后的文本';
        box.replaceChild(newBox, pBox);
    }
</script>


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <p>文本一</p>

        <p id="tag">文本二</p>

        <p>文本三</p>
        <hr>
        <button id="before">在前面补充</button>
        <button id="after">在前面补充</button>

    </div>
    <script>
        let tag = document.getElementById('tag');
        let before = document.getElementById('before');
        let after = document.getElementById('after');
        let box = document.getElementById('box');

        // 2.给before按钮设置点击事件
        before.onclick = function () {
            let newBox = document.createElement('p');
            newBox.innerText = '创建的文本1';
            new.insertBefore(newBox, tag);

        }
        // 3.给after按钮设置点击事件
        after.onclick = function () {
            let newBox = document.createElement('p');
            newBox.innerText = '创建的文本二';
            let nextElm = tag.nextElementSibling;//下一个元素节点
            box.insertBefore(newBox, nextElm);
        }
    </script>
</body>

</html>

动态获取与静态获取

  • get获取的元素：动态获取，当文档结构发生改变，获取的内容也会改变（地址引用）
  • query获得的元素，静态获取，当文档结构发生改变，对已经改变的内容没有影响（值引用）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <p>这是一个寂寞的天0</p>
        <p>这是一个寂寞的天1</p>
        <p>这是一个寂寞的天2</p>
        <p>这是一个寂寞的天3</p>
        <p>这是一个寂寞的天4</p>
        <p>这是一个寂寞的天5</p>
    </div>
    <br>
    <button id="remove">删除元素</button>
    <script>
        let removeBtn = document.getElementById('remove');
        let pArr1 = document.getElementById('p'); //get系列方法  
        // get获取的元素：动态获取，当文档结构发生改变，获取的内容也会改变（地址引用）

        let pArr = document.querySelectorAll('p'); //query系列方法
        // query获得的元素，静态获取，当文档结构发生改变，对已经改变的内容没有影响（值引用）

        let box = document.getElementById('box');
        // 如果要删除某个元素，必须由父元素来删除
        // 父元素，removeChild(删除元素)
        removeBtn.onclick = function () {
            // 使用动态结构
            let num = pArr.length;
            for (let i = 0; i < pArr1.length; i++) {
                box.removeChild(pArr1[0])
            }

            // 使用静态结构
            for (let i = 0; i < pArr.length; i++) {
                box.removeChild(pArr[i]);
            }

        }
    </script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/weixin_44757417/article/details/107599056
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022