第七节 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>
需要注意的是，每个表格可以有好多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 };
添加、删除表格中的一行：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>
搜索 ：其实一般情况下搜索都是后台执行的，一般不用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>
排序：<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>
简单的<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>
表格排序的实现：
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>
表单应用
表单基础知识：
什么是表单：
向服务器提交数据，比如：用户注册
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>
表单内容验证：
阻止用户输入非法字符：阻止事件
输入时、失去焦点是验证：onkeyup、onblur
提交时检查：onsubmit
*后台数据检查：
