節點操作（刪除，複製）/案例1：刪除留言板的留言 /案例2：動態生成表格

楊蛋蛋~R發表於2020-10-03

節點刪除

node.removeChild(child) 從DOM中刪除一個子節點，返回刪除的節點

 <body>
    <button>刪除</button>
    <ul>
      <li>熊大</li>
      <li>熊二</li>
      <li>光頭強</li>
    </ul>
    <script>
      var btn = document.querySelector("button");
      var ul = document.querySelector("ul");
      btn.onclick = function () {
        if (ul.children.length == 0) {
          this.disabled = true;
          alert("沒有節點了");
        } else {
          //node.removeChild(child)  刪除一個子節點
          ul.removeChild(ul.children[0]);
        }
      };
    </script>
  </body>

案例1：刪除留言板的留言

分析：

  • 當我們把文字域裡面的值賦值給li的時候，多新增一個刪除的連結
  • 需要把所有的連結獲取過來，當我們點選當前的連結時，刪除當前連線所在的li
  • 阻止連結跳轉需要新增javascript(0),或者 javascript::
  <body>
    <textarea name="" id=""></textarea>
    <button>釋出</button>
    <ul></ul>
    <script>
      var btn = document.querySelector("button");
      var text = document.querySelector("textarea");
      var ul = document.querySelector("ul");
      btn.onclick = function () {
        if (text.value == null) {
          alert("您輸入的資訊為空");
          return false;
        } else {
          var li = document.createElement("li");
          var a = document.createElement("a");
          li.innerHTML = text.value + "<a href = 'javascript::'>刪除</a>";
          // href = 'javascript::'表示這是一個不會跳轉的連結
          ul.insertBefore(li, ul.children[0]);
          //刪除元素 刪除的是當前連結的li 它的父親
          var as = document.querySelectorAll("a");
          for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
              //當前a所在的li  this.parentNode
              ul.removeChild(this.parentNode);
            };
          }
        }
      };
    </script>
  </body>

節點複製

node.cloneNode（）方法返回撥用該節點的一個副本，也稱為克隆節點/拷貝節點
如果括號引數為空或者為false，則是淺拷貝，即只克隆複製節點本身，不克隆裡面的子節點
如果括號引數為true，則是深拷貝，即不僅克隆複製節點本身，也克隆裡面的子節點

  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <script>
      var ul = document.querySelector("ul");
      var lili = ul.children[0].cloneNode(); //複製ul裡面的第一個li，傳遞給lili 但沒有內容，因為是淺拷貝
      ul.appendChild(lili);//把lili新增到ul的後面
    </script>
  </body>

案例2：動態生成表格

分析：

  • 因為裡面的資料都是動態的，需要js動態生成，這裡模擬好資料，自己定義好資料，資料採取物件形式儲存
  • 所有的資料都放在tbody裡面的行裡
  • 因為行很多，需要迴圈建立多個行，根據物件的長度建立（對應人數）
  • 每個行裡面又有多個單元格（對應裡面的資料），採取遍歷物件的方式迴圈建立多個單元格（ for ( k in obj) 形式)，並把資料存入（雙重for迴圈）
  • 最後一列單元格是刪除，需要單獨建立單元格
  <body>
    <table cellspacing="0">
      <thead>
        <tr>
          <th>姓名</th>
          <th>科目</th>
          <th>成績</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      //1.先準備好學生的資料
      var datas = [
        {
          name: "周九良",
          subject: "javascript",
          score: 100,
        },
        {
          name: "朱一龍",
          subject: "javascript",
          score: 100,
        },
        {
          name: "張新成",
          subject: "javascript",
          score: 100,
        },
        {
          name: "許嵩",
          subject: "javascript",
          score: 100,
        },
      ];
      //1.往tbody裡面建立行，根據人數來建立（資料的長度）
      var tbody = document.querySelector("tbody");
      for (var i = 0; i < datas.length; i++) {
        //建立tr行
        var tr = document.createElement("tr");
        tbody.appendChild(tr);
        //3.行裡面建立單元格(跟資料有關係的三個單元格) tr 單元格的數量取決於每個物件裡面的屬性個數
        //遍歷物件 datas[i]
        for (k in datas[i]) {
          //k 得到的是屬性名 datas[i][k]得到的是屬性值
          //建立單元格
          var td = document.createElement("td");
          //把物件裡面的屬性值 給td
          td.innerHTML = datas[i][k]; //把物件裡面的屬性值 datas[i][k]給 td
          tr.appendChild(td);
        }
        //3.建立有刪除2個字的單元格
         var td = document.createElement("td");
         td.innerHTML = "<a href = 'javascript::'>刪除</a>";
         tr.appendChild(td);
      }
      //4.點選刪除按鈕時 刪除整個行
      var as = document.querySelectorAll("a");
      for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
          //點選a 刪除當前a所在的行 當前a所在的li  this.parentNode
          tbody.removeChild(this.parentNode.parentNode); //刪除的是a父節點的父節點
        };
      }
    </script>
  </body>

相關文章