L9-DOM高级应用

DOM高级应用主要是讲解表格的应用和表单的应用。

表格的应用：

　　我们一般获取表格第一行第一列的方法是：document.getElementsByTagName('table').document.getElementsByTagName('tr')[0].getElementsByTagName('td')[0];

其实有简便的操作：oTab.tBodies[0].rows[0].cells[0]。（tBodies、tHead、tFoot、rows、cells等）。接下来应用这写简便操作对表格进行案例分析。

　　例子：隔行变色

<table width="400px"; border="1" id="tab">
    <thead>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>fruit</td>
            <td>23</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>yellow</td>
            <td>22</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>fruit</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>Mick</td>
            <td>34</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>Nice</td>
            <td>32</td>
            <td></td>
        </tr>
    </tbody>
</table>

            //  1、找出yellow这个单元格并设置其背景颜色为yellow
            var oTab = document.getElementById('tab');
            oTab.tBodies[0].rows[1].cells[1].style.background = 'yellow';

            //  2、隔行变色(单灰双白)
            var aTr = oTab.tBodies[0].rows;
            //alert(aTr.length);
            for(var i = 0; i < aTr.length; i++ ){
                if(i%2){
                    aTr[i].style.background = " ";
                }
                else{
                    aTr[i].style.background = "#ccc";
                }
            }

                //   3、鼠标移入高亮
            var oldColor = " "; //  声明一个变量存储鼠标移入单元格之前的背景颜色值

            for(var i = 0; i < aTr.length; i++ ){
                aTr[i].onmouseover = function(){
                    oldColor = this.style.background;
                    this.style.background = "red";
                }
                aTr[i].onmouseout = function(){
                    this.style.background = oldColor;
                }
            }

            var oRows = oTab.tBodies[0].rows.length+1;
            //alert(oRows);
            //   4、DOM操作添加一行
            var oName = document.getElementById('name');
            var oAge = document.getElementById('age');
            var oBtn = document.getElementById('btn');

            oBtn.onclick = function(){
                //现有rows ,再有cells
                var oTr = document.createElement('tr');

                var oTd = document.createElement('td');
                oTd.innerHTML =oRows++;
                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.removeChild(this.parentNode.parentNode);
                }

                oTab.appendChild(oTr);

表格的应用-2

　　搜索　　(高亮显示、筛选)

　　版本一：基本搜索——字符串比较

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

　　版本三：模糊查询——search的使用

　　版本四：多关键字——split

html

 1 请输入关键字：<input type="text" id="keyword"/>
 2 <input type="button" id="search_btn" value="搜索"/>
 3 
 4 <table width="400px"; border="1" id="tab">
 5     <thead>
 6     <tr>
 7         <td>ID</td>
 8         <td>姓名</td>
 9         <td>年龄</td>
10         <td>操作</td>
11     </tr>
12     </thead>
13     <tbody>
14     <tr>
15         <td>1</td>
16         <td>red</td>
17         <td>23</td>
18         <td></td>
19     </tr>
20     <tr>
21         <td>2</td>
22         <td>yellow</td>
23         <td>22</td>
24         <td></td>
25     </tr>
26     <tr>
27         <td>3</td>
28         <td>fruit</td>
29         <td>25</td>
30         <td></td>
31     </tr>
32     <tr>
33         <td>4</td>
34         <td>Mick</td>
35         <td>34</td>
36         <td></td>
37     </tr>
38     <tr>
39         <td>5</td>
40         <td>Nice</td>
41         <td>32</td>
42         <td></td>
43     </tr>
44     </tbody>
45 </table>

View Code

 1 var oTab = document.getElementById('tab');
 2             var oTxt = document.getElementById('keyword');
 3             var oSchBtn = document.getElementById('search_btn');
 4 
 5 
 6             oSchBtn.onclick = function(){
 7                 for(var i=0; i< oTab.tBodies[0].rows.length; i++){
 8 
 9                     var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLocaleLowerCase();//1、不区分大小写
10                     var sTxt = oTxt.value.toLocaleLowerCase();
11                     var arr = sTxt.split(' ');
12 
13                     oTab.tBodies[0].rows[i].style.background='';
14 
15                     for(var j = 0; j < arr.length; j++){
16                         // 2模糊查询     3关键字查询
17                         if(sTab.search(arr[j])!= -1){
18                             oTab.tBodies[0].rows[i].style.background = 'yellow';
19                         }
20                     }
21 
22                 }
23             }
24         }

View Code

　　排序

　　　　移动li　　appendChild

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

<ul id="ul1">
    <li>81</li>
    <li>22</li>
    <li>13</li>
    <li>64</li>
</ul>
<input type="button" id="btn1" value="排序"/>

 1 var oUl1 = document.getElementById('ul1');
 2             var oBtn = document.getElementById('btn1');
 3 
 4             oBtn.onclick = function(){
 5                 var aLi = oUl1.getElementsByTagName('li');
 6                 var arr = [];
 7 
 8                 for(var i = 0; i< aLi.length;i++){
 9                     arr.push(aLi[i]);
10                 }
11                 arr.sort(function(li1,li2){
12                     var num1 = parseInt(li1.innerHTML);
13                     var num2 = parseInt(li2.innerHTML);
14 
15                     return num1 - num2;
16                 })
17                 for(var i = 0; i<arr.length;i++){
18                     oUl1.appendChild(arr[i]); //appendChild先从父级移除，然后再添加到父级
19                 }

View Code

接下来的是表单的应用（入门）

　　什么是表单：简要理解就是向服务器提交数据。比如：用户注册

　　action　　提交到哪里

　　表单事件

　　　　onsubmit　　提交时发生

　　　　onreset　　重置时放生

　　表单的内容验证：

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

　　　　输入时，失去焦点时验证　　onkeyup onblur　　　　

请输入用户名：<input type="text" id="user"/><span id="txt1"></span><br/>
请输入密码：<input type="password" id="pass"/><span id="txt2"></span>
<input type="submit" id="btn1" value="提交"/>

 var user = document.getElementById('user');
            var pass = document.getElementById('pass');
            var uTxt = document.getElementById('txt1');
            var pTxt = document.getElementById('txt2');

            user.onblur = function(){
               if(user.value.length<6){
                   uTxt.innerHTML = "用户名不能少于6位";
               }
                else{
                   uTxt.innerHTML = "";
               }
            }

　　　提交时检测　　onsubmit