Rumah  >  Artikel  >  hujung hadapan web  >  深入JavaScript之DOM的高级应用

深入JavaScript之DOM的高级应用

php中世界最好的语言
php中世界最好的语言asal
2018-03-13 13:35:131464semak imbas

这次给大家带来深入JavaScript之DOM的高级应用,使用JavaScript的DOM高级应用的注意事项有哪些,下面就是实战案例,一起来看一下。

隔行变色

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>04-表格的应用</title>
    <style>
        table{            margin: 100px auto;            width: 300px;            text-align: center;            background-color: black;
        }        table tr {            background-color: white;
        }    </style>
    <script>
        window.onload = function () {            var oTab = document.getElementById(&#39;tab1&#39;);            //获取第二行的&#39;张三&#39;//            alert( oTab.getElementsByTagName(&#39;tbody&#39;)[0].getElementsByTagName(&#39;tr&#39;)[1].getElementsByTagName(&#39;td&#39;)[1].innerHTML);
            //table独有的简单操作
            //上面的代码可以简写成下面的格式;//            alert( oTab.tBodies(&#39;tbody&#39;)[0].rows(&#39;tr&#39;)[1].cells(&#39;td&#39;)[1].innerHTML);
            /**
             *90年代,div+css没人用,人们用的几乎全是table,于是乎,就有了table的便捷操作.
             * tBodies(一个table里可以有多个tbody),tHead,tFoot,rows,cells等便捷操作
             * */
            //隔行变色
            var aRow = oTab.tBodies[0].rows;//            alert(aRow.length);
            //记录一下颜色
            var oldColor = null;            for(var i=0;i<aRow.length;i++){
                aRow[i].onmouseover = function () {                    //先记录一下之前的颜色
                    oldColor = this.style.backgroundColor;                    this.style.background = &#39;green&#39;;
                }
                aRow[i].onmouseout = function () {                    this.style.backgroundColor = oldColor;
                }                if (i%2){
                    aRow[i].style.background = &#39;&#39;;
                }else {
                    aRow[i].style.background = &#39;#ccc&#39;;
                }
            }
        }    </script></head><body><table id="tab1">
    <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Blue</td>
        <td>27</td>
    </tr>
    <tr>
        <td>2</td>
        <td>张三</td>
        <td>32</td>
    </tr>
    <tr>
        <td>3</td>
        <td>李四</td>
        <td>17</td>
    </tr>
    <tr>
        <td>4</td>
        <td>王五</td>
        <td>28</td>
    </tr>
    <tr>
        <td>5</td>
        <td>张伟</td>
        <td>35</td>
    </tr>
    </tbody></table></body></html>

2.表格的添加

表格的动态添加

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>04-表格的添加 删除</title>
    <style>
        #div1{            text-align: center;
        }        #div1 #form{            margin: 100px 0 10px;
        }        #div1 table{            margin: 0px auto;            width: 300px;            text-align: center;            background-color: black;
        }        table tr {            background-color: white;
        }    </style>
    <script>
        window.onload = function () {            var oTab = document.getElementById(&#39;tab1&#39;);            var oName = document.getElementById(&#39;name&#39;);            var oAge = document.getElementById(&#39;age&#39;);            var oBtn = document.getElementById(&#39;btn1&#39;);
            oBtn.onclick = function () {                var oTr = document.createElement(&#39;tr&#39;);                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = oTab.tBodies[0].rows.length+1;
                oTr.appendChild(oTd);                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = oName.value;
                oTr.appendChild(oTd);                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = oAge.value;
                oTr.appendChild(oTd);                //注意:一定要添加到第0个tBodies上
                oTab.tBodies[0].appendChild(oTr);
            }
        }    </script></head><body><div id="div1">
    <div id="form">
        姓名:<input id="name" type="text">
        年龄:<input id="age" type="text">
        <input id="btn1" type="button" value="添加">
    </div>
    <table id="tab1">
        <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td>27</td>
        </tr>
        <tr>
            <td>2</td>
            <td>张三</td>
            <td>32</td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>17</td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>28</td>
        </tr>
        <tr>
            <td>5</td>
            <td>张伟</td>
            <td>35</td>
        </tr>
        </tbody>
    </table></div></body></html>

3.表格的删除

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>05-表格的添加 删除</title>
    <style>
        #div1{            text-align: center;
        }        #div1 #form{            margin: 100px 0 10px;
        }        #div1 table{            margin: 0px auto;            width: 300px;            text-align: center;            background-color: black;
        }        table tr {            background-color: white;
        }    </style>
    <script>
        window.onload = function () {            var oTab = document.getElementById(&#39;tab1&#39;);            var oName = document.getElementById(&#39;name&#39;);            var oAge = document.getElementById(&#39;age&#39;);            var oBtn = document.getElementById(&#39;btn1&#39;);            //行数
            var vRow = oTab.tBodies[0].rows.length+1;
            oBtn.onclick = function () {                var oTr = document.createElement(&#39;tr&#39;);
                vRow++;                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = vRow;
                oTr.appendChild(oTd);                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = oName.value;
                oTr.appendChild(oTd);                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = oAge.value;
                oTr.appendChild(oTd);                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = &#39;<a href="javaScript:;">删除</a>&#39;;
                oTr.appendChild(oTd);
                oTd.getElementsByTagName(&#39;a&#39;)[0].onclick = function () {                    //注意:一定要从第0个tBodies上删除.
                    //this.parentNode 指的是 td
                    //this.parentNode.parentNode 指的是 tr
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                };                //注意:一定要添加到第0个tBodies上
                oTab.tBodies[0].appendChild(oTr);
            }
        }    </script></head><body><div id="div1">
    <div id="form">
        姓名:<input id="name" type="text">
        年龄:<input id="age" type="text">
        <input id="btn1" type="button" value="添加">
    </div>
    <table id="tab1">
        <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>张三</td>
            <td>32</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>17</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>28</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>张伟</td>
            <td>35</td>
            <td></td>
        </tr>
        </tbody>
    </table></div></body></html>

4.表格的搜索

忽略大小写 , 模糊搜索 , 多关键字搜索
toLowerCase() 把字符串转成全小写的形式;
模糊搜索 search 当找到的时候,返回位置;找不到,返回-1;

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>06-表格的搜索</title>
    <style>
        #div1{            text-align: center;
        }        #div1 #form{            margin: 100px 0 10px;
        }        #div1 table{            margin: 0px auto;            width: 300px;            text-align: center;            background-color: black;
        }        table tr {            background-color: white;
        }    </style>
    <script>
        window.onload = function () {            var oTab = document.getElementById(&#39;tab1&#39;);            var oTxt = document.getElementById(&#39;name&#39;);            var oBtn = document.getElementById(&#39;btn1&#39;);
            oBtn.onclick = function () {                for (var i=0;i<oTab.tBodies[0].rows.length;i++){                    //忽略大小写
                    //toLowerCase() 把字符串转成全小写的形式;
                    //把if里面两边都转成全小写的形式;
                    var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();                    var sTxt = oTxt.value.toLowerCase();                    //模糊搜索 search 当找到的时候,返回位置;找不到,返回-1
                    //search()
                    //多关键字搜索
                    //假设多个关键字之间用 空格 隔开的,以后可以使用正则表达式
                    var arr = sTxt.split(&#39; &#39;);                    //先把背景颜色重置
                    oTab.tBodies[0].rows[i].style.backgroundColor = &#39;&#39;;                    for (var j=0;j<arr.length;++j){                        if (sTab.search(arr[j]) != -1){
                            oTab.tBodies[0].rows[i].style.backgroundColor = &#39;yellow&#39;;
                        }
                    }
                }
            }
        }    </script></head><body><div id="div1">
    <div id="form">
        姓名:<input id="name" type="text">
        <input id="btn1" type="button" value="搜索">
    </div>
    <table id="tab1">
        <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>张三</td>
            <td>32</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>17</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>28</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>张伟</td>
            <td>35</td>
            <td></td>
        </tr>
        </tbody>
    </table></div></body></html>

5.排序

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>08-排序</title>
    <script>
        window.onload = function () {            var btn = document.getElementById(&#39;btn1&#39;);            var oUl = document.getElementById(&#39;ul1&#39;);
            btn.onclick = function () {                //先初始化数组
                var arr = [];                for (var i=0;i<oUl.children.length;i++){
                   arr.push(oUl.children[i]);                    //排序
                    arr.sort(function (li1,li2) {                        //最好不要依赖隐式类型转换,提前给强转下
                        var n1 = parseInt(li1.innerHTML);                        var n2 = parseInt(li2.innerHTML);                        return n1-n2;
                    })
                }                //再重新添加
                for(var i=0;i<arr.length;i++){
                    oUl.appendChild(arr[i]);
                }
            }
        }    </script></head><body><input id="btn1" type="button" value="排序"><ul id="ul1">
    <li>34</li>
    <li>25</li>
    <li>9</li>
    <li>88</li>
    <li>54</li></ul></body></html>
9fd01892b579bba0c343404bcccd70fb93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a706-表格的排序6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
        #div1{            text-align: center;
        }        #div1 #form{            margin: 100px 0 10px;
        }        #div1 table{            margin: 0px auto;            width: 300px;            text-align: center;            background-color: black;
        }        table tr {            background-color: white;
        }    531ac245ce3e4fe3d50054a55f265927
    3f1c4e4b6b16bbbd69b2ee476dc4f83a
        window.onload = function () {            var oTab = document.getElementById('tab1');            var oBtn = document.getElementById('btn1');
            oBtn.onclick = function () {                //aTr是个集合,他没有sort()这个方法
                var aTr = oTab.tBodies[0].rows;                //把tr放到一个数组里面
                var arr = [];                for(var i=0;ia1c07c5f1e02751323aca951a3a5eb569c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d64cb571ed5952d9b43da1f2d70a36e91
    3f44b33c791f1c420f39aac77a9dde29
        7a51dde6cf86cfa9d2cade29053872ad
    16b28748ea4df4d9c2150843fecfba68
    ec280d8942689ac37cb2dc06a8c6db29
        ae20bdd317918ca68efdc799512a9b39
        b6c5a531a458a2e790c1fd6421739d1cIDb90dd5946f0946207856a8a37f441edf
        b6c5a531a458a2e790c1fd6421739d1c姓名b90dd5946f0946207856a8a37f441edf
        b6c5a531a458a2e790c1fd6421739d1c年龄b90dd5946f0946207856a8a37f441edf
        b6c5a531a458a2e790c1fd6421739d1c操作b90dd5946f0946207856a8a37f441edf
        7943277d65306330563feb42dc8c705a

        92cee25da80fac49f6fb6eec5fd2c22a
        a34de1251f0d9fe1e645927f19a896e8
            b6c5a531a458a2e790c1fd6421739d1c2b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1c张三b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1c32b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
        fd273fcf5bcad3dfdad3c41bd81ad3e5
        a34de1251f0d9fe1e645927f19a896e8
            b6c5a531a458a2e790c1fd6421739d1c4b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1c王五b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1c28b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
        fd273fcf5bcad3dfdad3c41bd81ad3e5
        a34de1251f0d9fe1e645927f19a896e8
            b6c5a531a458a2e790c1fd6421739d1c5b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1c张伟b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1c35b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
        fd273fcf5bcad3dfdad3c41bd81ad3e5
        a34de1251f0d9fe1e645927f19a896e8
            b6c5a531a458a2e790c1fd6421739d1c1b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1cBlueb90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1c27b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
        fd273fcf5bcad3dfdad3c41bd81ad3e5
        a34de1251f0d9fe1e645927f19a896e8
            b6c5a531a458a2e790c1fd6421739d1c3b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1c李四b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1c17b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
        fd273fcf5bcad3dfdad3c41bd81ad3e5
        ca745a59da05f784b8811374296574e1
    f16b1740fad44fb09bfe928bcc527e0816b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

深入JavaScript之基础应用

JS的8个必须注意的基础知识

Atas ialah kandungan terperinci 深入JavaScript之DOM的高级应用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:深入JavaScript之小知识点Artikel seterusnya:深入JavaScript之JS的运动