第七节 DOM操作应用-高级

表格应用：

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM高级应用-表格的便捷操作</title>
 6     <script>
 7         window.onload=function(){
 8             var oTab=document.getElementById('tab1');
 9             // a=oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML;
10             // a=oTab.tBodies[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML;    //获取所有表格的简单操作，该句与上面代码相同的意义
11             // a=oTab.tBodies[0].rows[1].getElementsByTagName('td')[1].innerHTML;  //同上理，在获取到的表格下，获取该表格的某一行也有简单的操作，rows
12             a=oTab.tBodies[0].rows[1].cells[1].innerHTML;   //同理，cells是获取行中的所有单元格，cells[1]是获取该行中第二个单元格
13             alert(a);
14         }
15     </script>
16 </head>
17 <body>
18     <table id="tab1" border="1" width="500">
19         <thead><!--表头-->
20             <td>ID</td>
21             <td>姓名</td>
22             <td>年龄</td>
23         </thead>
24         <tbody>     <!--其实就算没有<tbody>这个标签，浏览器也会自动给我们的表格加上，所以我们在写表格的时候最好加上该标签！这样会显得代码比较严谨-->
25             <tr>
26                 <td>11111</td>
27                 <td>haohao</td>
28                 <td>26</td>
29             </tr>
30             <tr>
31                 <td>22222</td>
32                 <td>maomao</td>
33                 <td>25</td>
34             </tr>
35             <tr>
36                 <td>33333</td>
37                 <td>hanhan</td>
38                 <td>24</td>
39             </tr>
40             <tr>
41                 <td>44444</td>
42                 <td>zhizhi</td>
43                 <td>23</td>
44             </tr>
45         </tbody>
46     </table>
47 </body>
48 </html>

View Code

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

　　隔行变色：鼠标移入高亮　

 1 //表格样式还是上面的样式
 2         window.onload=function () {
 3             var oTab=document.getElementById('tab1');
 4 
 5             for (var i=0; i<oTab.tBodies[0].rows.length; i++){
 6             //注意：如果判断语句中没有tBodies[0]，则系统会默认把thead（表头）也算做一行，所以千万别忘了tBodies
 7                 oTab.tBodies[0].rows[i].onmouseover=function () {   //鼠标移入，背景颜色变绿
 8                     this.style.background='green';
 9                 };
10                 oTab.tBodies[0].rows[i].onmouseout=function () {    //鼠标移出，背景颜色变白
11                     this.style.background='';
12                 };
13 
14                 if (i%2){    //系统默认1为True，0为False
15                     oTab.tBodies[0].rows[i].style.background="";
16                 } else {
17                     oTab.tBodies[0].rows[i].style.background="#ccc";
18                 }
19             }
20         };
21 //但是问题在于，移入变绿后，再移出，隔行变色也消失了，解决办法如下
22 
23 window.onload=function () {
24     var oTab=document.getElementById('tab1');
25     var oldColor='';
26 
27     for (var i=0; i<oTab.tBodies[0].rows.length; i++){
28     //注意：如果判断语句中没有tBodies[0]，则系统会默认把thead（表头）也算做一行，所以千万别忘了tBodies
29         oTab.tBodies[0].rows[i].onmouseover=function () {   //鼠标移入，背景颜色变绿
30             oldColor=this.style.background;　　//用于存放原来的颜色
31             this.style.background='green';
32         };
33         oTab.tBodies[0].rows[i].onmouseout=function () {    //鼠标移出，背景颜色变白
34             this.style.background=oldColor;
35         };
36 
37         if (i%2){    //系统默认1为True，0为False
38             oTab.tBodies[0].rows[i].style.background="";
39         } else {
40             oTab.tBodies[0].rows[i].style.background="#ccc";
41         }
42     }
43 };

View Code

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

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>DOM高级应用</title>
  6     <script>//表格的添加、删除一行
  7         window.onload=function () {
  8             // var oTab=document.getElementById('tab1');
  9             // var oBtn=document.getElementById('btn1');
 10             // var oName=document.getElementById('name');
 11             // var oAge=document.getElementById('age');
 12 
 13             // oBtn.onclick=function () {
 14             //     var oTr=document.createElement('tr');   //先创建一行
 15             //
 16             //     var oTd=document.createElement('td');   //再创建该行的列
 17             //     oTd.innerHTML=oTab.tBodies[0].rows.length+1;    //?
 18             //     oTr.appendChild(oTd);
 19             //
 20             //     var oTd=document.createElement('td');   //再创建该行的列
 21             //     oTd.innerHTML=oName.value;    //?
 22             //     oTr.appendChild(oTd);
 23             //
 24             //     var oTd=document.createElement('td');   //再创建该行的列
 25             //     oTd.innerHTML=oAge.value;    //?
 26             //     oTr.appendChild(oTd);
 27             //
 28             //     var oTd=document.createElement('td');   //再创建该行的列
 29             //     oTd.innerHTML='<a href="javascript:;">删除</a>';    //?
 30             //     oTr.appendChild(oTd);
 31             //
 32             //     oTd.getElementsByTagName('a')[0].onclick=function(){
 33             //         oTab.tBodies[0].removeChild(this.parentNode.parentNode);
 34             //     };
 35             //
 36             //     oTab.tBodies[0].appendChild(oTr);
 37             // };
 38 
 39             //此时，？处的问题就出现了，即在删除表格中用户添加的行时，其被删除下面的行的id并不会被改变，所以再次添加行时，
 40             //又从新开始计算行数而产生添加行的id值，这样就会出现id值相同的情况，而正常的情况下，某个人的id值是唯一的（当然
 41             //也有id值严格有序的，如有道云音乐中，删除歌单中的某一首歌，则下面的id值都会减一，来保证id的严格有序），所以在
 42             //删除某一行后，其id值将不会再出现，解决办法如下：
 43             var oTab=document.getElementById('tab1');
 44             var oBtn=document.getElementById('btn1');
 45             var oName=document.getElementById('name');
 46             var oAge=document.getElementById('age');
 47             var id=oTab.tBodies[0].rows.length+1;
 48 
 49             oBtn.onclick=function () {
 50                 var oTr=document.createElement('tr');   //先创建一行
 51 
 52                 var oTd=document.createElement('td');   //再创建该行的列
 53                 oTd.innerHTML=id++;    //?
 54                 oTr.appendChild(oTd);
 55 
 56                 var oTd=document.createElement('td');   //再创建该行的列
 57                 oTd.innerHTML=oName.value;    //?
 58                 oTr.appendChild(oTd);
 59 
 60                 var oTd=document.createElement('td');   //再创建该行的列
 61                 oTd.innerHTML=oAge.value;    //?
 62                 oTr.appendChild(oTd);
 63 
 64                 var oTd=document.createElement('td');   //再创建该行的列
 65                 oTd.innerHTML='<a href="javascript:;">删除</a>';    //?
 66                 oTr.appendChild(oTd);
 67 
 68                 oTd.getElementsByTagName('a')[0].onclick=function(){
 69                     oTab.tBodies[0].removeChild(this.parentNode.parentNode);
 70                 };
 71 
 72                 oTab.tBodies[0].appendChild(oTr);
 73             };
 74         };
 75     </script>
 76 </head>
 77 <body>
 78     姓名：<input id="name" type="text"/>
 79     年龄：<input id="age" type="text"/>
 80     <button id="btn1">添加</button>
 81     <table id="tab1" border="1" width="500">
 82         <thead><!--表头-->
 83             <td>ID</td>
 84             <td>姓名</td>
 85             <td>年龄</td>
 86             <td>操作</td>
 87         </thead>
 88         <tbody>     <!--其实就算没有<tbody>这个标签，浏览器也会自动给我们的表格加上，所以我们在写表格的时候最好加上该标签！这样会显得代码比较严谨-->
 89             <tr>
 90                 <td>1</td>
 91                 <td>haohao</td>
 92                 <td>26</td>
 93                 <td></td>
 94             </tr>
 95             <tr>
 96                 <td>2</td>
 97                 <td>maomao</td>
 98                 <td>25</td>
 99                 <td></td>
100             </tr>
101             <tr>
102                 <td>3</td>
103                 <td>hanhan</td>
104                 <td>24</td>
105                 <td></td>
106             </tr>
107             <tr>
108                 <td>4</td>
109                 <td>zhizhi</td>
110                 <td>23</td>
111                 <td></td>
112             </tr>
113         </tbody>
114     </table>
115 </body>
116 </html>

View Code

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

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

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

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

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

　　　　版本4：多关键词——split

　　　　高亮显示、筛选

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>DOM高级应用</title>
  6     <script>
  7         // //搜索---版本1：基础版本（字符串比较）
  8         // window.onload=function () {
  9         //     var oTab=document.getElementById('tab1');
 10         //     var oTxt=document.getElementById('name');
 11         //     var oBtn=document.getElementById('btn2');
 12         //
 13         //     oBtn.onclick=function () {
 14         //         for (var i=0; i<oTab.tBodies[0].rows.length; i++){
 15         //             if (oTab.tBodies[0].rows[i].cells[1].innerHTML==oTxt.value){
 16         //                 oTab.tBodies[0].rows[i].style.background='yellow';
 17         //             } else {
 18         //                 oTab.tBodies[0].rows[i].style.background='';
 19         //             }
 20         //         }
 21         //     };
 22         // };
 23 
 24         // //搜索---版本2：忽略大小写——大小写转换
 25         // window.onload=function () {
 26         //     var oTab=document.getElementById('tab1');
 27         //     var oTxt=document.getElementById('name');
 28         //     var oBtn=document.getElementById('btn2');
 29         //
 30         //     oBtn.onclick=function () {
 31         //         for (var i=0; i<oTab.tBodies[0].rows.length; i++){
 32         //             var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML;
 33         //             var sTxt=oTxt.value;
 34         //             if (sTab.toLowerCase()==sTxt.toLowerCase()){    //忽略大小写进行搜索
 35         //                 oTab.tBodies[0].rows[i].style.background='yellow';
 36         //             } else {
 37         //                 oTab.tBodies[0].rows[i].style.background='';
 38         //             }
 39         //         }
 40         //     };
 41         // };
 42 
 43         // //搜索---版本3：模糊搜索（在输入不完全的情况下，一样能搜索想要的事物）——search的使
 44         // // var str='abcdef';       //search()方法的使用
 45         // // alert(str.search('c'));     //返回值为：2 表示字符‘c’在字符串str中的位置（或索引值）为2；
 46         // // alert(str.search('de'));    //返回值为：3 表示字符串‘de’在字符串str中的位置是从3开始的。
 47         // // alert(str.search('g'));     //返回值为：-1表示所搜索的字符不在字符串str中。
 48         //
 49         // window.onload=function () {
 50         //     var oTab=document.getElementById('tab1');
 51         //     var oTxt=document.getElementById('name');
 52         //     var oBtn=document.getElementById('btn2');
 53         //
 54         //     oBtn.onclick=function () {
 55         //         for (var i=0; i<oTab.tBodies[0].rows.length; i++){
 56         //             var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
 57         //             var sTxt=oTxt.value.toLowerCase();
 58         //             if (sTab.search(sTxt)!=-1){    //如果搜索的值在表格字符串中存在
 59         //                 oTab.tBodies[0].rows[i].style.background='yellow';
 60         //             } else {
 61         //                 oTab.tBodies[0].rows[i].style.background='';
 62         //             }
 63         //         }
 64         //     };
 65         // };
 66         // 需要注意的是模糊搜索，如果你输入的字符可以在表格的多个行中找到匹配的值，系统会默认把所有符合条件的行 标出。
 67 
 68         //搜索---版本4：多关键词--split()方法
 69         // var str='abc 123 ert';
 70         // var arr=str.split(' '); //用空格切分字符串
 71         // alert(arr);     //返回值为：abc,123,ert 表示字符串被切分成三段，此时arr.length=3
 72         window.onload=function () {
 73             var oTab=document.getElementById('tab1');
 74             var oTxt=document.getElementById('name');
 75             var oBtn=document.getElementById('btn2');
 76 
 77             oBtn.onclick=function () {
 78                 for (var i=0; i<oTab.tBodies[0].rows.length; i++){
 79                     var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
 80                     var sTxt=oTxt.value.toLowerCase();
 81 
 82                     var arr=sTxt.split(' ');    //这里假设用户输入的关键字是以空格隔开的，所以以空格切分
 83 
 84                     //oTab.tBodies[0].rows[i].style.background='';　　//控制高亮
 85 　　　　　　　　　　　 oTab..display='none';　　//控制筛选
 86 
 87                     for (var j=0; j<arr.length; j++){
 88                         if (sTab.search(arr[j])!=-1){    //如果搜索的值在表格字符串中存在
 89                             //oTab.tBodies[0].rows[i].style.background='yellow';　　//控制高亮
 90 　　　　　　　　　　　　　　　　oTab.tBodies[0].rows[i].style.display='block';　　//控制筛选
 91                         }
 92                     }
 93                 }
 94             };
 95         };
 96         //该方法实现了，多关键字的同时搜索，不过这里假设用户输入的多个关键字是以空格隔开的
 97     </script>
 98 </head>
 99 <body>
100     姓名：<input id="name" type="text"/>   
101     <button id="btn2">搜索</button>（请输入需要搜索的name值！）
102     <table id="tab1" border="1" width="500">
103         <thead><!--表头-->
104             <td>ID</td>
105             <td>姓名</td>
106             <td>年龄</td>
107             <td>操作</td>
108         </thead>
109         <tbody>     <!--其实就算没有<tbody>这个标签，浏览器也会自动给我们的表格加上，所以我们在写表格的时候最好加上该标签！这样会显得代码比较严谨-->
110             <tr>
111                 <td>1</td>
112                 <td>haohao</td>
113                 <td>26</td>
114                 <td></td>
115             </tr>
116             <tr>
117                 <td>2</td>
118                 <td>maomao</td>
119                 <td>25</td>
120                 <td></td>
121             </tr>
122             <tr>
123                 <td>3</td>
124                 <td>hanhan</td>
125                 <td>24</td>
126                 <td></td>
127             </tr>
128             <tr>
129                 <td>4</td>
130                 <td>zhizhi</td>
131                 <td>23</td>
132                 <td></td>
133             </tr>
134         </tbody>
135     </table>
136 </body>
137 </html>

View Code

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

　　　　移动<li>

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>移动li标签</title>
 6     <style>
 7         #ul1{background: green;}
 8         #ul2{background: yellow;}
 9     </style>
10     <script>
11         window.onload=function () {
12             var oUl1=document.getElementById('ul1');
13             var oUl2=document.getElementById('ul2');
14             var oBtn=document.getElementById('btn1');
15 
16             oBtn.onclick=function () {
17                 var oLi=oUl1.children[0];
18 
19                 // //移动li的实现
20                 // // oUl1.removeChild(oLi);   //即使没有此句，效果依然没有影响
21                 // oUl2.appendChild(oLi);
22                 // //appendChild()  功能完整版：1.先把元素从原有父级上删掉，添加到新的父级里
23 
24                 //循环摆放li的实现
25                 oUl1.appendChild(oLi);
26             };
27         };
28     </script>
29 </head>
30 <body>
31     <ul id="ul1">
32         <li>1</li>
33         <li>2</li>
34         <li>2</li>
35         <li>3</li>
36     </ul>
37     <button id="btn1">移动</button>
38     <ul id="ul2">
39         <li>1</li>
40         <li>2</li>
41         <li>2</li>
42         <li>3</li>
43     </ul>
44 </body>
45 </html>

View Code

　　　　简单的<li>标签排序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>移动li标签</title>
 6     <style>
 7         #ul1{background: green;}
 8     </style>
 9     <script>
10         window.onload=function () {
11             var oUl1=document.getElementById('ul1');
12             var oBtn=document.getElementById('btn1');
13 
14             oBtn.onclick=function () {
15                 var aLi=oUl1.getElementsByTagName('li');
16                 // aLi.sort(); //报错，原因：之前说aLi是一个数组（Array），但其实aLi严格意义来说，
17                 // 并不能算是是一个数组（Array），而sort()是数组特有的一个排序方法；
18                 // aLi其实是一个元素“集合”，和数组相似，有length，可以用“[]”，但是没有sort、join等数组的函数，所以报错
19                 var arr=[];
20                 for (var i = 0; i<aLi.length; i++){
21                     arr[i]=aLi[i];
22                 }
23                 arr.sort(function (li1, li2) {  //排序需要一个比较函数，该函数有两个参数
24                     var n1=parseInt(li1.innerHTML);
25                     var n2=parseInt(li2.innerHTML);
26 
27                     return n1-n2;
28                 });
29                 for (var j=0; j<arr.length; j++){   //返回第i个值应该是多少？
30                     // alert(arr[j].innerHTML);    // 返回值是“3 10 11 ...” 正确
31                     alert('该把'+arr[j].innerHTML+'插入到最后了！');
32                     oUl1.appendChild(arr[j]);
33                 }
34             };
35         };
36     </script>
37 </head>
38 <body>
39     <button id="btn1">排序</button>
40     <ul id="ul1">
41         <li>10</li>
42         <li>21</li>
43         <li>25</li>
44         <li>3</li>
45         <li>11</li>
46         <li>28</li>
47         <li>26</li>
48         <li>30</li>
49     </ul>
50 </body>
51 </html>

View Code

　　表格排序的实现：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM高级应用</title>
 6     <script>
 7         window.onload=function () {
 8             var oTab=document.getElementById('tab1');
 9             var oBtn=document.getElementById('btn1');
10 
11             oBtn.onclick=function () {
12                 var arr=[];
13                 
14                 for (var i=0; i<oTab.tBodies[0].rows.length; i++){
15                     arr[i]=oTab.tBodies[0].rows[i];  //把所有元素集合中的值，添加到数组中                                        
16                 }
17                 arr.sort(function (tr1, tr2) {  //排序函数
18                     var n1=parseInt(tr1.cells[0].innerHTML);
19                     var n2=parseInt(tr2.cells[0].innerHTML);
20                     return n1-n2;
21                 });
22                 
23                 for (var i=0; i<arr.length; i++){
24                     alert('该把'+arr[i].innerHTML+'插入到最后了！');
25                     oTab.tBodies[0].appendChild(arr[i]);
26                 }
27             };
28         };
29         //该方法实现了，多关键字的同时搜索，不过这里假设用户输入的多个关键字是以空格隔开的
30     </script>
31 </head>
32 <body>
33     <button id="btn1">排序</button>
34     <table id="tab1" border="1" width="500">
35         <thead><!--表头-->
36             <td>ID</td>
37             <td>姓名</td>
38             <td>年龄</td>
39             <td>操作</td>
40         </thead>
41         <tbody>     <!--其实就算没有<tbody>这个标签，浏览器也会自动给我们的表格加上，所以我们在写表格的时候最好加上该标签！这样会显得代码比较严谨-->
42             <tr>
43                 <td>3</td>
44                 <td>haohao1</td>
45                 <td>26</td>
46                 <td></td>
47             </tr>
48             <tr>
49                 <td>2</td>
50                 <td>maomao1</td>
51                 <td>25</td>
52                 <td></td>
53             </tr>
54             <tr>
55                 <td>5</td>
56                 <td>hanhan1</td>
57                 <td>24</td>
58                 <td></td>
59             </tr>
60             <tr>
61                 <td>4</td>
62                 <td>zhizhi1</td>
63                 <td>23</td>
64                 <td></td>
65             </tr>
66             <tr>
67                 <td>1</td>
68                 <td>haohao2</td>
69                 <td>26</td>
70                 <td></td>
71             </tr>
72             <tr>
73                 <td>6</td>
74                 <td>maomao2</td>
75                 <td>25</td>
76                 <td></td>
77             </tr>
78             <tr>
79                 <td>8</td>
80                 <td>hanhan2</td>
81                 <td>24</td>
82                 <td></td>
83             </tr>
84             <tr>
85                 <td>7</td>
86                 <td>zhizhi2</td>
87                 <td>23</td>
88                 <td></td>
89             </tr>
90         </tbody>
91     </table>
92 </body>
93 </html>

View Code

表单应用

　　表单基础知识：

　　　　什么是表单：

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

　　　　action：提交到哪里

　　表单事件：

　　　　onsubmit：提交时发生

　　　　onreset：重置时发生

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单事件</title>
 6     <script>
 7         window.onload=function () {
 8             var oForm=document.getElementById('form1');
 9 
10             oForm.onsubmit=function () {    //提交时的提示
11                 alert('确认提交！');
12             };
13             oForm.onreset=function () {
14                 alert('已清空！');
15             };
16         };
17     </script>
18 </head>
19 <body>
20     <!--表单存在的目的，其实就是为了向服务器提供数据-->
21     <form id="form1" action="http://...">
22         用户名：<input type="text" name="use"/><br/><!--而这个name相当于前端的id，前端靠id来查找元素，而后台就是通过它
23         （name）来查找元素的-->
24         密码：<input type="password" name="pass"/>
25         <input type="submit"/><!--上面form行间元素“action就是提交的位置”-->
26         <input type="reset">
27     </form>
28 </body>
29 </html>

View Code

　　表单内容验证：

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

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

　　　　提交时检查：onsubmit

　　　　*后台数据检查：

相关阅读:
小*号
 进制转换升级版
 对角线的值
 使用Arduino开发板控制步进电机
 使用VisualGDB和OpenOCD调试STM32L0开发板
 基于STM32L476开发板的USB音频设备
 【FRDM-K64F学习笔记】使用ARM mbed和Keil MDK下载你的第一个程序
 使用超声波传感器HC-SR04检测障碍物
 使用Atmel Studio编程Arduino Uno开发板
 重新编程Hexiwear Docking Station扩展坞
原文地址：https://www.cnblogs.com/han-bky/p/10099836.html