0
0

【JavaScript-节点操作】如何进行节点的删除以及动态表格的创建，了解三种动态元素的创建区别

前言

  • 💂 个人主页：Aic山鱼
  • 个人社区：山鱼社区
  • 💬 如果文章对你有帮助，欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

本篇介绍如何进行对删除节点的操作和使用，以及对动态表格的创建和区别分别进行了相应的操作展现（附相关代码）

1.如何删除节点

使用**node.removeChild()**方法从DOM中删除一个子节点,返回删除的节点。

1.1删除奥特曼案例

  1. <body>
  2.     <button>删除</button>
  3.     <ul>
  4.         <li>迪迦</li>
  5.         <li>艾迪</li>
  6.         <li>高斯</li>
  7.     </ul>
  8.     <script>
  9.         // 获取元素
  10.         var ul = document.querySelector('ul');
  11.         // 点击按钮依次删除奥特曼
  12.         var but = document.querySelector('button');
  13.         but.onclick = function () {
  14.             if (ul.children.length == 0) {
  15.                 this.disabled = true;
  16.                 alert('全都删无了！我还怎么相信光啊！')
  17.             } else {
  18.                 ul.removeChild(ul.children[0]);
  19.             }
  20.         }
  21.     </script>
  22. </body><body>
  23.     <button>删除</button>
  24.     <ul>
  25.         <li>迪迦</li>
  26.         <li>艾迪</li>
  27.         <li>高斯</li>
  28.     </ul>
  29.     <script>
  30.         // 获取元素
  31.         var ul = document.querySelector('ul');
  32.         // 点击按钮依次删除奥特曼
  33.         var but = document.querySelector('button');
  34.         but.onclick = function () {
  35.             if (ul.children.length == 0) {
  36.                 this.disabled = true;
  37.                 alert('全都删无了！我还怎么相信光啊！')
  38.             } else {
  39.                 ul.removeChild(ul.children[0]);
  40.             }
  41.         }
  42.     </script>
  43. </body>

1.2删除留言案例

在上篇文章中也实现了留言板的功能，这次就把功能完善一下，删除不当留言

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         li {
  11.             list-style: none;
  12.             width: 200px;
  13.             margin-top: 10px;
  14.             background-color: rgb(176, 231, 250);
  15.         }
  17.         textarea {
  18.             resize: none;
  19.             width: 300px;
  20.             height: 150px;
  21.             border: 1px solid blue;
  22.         }
  24.         li a {
  25.             float: right;
  26.         }
  27.     </style>
  28. </head>
  30. <body>
  31.     <textarea name="" id="" cols="30" rows="10"></textarea>
  32.     <button>发布</button>
  33.     <ul>
  35.     </ul>
  36.     <script>
  37.         // 获取元素
  38.         var but = document.querySelector('button');
  39.         var text = document.querySelector('textarea');
  40.         var ul = document.querySelector('ul');
  41.         // 注册事件
  42.         but.onclick = function () {
  43.             if (text.value == '') {
  44.                 alert('您还没有输入呢？')
  45.                 return false;
  46.             }
  47.             else {
  48.                 // 1.创建元素
  49.                 var li = document.createElement('li');
  50.                 li.innerHTML = text.value + "<a href='javascrpit:;'>删除</a>";
  51.                 // 2.添加元素
  52.                 // ul.appendChild(li);
  53.                 ul.insertBefore(li, ul.children[0]);
  54.                 // 点击发布后使文本域内的value为空
  55.                 text.value = '';
  56.                 // 3.删除留言
  57.                 var as = document.querySelectorAll('a');
  58.                 for (var i = 0; i < as.length; i++) {
  59.                     as[i].onclick = function () {
  60.                         // 删除的是li所以也就是删除的是a的父亲li，这里的li就是 this.parentNode
  61.                         ul.removeChild(this.parentNode);
  62.                     }
  64.                 }
  65.             }
  66.         }
  67.     </script>
  68. </body>
  70. </html>

2.复制节点

node. cloneNode ()方法返回调用该方法的节点的一个副本。也称为克隆节点或者是拷贝节点
node. cloneNode()括号为空或者里面是false浅拷贝只复制标签不复制里面的内容 node . cloneNode(true)括号为true深拷贝复制标签复制里面的内容

3.动态表格的创建

3.1思路导向

①使用js动态生成。先进行自定义数据，数据采取对象形式存储。

②所有的数据都是放到tbody里面的行里面。

③因为行很多,我们需要循环创建多个行(对应多少人)

④每个行里面又有很多单元格(对应里面的数据) , 继续使用循环创建多个单元格，并且把数据存入里面(双重for循环)

⑤最后一列单元格是删除,需要单独创建单元格。

注： 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。tbody 元素应该与 thead 和 tfoot 元素结合起来使用。

3.2相关代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         a {
  11.             text-decoration: none;
  12.             color: brown;
  13.         }
  15.         table {
  16.             width: 500px;
  17.             height: 100px;
  18.             border-collapse: collapse;
  19.             text-align: center;
  20.         }
  22.         thead th {
  23.             width: 100px;
  24.             border: 1px solid black;
  25.         }
  27.         thead tr {
  29.             height: 40px;
  30.             background-color: #ccc;
  31.         }
  33.         tr td {
  34.             border: 1px solid black;
  35.         }
  36.     </style>
  37. </head>
  39. <body>
  40.     <table>
  41.         <thead>
  42.             <tr>
  43.                 <th>姓名</th>
  44.                 <th>年龄</th>
  45.                 <th>性别</th>
  46.                 <th>班级</th>
  47.                 <th>操作</th>
  48.             </tr>
  49.         </thead>
  50.         <tbody>
  51.         </tbody>
  52.     </table>
  54.     <script>
  55.         var datas = [
  56.             {
  57.                 name: '山鱼',
  58.                 age: 12,
  59.                 sex: '男',
  60.                 class: '9-2',
  62.             },
  63.             {
  64.                 name: '山猪',
  65.                 age: 11,
  66.                 sex: '男',
  67.                 class: '9-2',
  69.             },
  70.             {
  71.                 name: '山猫',
  72.                 age: 10,
  73.                 sex: '男',
  74.                 class: '9-2',
  76.             }
  77.         ];
  78.         var tbody = document.querySelector('tbody');
  79.         for (var i = 0; i < datas.length; i++) {
  80.             var tr = document.createElement('tr');
  81.             tbody.appendChild(tr);
  82.             for (var k in datas[i]) {
  83.                 // 创建单元格
  84.                 var td = document.createElement('td');
  85.                 td.innerHTML = datas[i][k];
  86.                 tr.appendChild(td);
  87.             }
  88.             // for(var k in obj) {
  89.             // k得到的是属性名
  90.             // obj[k]得到是属性值
  91.             // 所以这里的属性值就是 datas[i][k]
  92.             // 创建操作行单元格
  93.             var td = document.createElement('td');
  94.             td.innerHTML = "<a href='javascript:;'>移除</a>"
  95.             tr.appendChild(td);
  97.         }
  98.         // 点击'删除'，把tr删除
  99.         var as = document.querySelectorAll('a');
  100.         for (var i = 0; i < as.length; i++) {
  101.             as[i].onclick = function () {
  102.                 tbody.removeChild(this.parentNode.parentNode);
  103.             }
  104.         }
  105.     </script>
  107. </body>
  109. </html>

3.3最终结果

4.三种动态元素创建区别

document.write ()

document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘element.innerHTM

是将内容写入某个DOM节点,不会导致页面全部重绘 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接) , 结构稍微复杂

document.createElement ()

创建多个元素效率稍低- 点点,但是结构更清晰

总的来说，innerHTML的效率要比**document.createElement ()**高

点赞👍：您的赞赏是我前进的动力！
收藏⭐：您的支持我是创作的源泉！
评论✍：您的建议是我改进的良药！
山鱼🦈的个人社区:欢迎大家加—— 山鱼社区

标签： html 前端 javascript
本文转载自: https://blog.csdn.net/zhaochen1127/article/details/126840654
版权归原作者 Aic山鱼 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【JavaScript-节点操作】如何进行节点的删除以及动态表格的创建，了解三种动态元素的创建区别”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？