HTML的DOM操作看一篇就够了

1、常用的DOM操作方法

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回指定标签名称的所有元素（数组）
getElementsByClassName()	返回所有标签中class="指定值"的元素。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

2、访问HTM与元素的方法

• 通过给HTML元素起id使用getElementById 方法来访问

<script>
	document.getElementById("btn"); /*这样就获取到id=btn的元素了*/
</script>

• 通过给HTML元素的class=“名字” 使用getElementsByClassName() 来访问，这个获取的是一个数组

  <script>
    let Parr = document.getElementsByClassName("Pname");/*获取所有class="Pname的元素"*/
  </script>
  

• 通过getElementsByTagName() 来获取HTML元素，这是通过标签的来获取的，也是一个数组

  <script>
  	let inputs = document.getElementById("main").etElementsByTagName("input");/*获取id=main下的所有input元素*/
  </script>
  

  <script>
  	let inputs = document.etElementsByTagName("input");/*获取HTML中所有的input元素*/
  </script>
  

  3、改变HTML的内容或样式

  3.1改变内容

  示例：当点击按钮时h1中的内容由 中国----->华夏

  使用了事件 在按钮上添加事件，当点击按钮时触发，然后通过innerText 把h1中的内用改变。

  同时innerText可以获取标签中的内容 用法：‘document.getElementById(“chain”).innerText’ 获取 id = chain的内容

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>测试</title>
  </head>
  <body>
  
  <h1 id = "chain">中国</h1>
  <button id = 'btn'>按钮</button>
  
  </body>
  </html>
  
  <script>
      document.getElementById("btn").onclick = function () {
          document.getElementById("chain").innerText = "华夏";
      }
  </script>
  
  

  3.2改变样式

  示例：当点击按钮时h1中的内容由中国---->华夏,黑色---->红色

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>测试</title>
  </head>
  <body>
  
  <h1 id = "chain">中国</h1>
  <button id = 'btn'>按钮</button>
  
  </body>
  </html>
  
  <script>
      document.getElementById("btn").onclick = function () {
          document.getElementById("chain").innerText = "华夏";
          document.getElementById("chain").style.color = "red";
      }
  </script>
  

  4、元素

  4.1添加元素

  示例：在id= main下添加一个p

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>测试</title>
  </head>
  <body>
  
  <div id = "main">
  </div>
  <button id = 'btn'>添加</button>
  
  </body>
  </html>
  
  <style>
      #main{
          width: 100%;
      }
  </style>
  
  <script>
      document.getElementById("btn").onclick = function () {
          let p = document.createElement("p");
          p.innerText="从来就没有什么意外，也许你的故事并不是从快乐开始的，可这不能决定你的一生，你想要的变成什么样子，全看你自己的选择.\n"+
          "你患得患失，太在意从前，又太担心将来，有句话说得好，昨天是段历史，明天是个谜团，\n" +
              "    而今天是天赐的礼物，像珍惜礼物那样珍惜今天，越想逃避宿命，越会在半道上跟宿命撞个正着，你的思绪\n" +
              "    就像这池水一样朋友，稍有外界触动，就很难清澄明朗，可如果让它静下来，答案顿时就变得清晰了。\n" +
              "    愿我们在这繁华的世间,找到自己的摆渡人,渡尽世间的苦难。";
          p.style.fontSize = "18px";
          p.style.color="red";
          let div = document.getElementById("main");
          div.appendChild(p);
      }
  </script>
  

  4.2删除元素

  示例：删除id= “main” 中选中的p

  在删除按钮上添加事件，获取id = "main"下的所有 p，然后在每一个p上添加事件。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>测试</title>
  </head>
  <body>
  
  <div id = "main">
      <p>123</p>
      <p>456</p>
      <p>789</p>
      <p>111</p>
  </div>
  <button id = 'btn'>删除</button>
  
  </body>
  </html>
  
  <style>
      #main{
          width: 100%;
      }
  </style>
  
  <script>
      document.getElementById("btn").onclick = function () {
         let ps = document.getElementById("main").getElementsByTagName("p");
         for (let i = 0; i < ps.length; i++){
             let p = ps[i];
             p.onclick = function () {
                  let result = confirm("确定要删除\" "+p.innerText+"\"吗？");
                  if (result){
                      p.parentNode.removeChild(p);
                  }
             }
         }
      }
  </script>
  

  5、综合示例

  实现对表格数据的增加删除以及列表数据增加删除

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>JS测试</title>
  </head>
  <body>
  
  <ul>
      <li>中国</li>
      <li>日本</li>
      <li>韩国</li>
  </ul>
  <button id="btn1">给ul中的每个li添加事件</button>
  <br/><br/>
  请输入国家：<input class="add" type="text"/>&nbsp;&nbsp;<button id="btn2">添加国家</button>
  <hr/>
  <br/>
  
  姓名：<input class="tab" type="text"/><br/>
  年龄：<input class="tab" type="text"/><br/>
  性别：<select class="tab"><option>男</option><option>女</option></select><br/>
  <button id="btn3">保存</button>
  <table class="user">
      <tr><td>姓名</td>
          <td>年龄</td>
          <td>性别</td>
          <td>是否删除</td>
      </tr>
      <tr><td>Tom</td>
          <td>18</td>
          <td>男</td>
          <td><a href="delete from 表名 where id = ?">删除</a></td>
      </tr>
      <tr><td>Amy</td>
          <td>18</td>
          <td>女</td>
          <td><a href="delete from 表名 where id = ?">删除</a></td>
      </tr>
      <tr><td>Jack</td>
      <td>19</td>
      <td>男</td>
      <td><a href="delete from 表名 where id = ?">删除</a></td>
  </tr>
  
  </table>
  
  </body>
  </html>
  
  <style>
      .user{
          width: 50%;
          text-align: center;
          margin-left: 25%;
      }
      input{
          width: 15%;
      }
      select{
          width: 16%;
      }
  
      #btn3{
          font-size: 15px;
          color: white;
          background-color: yellowgreen;
      }
  </style>
  
  <script>
      //删除li
      document.getElementById("btn1").onclick = function () {
          let lis = document.getElementsByTagName("li");
          for (let i = 0; i < lis.length ; i++) {
              let li = lis[i];
              li.onclick = function () {
                 let result = confirm("确定要删除"+li.innerText + "吗?");
                 if (result){
                     document.getElementsByTagName("ul")[0].removeChild(li);
                 }
              }
          }
      };
      //添加li
      document.getElementById("btn2").onclick = function () {
          let val = document.getElementsByClassName("add")[0].value;
          let li = document.createElement("li");
          li.innerText = val;
          document.getElementsByTagName("ul")[0].appendChild(li);
      };
  
      // 点击提交吧元素天机进 表格里边
      document.getElementById("btn3").onclick = function () {
          let inputs = document.getElementsByClassName("tab");
          let tr = document.createElement("tr");
          for (let i = 0; i < inputs.length; i++) {
              let td = document.createElement("td");
              td.innerText = inputs[i].value;
              tr.appendChild(td);
              if (i == inputs.length - 1){
                  let td1 = document.createElement("td");
                  let a = document.createElement("a");
                  a.innerText = "删除";
                  a.setAttribute("href","delete from ' 表名' where id = ?");
                  td1.appendChild(a);
                  tr.appendChild(td1);
                  a.onclick = function () {
                      let result = confirm("确定要删除"+inputs[0].value+"吗?");
                      if (result){
                          this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                      }
                      return false;
                  }
              }
          }
          let table = document.getElementsByTagName("table")[0];
          table.appendChild(tr);
      };
  
      // 删除元素
      let a = document.getElementsByTagName("a");
      for (let i = 0; i < a.length; i++) {
          a[i].onclick = function () {
              let name = this.parentNode.parentNode.firstChild.innerText;
              let result = confirm("确定要删除"+name+"吗?");
              if (result){
                  this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
              }
              return  false;
          }
      }
  </script>
  

  ​

  写在最后

  传送门：DOM操作教程