第七节 DOM操作应用-高级

时间：2023-03-09 18:24:41
第七节 DOM操作应用-高级

表格应用：

　　获取：tBodies、tHead、tFoot、rows、cells

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>DOM高级应用-表格的便捷操作</title>

     <script>

         window.onload=function(){

             var oTab=document.getElementById('tab1');

             // a=oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML;

             // a=oTab.tBodies[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML;    //获取所有表格的简单操作，该句与上面代码相同的意义

             // a=oTab.tBodies[0].rows[1].getElementsByTagName('td')[1].innerHTML;  //同上理，在获取到的表格下，获取该表格的某一行也有简单的操作，rows

             a=oTab.tBodies[0].rows[1].cells[1].innerHTML;   //同理，cells是获取行中的所有单元格，cells[1]是获取该行中第二个单元格

             alert(a);

         }

     </script>

 </head>

 <body>

     <table id="tab1" border="1" width="500">

         <thead><!--表头-->

             <td>ID</td>

             <td>姓名</td>

             <td>年龄</td>

         </thead>

         <tbody>     <!--其实就算没有<tbody>这个标签，浏览器也会自动给我们的表格加上，所以我们在写表格的时候最好加上该标签！这样会显得代码比较严谨-->

             <tr>

                 <td>11111</td>

                 <td>haohao</td>

                 <td>26</td>

             </tr>

             <tr>

                 <td>22222</td>

                 <td>maomao</td>

                 <td>25</td>

             </tr>

             <tr>

                 <td>33333</td>

                 <td>hanhan</td>

                 <td>24</td>

             </tr>

             <tr>

                 <td>44444</td>

                 <td>zhizhi</td>

                 <td>23</td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

　　需要注意的是，每个表格可以有好多tBody，即tBodies是一个数组，但是每个表格只能有一个tHead（表头）、tFoot（表尾），所以tHead、tFoot不是一个数组，而是直接的两个元素；相同的rows（行）、cells（元素/单元格）也表示两个数组。

　　

　　隔行变色：鼠标移入高亮　

 //表格样式还是上面的样式

         window.onload=function () {

             var oTab=document.getElementById('tab1');

             for (var i=0; i<oTab.tBodies[0].rows.length; i++){

             //注意：如果判断语句中没有tBodies[0]，则系统会默认把thead（表头）也算做一行，所以千万别忘了tBodies

                 oTab.tBodies[0].rows[i].onmouseover=function () {   //鼠标移入，背景颜色变绿

                     this.style.background='green';

                 };

                 oTab.tBodies[0].rows[i].onmouseout=function () {    //鼠标移出，背景颜色变白

                     this.style.background='';

                 };

                 if (i%2){    //系统默认1为True，0为False

                     oTab.tBodies[0].rows[i].style.background="";

                 } else {

                     oTab.tBodies[0].rows[i].style.background="#ccc";

                 }

             }

         };

 //但是问题在于，移入变绿后，再移出，隔行变色也消失了，解决办法如下

 window.onload=function () {

     var oTab=document.getElementById('tab1');

     var oldColor='';

     for (var i=0; i<oTab.tBodies[0].rows.length; i++){

     //注意：如果判断语句中没有tBodies[0]，则系统会默认把thead（表头）也算做一行，所以千万别忘了tBodies

         oTab.tBodies[0].rows[i].onmouseover=function () {   //鼠标移入，背景颜色变绿

             oldColor=this.style.background;　　//用于存放原来的颜色

             this.style.background='green';

         };

         oTab.tBodies[0].rows[i].onmouseout=function () {    //鼠标移出，背景颜色变白

             this.style.background=oldColor;

         };

         if (i%2){    //系统默认1为True，0为False

             oTab.tBodies[0].rows[i].style.background="";

         } else {

             oTab.tBodies[0].rows[i].style.background="#ccc";

         }

     }

 };

　　添加、删除表格中的一行：DOM方法的使用

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>DOM高级应用</title>

     <script>//表格的添加、删除一行

         window.onload=function () {

             // var oTab=document.getElementById('tab1');

             // var oBtn=document.getElementById('btn1');

             // var oName=document.getElementById('name');

             // var oAge=document.getElementById('age');

             // oBtn.onclick=function () {

             //     var oTr=document.createElement('tr');   //先创建一行

             //

             //     var oTd=document.createElement('td');   //再创建该行的列

             //     oTd.innerHTML=oTab.tBodies[0].rows.length+1;    //?

             //     oTr.appendChild(oTd);

             //

             //     var oTd=document.createElement('td');   //再创建该行的列

             //     oTd.innerHTML=oName.value;    //?

             //     oTr.appendChild(oTd);

             //

             //     var oTd=document.createElement('td');   //再创建该行的列

             //     oTd.innerHTML=oAge.value;    //?

             //     oTr.appendChild(oTd);

             //

             //     var oTd=document.createElement('td');   //再创建该行的列

             //     oTd.innerHTML='<a href="javascript:;">删除</a>';    //?

             //     oTr.appendChild(oTd);

             //

             //     oTd.getElementsByTagName('a')[0].onclick=function(){

             //         oTab.tBodies[0].removeChild(this.parentNode.parentNode);

             //     };

             //

             //     oTab.tBodies[0].appendChild(oTr);

             // };

             //此时，？处的问题就出现了，即在删除表格中用户添加的行时，其被删除下面的行的id并不会被改变，所以再次添加行时，

             //又从新开始计算行数而产生添加行的id值，这样就会出现id值相同的情况，而正常的情况下，某个人的id值是唯一的（当然

             //也有id值严格有序的，如有道云音乐中，删除歌单中的某一首歌，则下面的id值都会减一，来保证id的严格有序），所以在

             //删除某一行后，其id值将不会再出现，解决办法如下：

             var oTab=document.getElementById('tab1');

             var oBtn=document.getElementById('btn1');

             var oName=document.getElementById('name');

             var oAge=document.getElementById('age');

             var id=oTab.tBodies[0].rows.length+1;

             oBtn.onclick=function () {

                 var oTr=document.createElement('tr');   //先创建一行

                 var oTd=document.createElement('td');   //再创建该行的列

                 oTd.innerHTML=id++;    //?

                 oTr.appendChild(oTd);

                 var oTd=document.createElement('td');   //再创建该行的列

                 oTd.innerHTML=oName.value;    //?

                 oTr.appendChild(oTd);

                 var oTd=document.createElement('td');   //再创建该行的列

                 oTd.innerHTML=oAge.value;    //?

                 oTr.appendChild(oTd);

                 var oTd=document.createElement('td');   //再创建该行的列

                 oTd.innerHTML='<a href="javascript:;">删除</a>';    //?

                 oTr.appendChild(oTd);

                 oTd.getElementsByTagName('a')[0].onclick=function(){

                     oTab.tBodies[0].removeChild(this.parentNode.parentNode);

                 };

                 oTab.tBodies[0].appendChild(oTr);

             };

         };

     </script>

 </head>

 <body>

     姓名：<input id="name" type="text"/>

     年龄：<input id="age" type="text"/>

     <button id="btn1">添加</button>

     <table id="tab1" border="1" width="500">

         <thead><!--表头-->

             <td>ID</td>

             <td>姓名</td>

             <td>年龄</td>

             <td>操作</td>

         </thead>

         <tbody>     <!--其实就算没有<tbody>这个标签，浏览器也会自动给我们的表格加上，所以我们在写表格的时候最好加上该标签！这样会显得代码比较严谨-->

             <tr>

                 <td>1</td>

                 <td>haohao</td>

                 <td>26</td>

                 <td></td>

             </tr>

             <tr>

                 <td>2</td>

                 <td>maomao</td>

                 <td>25</td>

                 <td></td>

             </tr>

             <tr>

                 <td>3</td>

                 <td>hanhan</td>

                 <td>24</td>

                 <td></td>

             </tr>

             <tr>

                 <td>4</td>

                 <td>zhizhi</td>

                 <td>23</td>

                 <td></td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

　　搜索 ：其实一般情况下搜索都是后台执行的，一般不用JS做搜索的工作，这里只是为了介绍思想

　　　　版本1：基础版本——字符串比较

　　　　版本2：忽略大小写——大小写转换

　　　　版本3：模糊搜索——search的使用

　　　　　　　var str='abcdef'; //字符串的索引值从0开始
　　　　　　 alert(str.search('c')); //找到并且返回字符串出现的位置，如果没有找到，返回-1

　　　　版本4：多关键词——split

　　　　高亮显示、筛选

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>DOM高级应用</title>

     <script>

         // //搜索---版本1：基础版本（字符串比较）

         // window.onload=function () {

         //     var oTab=document.getElementById('tab1');

         //     var oTxt=document.getElementById('name');

         //     var oBtn=document.getElementById('btn2');

         //

         //     oBtn.onclick=function () {

         //         for (var i=0; i<oTab.tBodies[0].rows.length; i++){

         //             if (oTab.tBodies[0].rows[i].cells[1].innerHTML==oTxt.value){

         //                 oTab.tBodies[0].rows[i].style.background='yellow';

         //             } else {

         //                 oTab.tBodies[0].rows[i].style.background='';

         //             }

         //         }

         //     };

         // };

         // //搜索---版本2：忽略大小写——大小写转换

         // window.onload=function () {

         //     var oTab=document.getElementById('tab1');

         //     var oTxt=document.getElementById('name');

         //     var oBtn=document.getElementById('btn2');

         //

         //     oBtn.onclick=function () {

         //         for (var i=0; i<oTab.tBodies[0].rows.length; i++){

         //             var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML;

         //             var sTxt=oTxt.value;

         //             if (sTab.toLowerCase()==sTxt.toLowerCase()){    //忽略大小写进行搜索

         //                 oTab.tBodies[0].rows[i].style.background='yellow';

         //             } else {

         //                 oTab.tBodies[0].rows[i].style.background='';

         //             }

         //         }

         //     };

         // };

         // //搜索---版本3：模糊搜索（在输入不完全的情况下，一样能搜索想要的事物）——search的使

         // // var str='abcdef';       //search()方法的使用

         // // alert(str.search('c'));     //返回值为：2 表示字符‘c’在字符串str中的位置（或索引值）为2；

         // // alert(str.search('de'));    //返回值为：3 表示字符串‘de’在字符串str中的位置是从3开始的。

         // // alert(str.search('g'));     //返回值为：-1表示所搜索的字符不在字符串str中。

         //

         // window.onload=function () {

         //     var oTab=document.getElementById('tab1');

         //     var oTxt=document.getElementById('name');

         //     var oBtn=document.getElementById('btn2');

         //

         //     oBtn.onclick=function () {

         //         for (var i=0; i<oTab.tBodies[0].rows.length; i++){

         //             var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();

         //             var sTxt=oTxt.value.toLowerCase();

         //             if (sTab.search(sTxt)!=-1){    //如果搜索的值在表格字符串中存在

         //                 oTab.tBodies[0].rows[i].style.background='yellow';

         //             } else {

         //                 oTab.tBodies[0].rows[i].style.background='';

         //             }

         //         }

         //     };

         // };

         // 需要注意的是模糊搜索，如果你输入的字符可以在表格的多个行中找到匹配的值，系统会默认把所有符合条件的行 标出。

         //搜索---版本4：多关键词--split()方法

         // var str='abc 123 ert';

         // var arr=str.split(' '); //用空格切分字符串

         // alert(arr);     //返回值为：abc,123,ert 表示字符串被切分成三段，此时arr.length=3

         window.onload=function () {

             var oTab=document.getElementById('tab1');

             var oTxt=document.getElementById('name');

             var oBtn=document.getElementById('btn2');

             oBtn.onclick=function () {

                 for (var i=0; i<oTab.tBodies[0].rows.length; i++){

                     var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();

                     var sTxt=oTxt.value.toLowerCase();

                     var arr=sTxt.split(' ');    //这里假设用户输入的关键字是以空格隔开的，所以以空格切分

                     //oTab.tBodies[0].rows[i].style.background='';　　//控制高亮

 　　　　　　　　　　　 oTab..display='none';　　//控制筛选

                     for (var j=0; j<arr.length; j++){

                         if (sTab.search(arr[j])!=-1){    //如果搜索的值在表格字符串中存在

                             //oTab.tBodies[0].rows[i].style.background='yellow';　　//控制高亮

 　　　　　　　　　　　　　　　　oTab.tBodies[0].rows[i].style.display='block';　　//控制筛选

                         }

                     }

                 }

             };

         };

         //该方法实现了，多关键字的同时搜索，不过这里假设用户输入的多个关键字是以空格隔开的

     </script>

 </head>

 <body>

     姓名：<input id="name" type="text"/>

     <button id="btn2">搜索</button>（请输入需要搜索的name值！）

     <table id="tab1" border="1" width="500">

         <thead><!--表头-->

             <td>ID</td>

             <td>姓名</td>

             <td>年龄</td>

             <td>操作</td>

         </thead>

         <tbody>     <!--其实就算没有<tbody>这个标签，浏览器也会自动给我们的表格加上，所以我们在写表格的时候最好加上该标签！这样会显得代码比较严谨-->

             <tr>

                 <td>1</td>

                 <td>haohao</td>

                 <td>26</td>

                 <td></td>

             </tr>

             <tr>

                 <td>2</td>

                 <td>maomao</td>

                 <td>25</td>

                 <td></td>

             </tr>

             <tr>

                 <td>3</td>

                 <td>hanhan</td>

                 <td>24</td>

                 <td></td>

             </tr>

             <tr>

                 <td>4</td>

                 <td>zhizhi</td>

                 <td>23</td>

                 <td></td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

　　排序：<li>、<img>等等

　　　　移动<li>

　　　　元素排序：转换——排序——插入

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>移动li标签</title>

     <style>

         #ul1{background: green;}

         #ul2{background: yellow;}

     </style>

     <script>

         window.onload=function () {

             var oUl1=document.getElementById('ul1');

             var oUl2=document.getElementById('ul2');

             var oBtn=document.getElementById('btn1');

             oBtn.onclick=function () {

                 var oLi=oUl1.children[0];

                 // //移动li的实现

                 // // oUl1.removeChild(oLi);   //即使没有此句，效果依然没有影响

                 // oUl2.appendChild(oLi);

                 // //appendChild()  功能完整版：1.先把元素从原有父级上删掉，添加到新的父级里

                 //循环摆放li的实现

                 oUl1.appendChild(oLi);

             };

         };

     </script>

 </head>

 <body>

     <ul id="ul1">

         <li>1</li>

         <li>2</li>

         <li>2</li>

         <li>3</li>

     </ul>

     <button id="btn1">移动</button>

     <ul id="ul2">

         <li>1</li>

         <li>2</li>

         <li>2</li>

         <li>3</li>

     </ul>

 </body>

 </html>

　　　　简单的<li>标签排序

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>移动li标签</title>

     <style>

         #ul1{background: green;}

     </style>

     <script>

         window.onload=function () {

             var oUl1=document.getElementById('ul1');

             var oBtn=document.getElementById('btn1');

             oBtn.onclick=function () {

                 var aLi=oUl1.getElementsByTagName('li');

                 // aLi.sort(); //报错，原因：之前说aLi是一个数组（Array），但其实aLi严格意义来说，

                 // 并不能算是是一个数组（Array），而sort()是数组特有的一个排序方法；

                 // aLi其实是一个元素“集合”，和数组相似，有length，可以用“[]”，但是没有sort、join等数组的函数，所以报错

                 var arr=[];

                 for (var i = 0; i<aLi.length; i++){

                     arr[i]=aLi[i];

                 }

                 arr.sort(function (li1, li2) {  //排序需要一个比较函数，该函数有两个参数

                     var n1=parseInt(li1.innerHTML);

                     var n2=parseInt(li2.innerHTML);

                     return n1-n2;

                 });

                 for (var j=0; j<arr.length; j++){   //返回第i个值应该是多少？

                     // alert(arr[j].innerHTML);    // 返回值是“3 10 11 ...” 正确

                     alert('该把'+arr[j].innerHTML+'插入到最后了！');

                     oUl1.appendChild(arr[j]);

                 }

             };

         };

     </script>

 </head>

 <body>

     <button id="btn1">排序</button>

     <ul id="ul1">

         <li>10</li>

         <li>21</li>

         <li>25</li>

         <li>3</li>

         <li>11</li>

         <li>28</li>

         <li>26</li>

         <li>30</li>

     </ul>

 </body>

 </html>

　　表格排序的实现：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>DOM高级应用</title>

     <script>

         window.onload=function () {

             var oTab=document.getElementById('tab1');

             var oBtn=document.getElementById('btn1');

             oBtn.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 (tr1, tr2) {  //排序函数

                     var n1=parseInt(tr1.cells[0].innerHTML);

                     var n2=parseInt(tr2.cells[0].innerHTML);

                     return n1-n2;

                 });

                 for (var i=0; i<arr.length; i++){

                     alert('该把'+arr[i].innerHTML+'插入到最后了！');

                     oTab.tBodies[0].appendChild(arr[i]);

                 }

             };

         };

         //该方法实现了，多关键字的同时搜索，不过这里假设用户输入的多个关键字是以空格隔开的

     </script>

 </head>

 <body>

     <button id="btn1">排序</button>

     <table id="tab1" border="1" width="500">

         <thead><!--表头-->

             <td>ID</td>

             <td>姓名</td>

             <td>年龄</td>

             <td>操作</td>

         </thead>

         <tbody>     <!--其实就算没有<tbody>这个标签，浏览器也会自动给我们的表格加上，所以我们在写表格的时候最好加上该标签！这样会显得代码比较严谨-->

             <tr>

                 <td>3</td>

                 <td>haohao1</td>

                 <td>26</td>

                 <td></td>

             </tr>

             <tr>

                 <td>2</td>

                 <td>maomao1</td>

                 <td>25</td>

                 <td></td>

             </tr>

             <tr>

                 <td>5</td>

                 <td>hanhan1</td>

                 <td>24</td>

                 <td></td>

             </tr>

             <tr>

                 <td>4</td>

                 <td>zhizhi1</td>

                 <td>23</td>

                 <td></td>

             </tr>

             <tr>

                 <td>1</td>

                 <td>haohao2</td>

                 <td>26</td>

                 <td></td>

             </tr>

             <tr>

                 <td>6</td>

                 <td>maomao2</td>

                 <td>25</td>

                 <td></td>

             </tr>

             <tr>

                 <td>8</td>

                 <td>hanhan2</td>

                 <td>24</td>

                 <td></td>

             </tr>

             <tr>

                 <td>7</td>

                 <td>zhizhi2</td>

                 <td>23</td>

                 <td></td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

表单应用

　　表单基础知识：

　　　　什么是表单：

　　　　　　向服务器提交数据，比如：用户注册

　　　　action：提交到哪里

　　表单事件：

　　　　onsubmit：提交时发生

　　　　onreset：重置时发生

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>表单事件</title>

     <script>

         window.onload=function () {

             var oForm=document.getElementById('form1');

             oForm.onsubmit=function () {    //提交时的提示

                 alert('确认提交！');

             };

             oForm.onreset=function () {

                 alert('已清空！');

             };

         };

     </script>

 </head>

 <body>

     <!--表单存在的目的，其实就是为了向服务器提供数据-->

     <form id="form1" action="http://...">

         用户名：<input type="text" name="use"/><br/><!--而这个name相当于前端的id，前端靠id来查找元素，而后台就是通过它

         （name）来查找元素的-->

         密码：<input type="password" name="pass"/>

         <input type="submit"/><!--上面form行间元素“action就是提交的位置”-->

         <input type="reset">

     </form>

 </body>

 </html>

　　表单内容验证：

　　　　阻止用户输入非法字符：阻止事件

　　　　输入时、失去焦点是验证：onkeyup、onblur

　　　　提交时检查：onsubmit

　　　　*后台数据检查：

相关文章