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>

js

            //  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

请输入关键字：<input type="text" id="keyword"/>
<input type="button" id="search_btn" value="搜索"/>

<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>red</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>

js

var oTab = document.getElementById('tab');
            var oTxt = document.getElementById('keyword');
            var oSchBtn = document.getElementById('search_btn');


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

                    var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLocaleLowerCase();//1、不区分大小写
                    var sTxt = oTxt.value.toLocaleLowerCase();
                    var arr = sTxt.split(' ');

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

                    for(var j = 0; j < arr.length; j++){
                        // 2模糊查询     3关键字查询
                        if(sTab.search(arr[j])!= -1){
                            oTab.tBodies[0].rows[i].style.background = 'yellow';
                        }
                    }

                }
            }
        }

 

　　排序

　　　　移动li　　appendChild

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

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

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

            oBtn.onclick = function(){
                var aLi = oUl1.getElementsByTagName('li');
                var arr = [];

                for(var i = 0; i< aLi.length;i++){
                    arr.push(aLi[i]);
                }
                arr.sort(function(li1,li2){
                    var num1 = parseInt(li1.innerHTML);
                    var num2 = parseInt(li2.innerHTML);

                    return num1 - num2;
                })
                for(var i = 0; i<arr.length;i++){
                    oUl1.appendChild(arr[i]); //appendChild先从父级移除，然后再添加到父级
                }

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

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

　　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