第七节 DOM操作应用-高级

Posted han-bky

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第七节 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

    *后台数据检查:

 


以上是关于第七节 DOM操作应用-高级的主要内容,如果未能解决你的问题,请参考以下文章

应用层-第七节:万维网WWW

Linux内核第七节 20135332武西垚

实验第七节——用户chaincode相关操作

实验第七节——用户chaincode相关操作

实验第七节——用户chaincode相关操作

第七节——异常