• 〖大前端 - 基础入门三大核心之JS篇㊱〗- JavaScript 的DOM节点操作

    • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！
    • 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作，目前在公司担任研发部门CTO。
    • 荣誉：2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。

    文章目录

    ⭐ 节点操作

    🌟 节点的创建、移除、克隆

    ✨ 节点的创建

    document.createElement()方法用于创建一个指定tagname的HTML元素

    但是新创建出来的节点是“孤儿节点”，它并没有被挂载到DOM树上，我们无法看见它

    必须继续使用appendChild()或insertBefore()方法将孤儿节点插入到DOM树上。

    appendchild()，就是追加一个子节点的意思。任何已经在DOM树上的节点，都可以调用appendChild()方法，它可以将孤儿节点挂载到它的内部，成为它的最后一个子节点。

    语法：父节点.appendChild(孤儿节点)；

    insertBefore()，就是在前方插入节点的意思。任何已经在DOM树上的节点，都可以调用insertBefore()方法，它可以将孤儿节点挂载到它的内部，成为它的“标杆子节点”之前的节点

    语法：父节点.insertBefore(孤儿节点，标杆节点);

    示例代码：

    <body>
    <div id="box">
        <p>段落1p>
        <p>段落2p>
        <p>段落3p>
    div>
    <script>
        //定义节点变量，获取div标签
        var oBox = document.getElementById('box');
        //定义节点变量，获取p标签
        var oPs = oBox.getElementsByTagName('p');

        //创建一个孤儿节点p
        var oP = document.createElement('P');
        oP.innerHTML = '测试'  //修改孤儿节点的内容 
        oBox.appendChild(oP);  //上树--加到最后一个子节点
        
        //再创建一个孤儿节点p
        var oP1 = document.createElement('p');
        oP1.innerHTML = '插入标杆节点之前';  //修改孤儿节点的内容
        oBox.insertBefore(oP1, oPs[1]);  //上树--插入到编号为1的p标签之前
        
    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

    image-20230401110924734

    ✨ 节点创建操作实例

    题目一：请动态创建出一个20行12列的表格

    题目分析：使用for循环语句，循环创建20次tr，循环内嵌套一个for循环，创建12次td

    代码如下：

    <body>
    <div id="box">

    div>

    <script>
        //请动态创建出一个20行12列的表格
        var oBox = document.getElementById('box');

        //创建节点---table
        var oTable = document.createElement('table');
        oBox.appendChild(oTable);  //插入table标签

        //创建节点---tr
        for (var i = 1; i <= 20; i++) {
            var oTr = document.createElement('tr');
            oTable.appendChild(oTr);
            //创建节点---td
            for(var j = 1; j <= 12; j++) {
                var oTd = document.createElement('td');
                oTr.appendChild(oTd);
            }
        }
    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

    image-20230401113342122

    题目二：请制作九九乘法表（利用DOM节点操作）

    题目分析：和上面的题目一样，创建表格，然后在表格里面修改内容，例如1*1=2…；需要注意的是九九乘法表不是一个方方正正的表格，而是每一行的列数都比前一行多一个，所以循环嵌套的时候，循环的次数要思考清楚

    代码如下：

    <body>
    <div id='box'>div>
    <script>
        //请制作九九乘法表（利用DOM节点操作）
        var oBox = document.getElementById('box');

        //创建节点---table
        var oTable = document.createElement('table');
        oBox.appendChild(oTable);

        //创建节点---tr
        for (var i = 1; i <= 9; i++) {
            var oTr = document.createElement('tr');
            oTable.appendChild(oTr);
            //创建节点---td
            for (var j = 1; j <= i; j++) {  //数以j的循环次数
                var oTd = document.createElement('td');
                oTd.innerHTML = j + '*' + i + '=' + i*j;  //填入内容
                oTr.appendChild(oTd);
            }
        }
    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

    image-20230401115011271

    ✨ 节点的移动

    如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数，这个节点将会被移动

    语法：新父节点.appendChild(已经有父亲的节点);

    语法：新父节点.insertBefore(已经有父亲的节点，标杆子节点);

    这意味着一个节点不能同时位于DOM树的两个位置

    示例代码：

    用appenChild()移动：

    <body>
    <div id="box1">
        <p id="para">我是段落p>
    div>
    <div id="box2">div>
    <script>
        //将#box1中的p标签移动到#box2中
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var para = document.getElementById('para');

        //用appendChild()移动
        box2.appendChild(para);
    script>
body>

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

    image-20230401134113903

    用insertBefore()移动：

    <body>
    <div id="box1">
        <p id="para">我是段落p>
    div>
    <div id="box2">
        <p>我是box2原有段落p>
        <p>我是box2原有段落p>
        <p>我是box2原有段落p>
        <p>我是box2原有段落p>
    div>
    <script>
        //将#box1中的p标签移动到#box2中
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var para = document.getElementById('para');
        var ps_inbox2 = box2.getElementsByTagName('p');

        //用insertBefore()移动
        box2.insertBefore(para, ps_inbox2[0]);
    script>
body>

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

    image-20230401134426194

    ✨ 节点的删除

    removeChild()方法从DOM中删除一个子节点

    语法：父节点.removeChild(要删除的子节点)

    注意：节点不能主动删除自己，必须由父节点删除它

    示例代码：

    <body>
    <div id="box">
        <p>我是段落0p>
        <p>我是段落1p>
        <p>我是段落2p>
    div>
    <script>
        //删除#box里的第二个段落
        var box = document.getElementById('box');
        var ps = box.getElementsByTagName('p');

        box.removeChild(ps[1]);
    script>
body>

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

    image-20230401135153417

    ✨ 节点的克隆

    cloneNode()方法可以克隆节点，克隆出的节点是“孤儿节点”

    语法：var 孤儿节点 = 老节点.cloneNode();

    还可以往cloneNode()方法里传入参数一个布尔值参数表示是否采用深度克隆，传入true则深度克隆，该节点的所有后代节点都会被克隆；如果为false,则只克隆该节点本身。

    语法：var 孤儿节点 = 老节点.cloneNode(true);

    示例代码：

    <body>
    <div id="box1">
        <ul>
            <li>pythonli>
            <li>javali>
            <li>cli>
            <li>javascriptli>
        ul>
    div>
    <div id="box2">div>
    <script>
        //将#box1中的列表克隆到box2中
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var ul_inbox1 = box1.getElementsByTagName('ul')[0];  //注意用getElementsByTagName得到的是一个数组，要用下标才能取到里面的值

        //克隆
        var ul = ul_inbox1.cloneNode();
        //上树
        box2.appendChild(ul);
    script>
body>

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

    image-20230401143423595

  • 相关阅读:
    java毕业设计校园资料分享平台mybatis+源码+调试部署+系统+数据库+lw
    Docker一键停止和删除所有容器
    javascript二维数组按指定要求进行对象合并遍历的算法开发(2)：计算数组中某元素出现的次数
    Day656.数据传输加密问题 -Java业务开发常见错误
    Java项目：SSM的KTV管理系统
    Shiro之基本使用
    推荐几款MySQL图形化客户端管理工具
    转变命运！揭秘反转链表的神奇算法！
    多线程死锁案例
    OpenCV-Python快速入门（十五）：霍夫变换
  • 原文地址：https://blog.csdn.net/weixin_42250835/article/details/134472630