JS项目合集-DOM相关操作

关注

原创最新推荐文章于 2026-04-27 09:33:56 发布 344 阅读 AI 写同款· GEO 优化 ›

【JS交互篇】DOM操作基础 DOM(Document Object Model)文档对象模型，用来表示和操作html或xml文档内容的基础API;当网页被加载时，浏览器会创建页面的文档对象模型DOM，而DOM模型被构造为对象的树（Dom Html Tree）;DOM包含了所有的html标签元素、文本字符串、甚至是html注释；利用DOM中的属性和方法，使程序有能力动态的访问和更新文档中的内容、结构以及样式，这样就使得页面的交互性大大增强；原生JavaScipt案例合集JavaScript +DOM基础。阅读详情

JS项目合集-DOM相关操作

题目来源：B站视频JS从入门到精通

1.插入元素

题目描述

点击按钮将文本框中的输入内容插入到第一行中
在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script>
   window.onload=function(){
    var otext=document.getElementById("txt");
    var oul=document.getElementById("ul1");
    var obut=document.getElementById("button1");
    obut.onclick=function(){
    var ali=document.getElementsByTagName("li");
    var oli=document.createElement("li");
    oli.innerHTML=otext.value;
    if (ali.length>0){
     oul.insertBefore(oli,ali[0]);
     }
    else{
     oul.appendChild(oli);
    };
    };
   }
  </script>
 </head>
 <body>
  <input id="txt" type="text"/>
  <input id="button1" type="button" value="创建行"/>
  <ul id="ul1">
  </ul>
 </body>
</html>

当行数为零时，insertbefore兼容性不好，此时的appendChild的功能效果是一样的。

2.表格隔行变色

题目描述

建立表格，通过JS建立隔行变色样式，并使得鼠标移入移出时对应行高亮。
在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script>
   window.onload=function(){
    var otable=document.getElementById('tab1');
    var oldColor="";
    for (var i=0;i<otable.tBodies[0].rows.length;i++){
     otable.tBodies[0].rows[i].onmouseover=function(){
      oldColor=this.style.background;
      this.style.background="yellow";
     }
     otable.tBodies[0].rows[i].onmouseout=function(){
      this.style.background=oldColor;
     }
     if (i%2==0){
      otable.tBodies[0].rows[i].style.background='';
     } 
     else{
      otable.tBodies[0].rows[i].style.background='grey';
     }
    }
   }
  </script>
 </head>
 <body>
  <table  id="tab1" border="1" width="500">
   <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>张三</td>
     <td>23</td>
    </tr>
    <tr>
     <td>2</td>
     <td>李四</td>
     <td>25</td>
    </tr>
    <tr>
     <td>3</td>
     <td>王五</td>
     <td>27</td>
    </tr>
    <tr>
     <td>4</td>
     <td>李明</td>
     <td>29</td>
    </tr>
    <tr>
     <td>5</td>
     <td>韩梅</td>
     <td>21</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

使用oldColor标记每行的原有颜色，防止鼠标移入移出的操作覆盖掉原有的隔行变色效果

3.表格添加删除

题目描述

建立表格，实现点击按钮的添加操作，以及点击删除的删除对应行操作
在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script> 
   window.onload=function(){
    var otab=document.getElementById("tab1");
    var oname=document.getElementById("name");
    var oage=document.getElementById("age");
    var obut=document.getElementById("but1");
    var adel=document.getElementsByTagName("a");
    var id=otab.tBodies[0].rows.length+1;
    obut.onclick=function(){
     var otr=document.createElement("tr");
     var otd1=document.createElement("td");
     otd1.innerHTML=id++;
     otr.appendChild(otd1);
     var otd2=document.createElement("td");
     otd2.innerHTML=oname.value;
     otr.appendChild(otd2);
     var otd3=document.createElement("td");
     otd3.innerHTML=oage.value; 
     otr.appendChild(otd3);
     var otd4=document.createElement("td");
     otd4.innerHTML='<a href="javascript:;">删除</a>';
     otr.appendChild(otd4);
     otab.tBodies[0].appendChild(otr);
     for (var i=0;i<adel.length;i++){
      adel[i].onclick=function(){
       otab.tBodies[0].removeChild(this.parentNode.parentNode)
      }
     }
     
    }  
    
    
   };
  </script>
 </head>
 <body>
  姓名：<input id="name" type="text"/>
  年龄：<input id ="age" type="text"/>
  <input id="but1" type="button" value="添加"/>
  <table  id="tab1" border="1" width="500">
     <thead>
      <td>ID</td>
      <td>姓名</td>
      <td>年龄</td>
   <td>操作</td>
     </thead>
     <tbody>
      <tr>
       <td>1</td>
       <td>张三</td>
       <td>23</td>
    <td></td>
      </tr>
      <tr>
       <td>2</td>
       <td>李四</td>
       <td>25</td>
    <td></td>
      </tr>
      <tr>
       <td>3</td>
       <td>王五</td>
       <td>27</td>
    <td></td>
      </tr>
      <tr>
       <td>4</td>  
       <td>李明</td>
       <td>29</td>
    <td></td>
      </tr>
      <tr>
       <td>5</td>
       <td>韩梅</td>
       <td>21</td>
    <td></td>
      </tr>
     </tbody>
    </table>
   </body>
  </html>
  
 </body>
</html>

为防止ID项重复，使用id变量进行表格第一列的填充。

4.表格搜索

题目描述

实现不区分大小写，支持模糊搜索与多关键词搜索的表格
在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script>
   window.onload=function(){
    var otab=document.getElementById("tab1");
    var oName=document.getElementById("name");
    var oBut=document.getElementById("but1");
    oBut.onclick=function(){
     for (var i=0;i<otab.tBodies[0].rows.length;i++){
      var str1=otab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
      var str2=oName.value.toLowerCase();
      var arr=str2.split(' ');
      otab.tBodies[0].rows[i].style.background="";
      for (var j=0;j<arr.length;j++){ 
       if (str1.search(arr[j])!=-1){
        otab.tBodies[0].rows[i].style.background="yellow";
       }  
      /* else{
	 otab.tBodies[0].rows[i].style.background="";
	}*/
      }
      
     }
    }
   }
  </script>
    
 </head>
 <body>
  姓名：<input id="name" type="text"/>
  <input id="but1" type="button" value="搜索"/>
  <table  id="tab1" border="1" width="500">
     <thead>
      <td>ID</td>
      <td>姓名</td>
      <td>年龄</td>
   <td>操作</td>
     </thead>
     <tbody>
      <tr>
       <td>1</td>
       <td>Lily</td>
       <td>23</td>
    <td></td>
      </tr>
      <tr>
       <td>2</td>
       <td>李四</td>
       <td>25</td>
    <td></td>
      </tr>
      <tr>
       <td>3</td>
       <td>王四</td>
       <td>27</td>
    <td></td>
      </tr>
      <tr>
       <td>4</td>  
       <td>李明</td>
       <td>29</td>
    <td></td>
      </tr>
      <tr>
       <td>5</td>
       <td>韩梅</td>
       <td>21</td>
    <td></td>
      </tr>
     </tbody>
    </table>
 </body>
</html>

search()函数帮助实现模糊搜索，split()函数切分多个关键词帮助实现多关键词搜索。
注释部分的else语句需要拿到循环外侧，否则后面关键词搜索结果会覆盖前面的结果。

5.表格排序

题目描述

将ID乱序的表格按照ID大小重新排序。
在这里插入图片描述

在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script>
   window.onload=function(){
    var otab=document.getElementById("tab1");
    var oBut=document.getElementById("but1");
    //var otr=document.getElementsByTagName("tr");
    
    oBut.onclick=function(){
     var arr=[];
     for(var i=0;i<otab.tBodies[0].rows.length;i++){
      arr[i]=otab.tBodies[0].rows[i];
     }
     arr.sort(function(li1,li2){
      var s1=parseInt(li1.cells[0].innerHTML); 
      var s2=parseInt(li2.cells[0].innerHTML);
      return s1-s2;
     });
     for (var i=0;i<arr.length;i++){
      otab.tBodies[0].appendChild(arr[i]);
     }
    }
   }
  </script>
 </head>
 <body>
  <input id="but1" type="button" value="排序"/>
  <table  id="tab1" border="1" width="500">
     <thead>
      <td>ID</td>
      <td>姓名</td>
      <td>年龄</td>
   <td>操作</td>
     </thead>
     <tbody>
      <tr>
       <td>3</td>
       <td>Lily</td>
       <td>23</td>
    <td></td>
      </tr>
      <tr>
       <td>2</td>
       <td>李四</td>
       <td>25</td>
    <td></td>
      </tr>
      <tr>
       <td>4</td>
       <td>王四</td>
       <td>27</td>
    <td></td>
      </tr>
      <tr>
       <td>1</td>  
       <td>李明</td>
       <td>29</td>
    <td></td>
      </tr>
      <tr>
       <td>5</td>
       <td>韩梅</td>
       <td>21</td>
    <td></td>
      </tr>
     </tbody>
 </body>
</html>