19 【节点的增删改查】

于 2022-08-24 12:08:14 发布
阅读量303 收藏
点赞数
分类专栏： javaScript学习笔记 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DSelegent/article/details/126502000
版权

22.节点的增删改查

22.1 节点的创建

document.createElement方法用来生成元素节点，并返回该节点。

var newDiv = document.createElement('div');

createElement方法的参数为元素的标签名，即元素节点的tagName属性，对于 HTML 网页大小写不敏感，即参数为div或DIV返回的是同一种节点。如果参数里面包含尖括号（即<和>）会报错。

document.createElement('<div>');
// DOMException: The tag name provided ('<div>') is not a valid name

注意，document.createElement的参数可以是自定义的标签名。

document.createElement('foo');

22.2 “孤儿节点”

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

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

22.2.1 appendChild()

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

父节点.appendChild(孤儿节点);

【小案例】

<!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>
    </div>
    <script>
        var oBox = document.getElementById('box');
        // 创建孤儿节点
        var oP = document.createElement('p');
        // 设置内部文字
        oP.innerText = '我是新来的';
        // 上树
        oBox.appendChild(oP);
    </script>
</body>

</html>

22.2.2 insertBefore()

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

父节点.insertBefore(孤儿节点, 标杆节点);

【小案例】

<!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>
    </div>
    <script>
        var oBox = document.getElementById('box');
        var oPs = oBox.getElementsByTagName('p');
        // 创建孤儿节点
        var oP = document.createElement('p');
        // 设置内部文字
        oP.innerText = '我是新来的';
        // 上树
        oBox.insertBefore(oP, oPs[1]);
    </script>
</body>

</html>

22.3 节点创建小案例

【动态创建一个20行12列的表格】

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            width: 20px;
            height: 20px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <table id="mytable"></table>

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

        for (var i = 0; i < 20; i++) {
            // 创建了新的 tr 标签
            var tr = document.createElement('tr');
            for (var j = 0; j < 12; j++) {
                // 创建了新的 td 标签
                var td = document.createElement('td');
                // 让 tr 追加 td 标签
                tr.appendChild(td);
            }
            // 让 mytable 追加 tr 标签
            mytable.appendChild(tr);
        }
    </script>
</body>

</html>

【九九乘法表】

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            width: 80px;
            height: 30px;
            padding-left: 10px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <table id="mytable"></table>

    <script>
        // 请创建九九乘法表
        var mytable = document.getElementById('mytable');

        for (var i = 1; i <= 9; i++) {
            // 创建了新的 tr 标签
            var tr = document.createElement('tr');
            for (var j = 1; j <= i; j++) {
                // 创建了新的 td 标签
                var td = document.createElement('td');
                // 设置 td 内部的文字
                td.innerText = i + '×' + j + '=' + (i * j);
                // 让tr追加 td 标签
                tr.appendChild(td);
            }
            // 让 mytable 追加 tr 标签
            mytable.appendChild(tr);
        }
    </script>
</body>

</html>

22.4 移动节点

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

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

新父节点.insertBefore(已经有父亲的节点, 标杆子节点);

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

【小案例】

<!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="box1">
        <p id="para">我是段落</p>
    </div>

    <div id="box2">
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
    </div>

    <script>
        var box2 = document.getElementById('box2');
        var para = document.getElementById('para');
        var ps_inbox2 = box2.getElementsByTagName('p');

        box2.insertBefore(para, ps_inbox2[2]);
    </script>
</body>

</html>

22.5 删除节点

删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。

父节点.removeChild(子节点)
删除指定的子节点
推荐方式：子节点.parentNode.removeChild(子节点)

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点

父节点.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>我是p节点0</p>
        <p>我是p节点1</p>
        <p>我是p节点2</p>
    </div>

    <script>
        var box = document.getElementById('box');
        var the_first_p = box.getElementsByTagName('p')[0];

        box.removeChild(the_first_p);
    </script>
</body>

</html>

结论：removeChild 删除节点时一定是由父子关系。

22.6 替换节点

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法：

node.replaceChild (newnode,oldnew )

参数：

newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。

我们来看看下面的代码:

image-20220824115842888

效果: 将文档中的 Java 改为 JavaScript。

注意:

  1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。

  2. newnode 必须先被建立。

**replaceWith()**方法使用参数节点，替换当前节点。参数可以是元素节点，也可以是文本节点。

var span = document.createElement('span');
el.replaceWith(span);

上面代码中，el节点将被span节点替换。

22.7 克隆节点

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

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

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

参数是一个布尔值，表示是否采用深度克隆：如果为 true，则该节点的所有后代节点也会被克隆，如果为 false，则只克隆该节点本身。

【小案例】

<!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="box1">
        <ul>
            <li>牛奶</li>
            <li>咖啡</li>
            <li>可乐</li>
        </ul>
    </div>

    <div id="box2"></div>

    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var theul = box1.getElementsByTagName('ul')[0];

        // 克隆节点
        var new_ul = theul.cloneNode(true);
        box2.appendChild(new_ul);
    </script>
</body>
</html>

<!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="box1">
        <ul>
            <li>牛奶</li>
            <li>咖啡</li>
            <li>可乐</li>
        </ul>
    </div>

    <div id="box2"></div>

    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var theul = box1.getElementsByTagName('ul')[0];

        // 克隆节点
        var new_ul = theul.cloneNode(false);
        box2.appendChild(new_ul);
    </script>
</body>
</html>

22.8 总结

结论：

  • createElement 动态创建任意 DOM 节点
  • cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
  • appendChild 在末尾（结束标签前）插入节点
  • cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
  • insertBefore 在父节点中任意子节点之前插入新节点
  • removeChild 删除父节点的子节点
  • replaceChild 用一个孤儿节点替换父元素的子结点
  • replaceWith 用一个孤儿节点替换当前节点
DSelegent
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript 的基本语法
xiaogaoxiaoyuan的博客
01-07 1286
JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。 变量 概念 变量是对“值”的具名引用。变量就是为“值”起名，然后引用这个名字，就等同于引用这个值。变量的名字就是变量名 JavaScript 是一种动态类型语言，也就是说，变量的类型没有限制，变量可以随时更改类型。 var a = 1; a = 'hello'; 上面代码中，变量a起先被赋值为一个数值，后来又被重新赋值为一个字符串。第二次赋值的时候，因为变量a已经存在，所以不需要使用var命令。
element--el-cascader级联选择器，选择父节点勾选子节点，取消子节点不影响父节点
这里是迷阵的博客耶
04-18 1440
【代码】element--el-cascader级联选择器，选择父节点勾选子节点，取消子节点不影响父节点。
仿element-ui cascader级联选择器，layui cascader级联选择器
一夏coco的博客
09-09 4322
前言 由于项目中使用的不是vue的框架，但是又需要用到cascader组件，可惜找了很久都没有找到想要的效果，只好自己写组件了。为了力求和element-ui的级联效果一致，来自后端开发的我亲自操刀，哈哈哈！！ 使用示例 引入 <html> <head> <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/> <link r
js创建子元素：innerHTML与document.createElement()
wsj2311161832的博客
01-24 3723
建议（创建少量元素时）： 1.当父元素里没有其他元素，或者只添加少量行内元素或行内块元素时用innerHTML。 原因：此时不会破坏父元素内的整体布局，并且只添加如a标签、span标签这些行内元素时，用innerHTML更加快捷。 2.当父元素里已经布局了其他元素，并且添加有样式块元素时用document.createElement()。 原因：用document.createElement()创建元素插入顺序，可以通过elemen...
节点的增删改查
wangqiankun2010的专栏
04-29 783
节点的增删改查 div { border: #0099FF 1px solid; height: 60px; width: 120px; margin: 20px 0px 20px 20px; padding: 10px 0px 0px 20px; } #div_1 { background-color: #00FFFF; } #div_2 { background-colo
C#全能速查宝典
04-26
《C#全能速查宝典》共分为8章，分别介绍了C#语言基础、Windows窗体及常用控件、Windows高级控件、控件公共属性、方法及事件、数据库开发、文件、数据流与注册表、GDI+绘图技术和C#高级编程，共包含562个C#编程中常用...
MVC设计模式实战ExtJS4.2高级组件+SSH2在线投稿系统
01-15
22.用户管理，增删改查全部功能 23.文章主题管理，树形结构，动态添加、删除、修改节点（上） 24.文章主题管理，树形结构，动态添加、删除、修改节点（下） 25.个人信息模块、制作主题 26.ExtJS4.2个性主题随心制作...
javaOA办公系统模块设计方案.pdf
12-25
权限管理：点开⼆级菜单进⼊三级菜单显⽰ ⾓⾊(基础权限)和按钮权限 ⾓⾊(基础权限): 分⾓⾊组和⾓⾊,独⽴分配菜单权限和增删改查权限。（⼀个⽤户可以多个⾓⾊） 按钮权限: 给⾓⾊分配按钮权限。 2. 按钮管理：⾃...
python入门到高级全栈工程师培训 第3期 附课件代码
06-07
03 DOM节点的增删改查与属性设值 04 正反选练习 05 js练习之二级联动 06 jquery以及jquery对象介绍 07 jquery选择器 08 jquery的查找筛选器 09 jquery练习之左侧菜单 第44章 01 jquery属性操作之html,text,val方法...
【JavaScript 教程】DOM——Document 节点
web前端开发
05-28 372
作者 | 阮一峰1、概述document节点对象代表整个文档，每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入...
JS操作节点的增删改查!(重要)以及事件流
weixin_54902466的博客
06-15 1148
增删改查-事件流!一 js节点的增删改查!1.插入节点概念方法 - 创建 - 插入注意代码演示2.删除节点概念语法:注意-没有父元素删除不成功!代码演示3.查找节点的方法1.通过子元素找到父元素2.通过父元素找到子元素代码演示兄弟之间的查找4.替换节点二 事件流1. 捕获概念使用代码演示2.冒泡-默认存在的概念代码演示3.阻止事件默认行为解释语法代码演示4.事件委托概念前提(父子同事件)以及本质代码演示 一 js节点的增删改查! 增(插入、复制)、删、改(替换)、查 1.插入节点 概念 即创造出一个新的网页
JavaScript参考DOM部分
05-12 1200
目录 DOM完整版 DOM 介绍 节点 节点树 Node接口 属性 方法 NodeList 接口，HTMLCollection 接口 介绍 NodeList....
【ztree系列】节点的增删改
热门推荐
Cherie
01-09 4万+
一直以来，项目中用到的树形结构，都是用来读取显示数据、或者控制页面上其它内容的展示。对于树数据源的修改，一般由其它模块来完成，这样可以让功能单一化，不必让树的职责过多，但是却不得不再多加一步了。为了给用户提供最大的便利，省去这一步的麻烦，我们可以利用它的图标增删改功能，这样可以给用户最大的选择余地，也会让我们的系统更加的灵活。 一、简述        在做之前，先简单介绍下我们要实现的功能。首
JavaScript——属性节点的增删改查
Qjy_985211的博客
11-11 332
页面源代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h2 id
JS原生对节点的增删改查
little_____white的博客
07-09 1300
1.内置对象 String(两种创建方式，直接量和new方式) Number(类似java中的整形和浮点型，不区分小数点) Boolean Array（中括号，两种创建方式；new方式创建可以不指定数组长度） Math Date（new方式创建，有无参和带参两种） RegExp（用来匹配正则表达式，两种创建方式） Function var reg=/正则表达式/[范围]; var reg=n...
链表的增删改查c语言
最新发布
03-19
下面是链表的增删改查操作的介绍： 1. 增加节点： - 在链表头部插入节点：创建一个新节点，将新节点的指针指向原来的头节点，然后将头指针指向新节点。 - 在链表尾部插入节点：遍历链表，找到最后一个节点，将其...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DSelegent

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值