• 【web】JavaScript——Web APIs笔记小结 dom 样式属性（自定义属性+节点操作部分）

      期中考完回来更新了 

      感觉进度真的好慢T^T，已经摸了快一个月的鱼了qwq！！！

    来源：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts

    目录

    ⑦H5自定义属性

    V.节点操作

    ①节点层级

    ※※父级节点

    ※※子节点

    ※※※※获取所有子节点 

    ※※※※获取第一个孩子和最后一个孩子

    ❀ firstChild / lastChild

     ❀ firstElementChild / lastElementChild​编辑

     ❀ children 伪数组 → 实际开发写法

     ※※※※ 下拉菜单

     ※※ 兄弟节点

    ②创建、添加节点

     ※※ 简单版发布留言案例

    ※※※※ 我写的

    ※※※※ 值得一提的小细节

    ※※※※ pink 的

    ———————————————以下是第三天—————————————————

    ③删除节点

     ※※ 删除留言案例

     ※※※※我写的

    ※※※※ pink 的

    ※※※※ MCD 里的完整介绍

    ✿ 一些用法样例

    ④复制节点

    ⑤动态生成表格

    ※※ 我写的

    ※※※※ 直接套用删除节点案例的模板

     ※※※※ 综合之前的创建添加和删除写（正确版）

    ✿ MCD 里的 for…in 解释

    ※※ pink 的

    ⑦H5自定义属性

     

    V.节点操作

     

    ①节点层级

    利用DOM树可以把节点划分为不同的层级关系，常见的是 父子兄层级关系

    ※※父级节点

    ※※子节点

    ※※※※获取所有子节点 

     

     

    ※※※※获取第一个孩子和最后一个孩子

    ❀ firstChild / lastChild

    所以下面这段代码的结果都是输出文本节点  #text 

    1. //在body里的部分
    2.   
    3.     <ol>
    4.         <li>我是li1li>
    5.         <li>我是li2li>
    6.         <li>我是li3li>
    7.         <li>我是li4li>
    8.         <li>我是li5li>
    9.     ol>
    10.     <script>
    11.         var ol = document.querySelector('ol');
    12.         console.log(ol.firstChild);//第一个
    13.         console.log(ol.lastChild);//最后一个
    14.     script>

     ❀ firstElementChild / lastElementChild

    所以下面这段代码的结果都是输出元素节点  

  • …
    •   

    1.     <ol>
    2.         <li>我是li1li>
    3.         <li>我是li2li>
    4.         <li>我是li3li>
    5.         <li>我是li4li>
    6.         <li>我是li5li>
    7.     ol>
    8.     <script>
    9.         var ol = document.querySelector('ol');
    10.         console.log(ol.firstElementChild);
    11.         console.log(ol.lastElementChild);
    12.     script>

     

     ❀ children 伪数组 → 实际开发写法

    直接上代码：

    1.     <ol>
    2.         <li>我是li1li>
    3.         <li>我是li2li>
    4.         <li>我是li3li>
    5.         <li>我是li4li>
    6.         <li>我是li5li>
    7.     ol>
    8.     <script>
    9.         var ol = document.querySelector('ol');
    10.         console.log(ol.children); //所有
    11.         console.log(ol.children[0]); //第一个
    12.         console.log(ol.children[ol.children.length - 1]); //最后一个
    13.     script>

     ※※※※ 下拉菜单

    这个案例比较简单，所以没有自己写owo，思路是循环绑定事件

    1. html>
    2. <html lang="en">
    3.  
    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>Documenttitle>
    9.     <style>
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.         
    15.         li {
    16.             list-style-type: none;
    17.         }
    18.         
    19.         a {
    20.             text-decoration: none;
    21.             font-size: 14px;
    22.         }
    23.         
    24.         .nav {
    25.             margin: 100px;
    26.         }
    27.         
    28.         .nav>li {
    29.             position: relative;
    30.             float: left;
    31.             width: 80px;
    32.             height: 41px;
    33.             text-align: center;
    34.         }
    35.         
    36.         .nav li a {
    37.             display: block;
    38.             width: 100%;
    39.             height: 100%;
    40.             line-height: 41px;
    41.             color: #333;
    42.         }
    43.         
    44.         .nav>li>a:hover {
    45.             background-color: #eee;
    46.         }
    47.         
    48.         .nav ul {
    49.             display: none;
    50.             position: absolute;
    51.             top: 41px;
    52.             left: 0;
    53.             width: 100%;
    54.             border-left: 1px solid #FECC5B;
    55.             border-right: 1px solid #FECC5B;
    56.         }
    57.         
    58.         .nav ul li {
    59.             border-bottom: 1px solid #FECC5B;
    60.         }
    61.         
    62.         .nav ul li a:hover {
    63.             background-color: #FFF5DA;
    64.         }
    65.     style>
    66. head>
    67.  
    68. <body>
    69.     <ul class="nav">
    70.         <li>
    71.             <a href="#">微博a>
    72.             <ul>
    73.                 <li>
    74.                     <a href="">私信a>
    75.                 li>
    76.                 <li>
    77.                     <a href="">评论a>
    78.                 li>
    79.                 <li>
    80.                     <a href="">@我a>
    81.                 li>
    82.             ul>
    83.         li>
    84.         <li>
    85.             <a href="#">微博a>
    86.             <ul>
    87.                 <li>
    88.                     <a href="">私信a>
    89.                 li>
    90.                 <li>
    91.                     <a href="">评论a>
    92.                 li>
    93.                 <li>
    94.                     <a href="">@我a>
    95.                 li>
    96.             ul>
    97.         li>
    98.         <li>
    99.             <a href="#">微博a>
    100.             <ul>
    101.                 <li>
    102.                     <a href="">私信a>
    103.                 li>
    104.                 <li>
    105.                     <a href="">评论a>
    106.                 li>
    107.                 <li>
    108.                     <a href="">@我a>
    109.                 li>
    110.             ul>
    111.         li>
    112.         <li>
    113.             <a href="#">微博a>
    114.             <ul>
    115.                 <li>
    116.                     <a href="">私信a>
    117.                 li>
    118.                 <li>
    119.                     <a href="">评论a>
    120.                 li>
    121.                 <li>
    122.                     <a href="">@我a>
    123.                 li>
    124.             ul>
    125.         li>
    126.     ul>
    127.     <script>
    128.         // 获取元素
    129.         var nav = document.querySelector('.nav');
    130.         var lis = nav.children; //获取4个li
    131.         //循环注册事件
    132.         for (var i = 0; i < lis.length; i++) {
    133.             lis[i].onmouseover = function() {
    134.                 this.children[1].style.display = 'block';
    135.             }
    136.             lis[i].onmouseout = function() {
    137.                 this.children[1].style.display = 'none';
    138.             }
    139.         }
    140.     script>
    141. body>
    142.  
    143. html>

     ※※ 兄弟节点

    感觉跟 nextchild 挺像的 

    代码部分：

    1. //body里的部分
    2.     <div>我是divdiv>
    3.     <span>我是spanspan>
    4.     <script>
    5.         var div = document.querySelector('div');
    6.         //下一个兄弟节点 包含元素节点、文本节点等等
    7.         console.log(div.nextSibling);
    8.         //上一个兄弟节点
    9.         console.log(div.previousSibling);
    10.         //下一个兄弟元素节点
    11.         console.log(div.nextElementSibling);
    12.         //上一个兄弟元素节点
    13.         console.log(div.previousElementSibling);
    14.     script>

    ②创建、添加节点

    代码截图：

     ※※ 简单版发布留言案例

    ※※※※ 我写的

    vertical-align忘了的戳这里 → vertical-align（之前写过的博客kkk）

    1. html>
    2. <html lang="en">
    3.  
    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>Documenttitle>
    9.     <style>
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.         
    15.         div {
    16.             position: relative;
    17.             margin-top: 50px;
    18.             left: 50%;
    19.             margin-left: -150px;
    20.             width: 300px;
    21.             height: auto;
    22.         }
    23.         
    24.         textarea {
    25.             width: 200px;
    26.             height: 100px;
    27.             border: 1px solid dodgerblue;
    28.             outline: none;
    29.             resize: none;
    30.             vertical-align: bottom;
    31.         }
    32.         
    33.         ul {
    34.             margin-top: 50px;
    35.         }
    36.         
    37.         li {
    38.             width: 300px;
    39.             padding: 5px;
    40.             background-color: lightskyblue;
    41.             font-size: 14px;
    42.             margin: 15px 0;
    43.         }
    44.     style>
    45. head>
    46.  
    47. <body>
    48.     <div>
    49.         <textarea>textarea>
    50.         <button>发布button>
    51.         <ul>ul>
    52.     div>
    53.     <script>
    54.         var btn = document.querySelector('button');
    55.         var text = document.querySelector('textarea');
    56.         var ul = document.querySelector('ul');
    57.         btn.onclick = function() {
    58.             if (text.value == '') {
    59.                 alert('没有输入内容！');
    60.                 return false;
    61.             } else {
    62.                 var li = document.createElement('li');
    63.                 li.innerHTML = text.value;
    64.                 //插到后面
    65.                 ul.appendChild(li);
    66.                 //插到前面
    67.                 ul.insertBefore(li, ul.children[0]);
    68.             }
    69.         }
    70.     script>
    71. body>
    72.  
    73. html>

    ※※※※ 值得一提的小细节

    上面的代码跑出来只有一个节点，并且是按insertBefore来的，我原来以为应该有两个节点的，后来查了查资料发现想错了，而且这一块pink讲的时候也没有提到，具体看下图：

    ※※※※ pink 的

    1. html>
    2. <html lang="en">
    3.  
    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>Documenttitle>
    9.     <style>
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.         
    15.         body {
    16.             padding: 100px;
    17.         }
    18.         
    19.         textarea {
    20.             width: 200px;
    21.             height: 100px;
    22.             border: 1px solid pink;
    23.             outline: none;
    24.             resize: none;
    25.         }
    26.         
    27.         ul {
    28.             margin-top: 50px;
    29.         }
    30.         
    31.         li {
    32.             width: 300px;
    33.             padding: 5px;
    34.             background-color: rgb(245, 209, 243);
    35.             color: red;
    36.             font-size: 14px;
    37.             margin: 15px 0;
    38.         }
    39.     style>
    40. head>
    41.  
    42. <body>
    43.     <textarea name="" id="">textarea>
    44.     <button>发布button>
    45.     <ul>
    46.  
    47.     ul>
    48.     <script>
    49.         // 1. 获取元素
    50.         var btn = document.querySelector('button');
    51.         var text = document.querySelector('textarea');
    52.         var ul = document.querySelector('ul');
    53.         // 2. 注册事件
    54.         btn.onclick = function() {
    55.             if (text.value == '') {
    56.                 alert('您没有输入内容');
    57.                 return false;
    58.             } else {
    59.                 // console.log(text.value);
    60.                 // (1) 创建元素
    61.                 var li = document.createElement('li');
    62.                 // 先有li 才能赋值
    63.                 li.innerHTML = text.value;
    64.                 // (2) 添加元素
    65.                 // ul.appendChild(li);
    66.                 ul.insertBefore(li, ul.children[0]);
    67.             }
    68.         }
    69.     script>
    70. body>
    71.  
    72. html>

    ———————————————以下是第三天—————————————————

    ③删除节点

    1. //body内的代码 
    2.    <button>删除button>
    3.     <ul>
    4.         <li>熊大li>
    5.         <li>熊二li>
    6.         <li>光头强li>
    7.     ul>
    8.     <script>
    9.         // 1.获取元素
    10.         var ul = document.querySelector('ul');
    11.         var btn = document.querySelector('button');
    12.         // 2. 删除元素  node.removeChild(child)
    13.         // ul.removeChild(ul.children[0]);
    14.         // 3. 点击按钮依次删除里面的孩子
    15.         btn.onclick = function() {
    16.             if (ul.children.length == 0) {
    17.                 this.disabled = true;
    18.             } else {
    19.                 ul.removeChild(ul.children[0]);
    20.             }
    21.         }
    22.     script>

     ※※ 删除留言案例

     ※※※※我写的

    搞了半天没成功。。最后发现原来删除部分一直没在btn绑定的事件里面orz

    1. html>
    2. <html lang="en">
    3.  
    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>Documenttitle>
    9.     <style>
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.         
    15.         div {
    16.             position: relative;
    17.             margin-top: 50px;
    18.             left: 50%;
    19.             margin-left: -150px;
    20.             width: 300px;
    21.             height: auto;
    22.         }
    23.         
    24.         textarea {
    25.             width: 200px;
    26.             height: 100px;
    27.             border: 1px solid dodgerblue;
    28.             outline: none;
    29.             resize: none;
    30.             vertical-align: bottom;
    31.         }
    32.         
    33.         ul {
    34.             margin-top: 50px;
    35.         }
    36.         
    37.         li {
    38.             width: 300px;
    39.             padding: 5px;
    40.             background-color: lightskyblue;
    41.             font-size: 14px;
    42.             margin: 15px 0;
    43.         }
    44.         
    45.         a {
    46.             float: right;
    47.         }
    48.     style>
    49. head>
    50.  
    51. <body>
    52.     <div>
    53.         <textarea>textarea>
    54.         <button>发布button>
    55.         <ul>ul>
    56.     div>
    57.     <script>
    58.         var btn = document.querySelector('button');
    59.         var text = document.querySelector('textarea');
    60.         var ul = document.querySelector('ul');
    61.         btn.onclick = function() {
    62.             if (text.value == '') {
    63.                 alert('没有输入内容！');
    64.                 return false;
    65.             } else {
    66.                 var li = document.createElement('li');
    67.                 li.innerHTML = text.value + "删除";
    68.                 //插到后面 ul.appendChild(li);
    69.                 //插到前面
    70.                 ul.insertBefore(li, ul.children[0]);
    71.             }
    72.             var a = document.querySelectorAll('a');
    73.             for (var i = 0; i < a.length; i++)
    74.                 a[i].onclick = function() {
    75.                     ul.removeChild(this.parentNode);
    76.                 }
    77.         }
    78.     script>
    79. body>
    80.  
    81. html>

    ※※※※ pink 的

    主要内容都是一样的，只是样式什么的有点区别

    1. html>
    2. <html lang="en">
    3.  
    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>Documenttitle>
    9.     <style>
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.         
    15.         body {
    16.             padding: 100px;
    17.         }
    18.         
    19.         textarea {
    20.             width: 200px;
    21.             height: 100px;
    22.             border: 1px solid pink;
    23.             outline: none;
    24.             resize: none;
    25.         }
    26.         
    27.         ul {
    28.             margin-top: 50px;
    29.         }
    30.         
    31.         li {
    32.             width: 300px;
    33.             padding: 5px;
    34.             background-color: rgb(245, 209, 243);
    35.             color: red;
    36.             font-size: 14px;
    37.             margin: 15px 0;
    38.         }
    39.         
    40.         li a {
    41.             float: right;
    42.         }
    43.     style>
    44. head>
    45.  
    46. <body>
    47.     <textarea name="" id="">textarea>
    48.     <button>发布button>
    49.     <ul>
    50.  
    51.     ul>
    52.     <script>
    53.         // 1. 获取元素
    54.         var btn = document.querySelector('button');
    55.         var text = document.querySelector('textarea');
    56.         var ul = document.querySelector('ul');
    57.         // 2. 注册事件
    58.         btn.onclick = function() {
    59.             if (text.value == '') {
    60.                 alert('您没有输入内容');
    61.                 return false;
    62.             } else {
    63.                 // console.log(text.value);
    64.                 // (1) 创建元素
    65.                 var li = document.createElement('li');
    66.                 // 先有li 才能赋值
    67.                 li.innerHTML = text.value + "删除";
    68.                 // (2) 添加元素
    69.                 // ul.appendChild(li);
    70.                 ul.insertBefore(li, ul.children[0]);
    71.                 // (3) 删除元素 删除的是当前链接的li  它的父亲
    72.                 var as = document.querySelectorAll('a');
    73.                 for (var i = 0; i < as.length; i++) {
    74.                     as[i].onclick = function() {
    75.                         // node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode;
    76.                         ul.removeChild(this.parentNode);
    77.                     }
    78.                 }
    79.             }
    80.         }
    81.     script>
    82. body>
    83.  
    84. html>

    ※※※※ MCD 里的完整介绍

    完整版戳这里 → MCD的node.removeChild介绍

    ✿ 一些用法样例

    ④复制节点

    代码截图：

    ⑤动态生成表格

    ※※ 我写的

    个人感觉可以有两种写法

    PS. 看完视频发现其实好像就一种来着，但是第一种已经写完了orz，所以还是放上来了

    ※※※※ 直接套用删除节点案例的模板

     

    但是达不到题目要求的 “ 动态 ” 效果，代码：

    1. html>
    2. <html lang="en">
    3.  
    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>Documenttitle>
    9.     <style>
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.         
    15.         table {
    16.             margin: 100px auto;
    17.             padding: 0;
    18.             width: 500px;
    19.             height: auto;
    20.             font-family: '楷体';
    21.             text-align: center;
    22.             border: 3px dodgerblue solid;
    23.             border-collapse: collapse;
    24.         }
    25.         
    26.         th,
    27.         td {
    28.             border: 2px dodgerblue solid;
    29.         }
    30.         
    31.         tr {
    32.             height: 30px;
    33.         }
    34.         
    35.         th {
    36.             font-size: 18px;
    37.             height: 30px;
    38.         }
    39.     style>
    40. head>
    41.  
    42. <body>
    43.     <table>
    44.         <thead>
    45.             <tr>
    46.                 <th>姓名th>
    47.                 <th>科目th>
    48.                 <th>成绩th>
    49.                 <th>操作th>
    50.             tr>
    51.         thead>
    52.         <tbody>
    53.             <tr>
    54.                 <td>小明td>
    55.                 <td>C语言td>
    56.                 <td>90td>
    57.                 <td><a href="javascript:;">删除a>td>
    58.             tr>
    59.             <tr>
    60.                 <td>小红td>
    61.                 <td>Javatd>
    62.                 <td>66td>
    63.                 <td><a href="javascript:;">删除a>td>
    64.             tr>
    65.             <tr>
    66.                 <td>小刚td>
    67.                 <td>线性代数td>
    68.                 <td>78td>
    69.                 <td><a href="javascript:;">删除a>td>
    70.             tr>
    71.             <tr>
    72.                 <td>小丽td>
    73.                 <td>汇编语言td>
    74.                 <td>70td>
    75.                 <td><a href="javascript:;">删除a>td>
    76.             tr>
    77.         tbody>
    78.     table>
    79.     <script>
    80.         var tb = document.querySelector('tbody');
    81.         var as = document.querySelectorAll('a');
    82.         for (var i = 0; i < as.length; i++) {
    83.             as[i].onclick = function() {
    84.                 console.log(this.parentNode.parentNode);
    85.                 tb.removeChild(this.parentNode.parentNode);
    86.             }
    87.         }
    88.     script>
    89. body>
    90.  
    91. html>

     ※※※※ 综合之前的创建添加和删除写（正确版）

    看完视频后发现刚开始想简单了qwq

    代码：（从标签开始，前面的都一样）

    1.         <tbody>tbody>
    2.     table>
    3.     <script>
    4.         // 数据部分
    5.         var trs = [{
    6.             name: '小明',
    7.             subject: 'C语言',
    8.             score: 90
    9.         }, {
    10.             name: '小红 ',
    11.             subject: 'Java',
    12.             score: 66
    13.         }, {
    14.             name: '小刚',
    15.             subject: '线性代数',
    16.             score: 78
    17.         }, {
    18.             name: '小丽',
    19.             subject: '汇编语言',
    20.             score: 70
    21.         }];
    22.         // 创建行和行内三个的单元格
    23.         console.log(trs.length);
    24.         var tb = document.querySelector('tbody');
    25.         for (var i = 0; i < trs.length; i++) {
    26.             var tr = document.createElement('tr');
    27.             tb.appendChild(tr);
    28.             //出现了一个被我遗忘的知识点！！具体看PS里的内容qwq
    29.             for (j in trs[i]) {
    30.                 var td = document.createElement('td');
    31.                 // console.log(trs[i][j]);
    32.                 //遍历所有元素，每次都进行赋值
    33.                 td.innerHTML = trs[i][j];
    34.                 tr.appendChild(td);
    35.             }
    36.             var td = document.createElement('td');
    37.             td.innerHTML = '删除 ';
    38.             tr.appendChild(td);
    39.         }
    40.         var as = document.querySelectorAll('a');
    41.         for (var i = 0; i < as.length; i++) {
    42.             as[i].onclick = function() {
    43.                 // console.log(this.parentNode.parentNode);
    44.                 tb.removeChild(this.parentNode.parentNode);
    45.             }
    46.         }
    47.     script>

    PS. 忘了 for(k in obj)  的小伙伴戳这里 → VI.对象 → 遍历，也可以直接看MCD里的官方解释orz

    ✿ MCD 里的 for…in 解释

    ※※ pink 的

    1. html>
    2. <html lang="en">
    3.  
    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>Documenttitle>
    9.     <style>
    10.         table {
    11.             width: 500px;
    12.             margin: 100px auto;
    13.             border-collapse: collapse;
    14.             text-align: center;
    15.         }
    16.         
    17.         td,
    18.         th {
    19.             border: 1px solid #333;
    20.         }
    21.         
    22.         thead tr {
    23.             height: 40px;
    24.             background-color: #ccc;
    25.         }
    26.     style>
    27. head>
    28.  
    29. <body>
    30.     <table cellspacing="0">
    31.         <thead>
    32.             <tr>
    33.                 <th>姓名th>
    34.                 <th>科目th>
    35.                 <th>成绩th>
    36.                 <th>操作th>
    37.             tr>
    38.         thead>
    39.         <tbody>
    40.  
    41.         tbody>
    42.     table>
    43.     <script>
    44.         // 1.先去准备好学生的数据
    45.         var datas = [{
    46.             name: '魏璎珞',
    47.             subject: 'JavaScript',
    48.             score: 100
    49.         }, {
    50.             name: '弘历',
    51.             subject: 'JavaScript',
    52.             score: 98
    53.         }, {
    54.             name: '傅恒',
    55.             subject: 'JavaScript',
    56.             score: 99
    57.         }, {
    58.             name: '明玉',
    59.             subject: 'JavaScript',
    60.             score: 88
    61.         }, {
    62.             name: '大猪蹄子',
    63.             subject: 'JavaScript',
    64.             score: 0
    65.         }];
    66.         // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
    67.         var tbody = document.querySelector('tbody');
    68.         for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
    69.             // 1. 创建 tr行
    70.             var tr = document.createElement('tr');
    71.             tbody.appendChild(tr);
    72.             // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
    73.             for (var k in datas[i]) { // 里面的for循环管列 td
    74.                 // 创建单元格 
    75.                 var td = document.createElement('td');
    76.                 // 把对象里面的属性值 datas[i][k] 给 td  
    77.                 // console.log(datas[i][k]);
    78.                 td.innerHTML = datas[i][k];
    79.                 tr.appendChild(td);
    80.             }
    81.             // 3. 创建有删除2个字的单元格 
    82.             var td = document.createElement('td');
    83.             td.innerHTML = '删除 ';
    84.             tr.appendChild(td);
    85.  
    86.         }
    87.         // 4. 删除操作 开始 
    88.         var as = document.querySelectorAll('a');
    89.         for (var i = 0; i < as.length; i++) {
    90.             as[i].onclick = function() {
    91.                 // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  
    92.                 tbody.removeChild(this.parentNode.parentNode)
    93.             }
    94.         }
    95.         // for(var k in obj) {
    96.         //     k 得到的是属性名
    97.         //     obj[k] 得到是属性值
    98.         // }
    99.     script>
    100. body>
    101.  
    102. html>

    不知不觉又万字了orz，感觉主要是代码的功劳hhh，那这一篇就先到这里吧~！

    恭喜看到这的小伙伴，你已经完成 JavaScript APIs第二天和第三天的一部分的学习了~！！

      内容真的好多啊qwq，以后要更加努力！！

    下一篇在这里 (｡･∀･)ﾉﾞ → 还没写完 

     有用的话可以点赞评论收藏哦！！

  • 相关阅读:
    spark6. 如何设置spark 日志
    打破对ChatGPT的依赖以及如何应对ChatGPT的错误和幻觉
    Vue基本语法
    Java并发-生产者消费者实现
    zabbix自定义模板，邮件报警，代理服务器，自动发现与自动添加及snmp
    C++ Reference: Standard C++ Library reference: C Library: cwctype: iswblank
    day065：IO流、字节流、字节流写数据
    django-rest-framework 基础四 过滤、排序、分页、异常处理
    【数据结构】单链表经典面试题10道及详细思路代码
    【八大排序】java版(上)（冒泡、快排、堆排、选择排序）
  • 原文地址：https://blog.csdn.net/weixin_61096287/article/details/127495984