Rumah hujung hadapan web tutorial js 深入JavaScript之DOM的高级应用

深入JavaScript之DOM的高级应用

Mar 13, 2018 pm 01:35 PM
javascript js permohonan

这次给大家带来深入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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk
<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 oBtn = document.getElementById(&#39;btn1&#39;);
            oBtn.onclick = function () {                //aTr是个集合,他没有sort()这个方法
                var aTr = oTab.tBodies[0].rows;                //把tr放到一个数组里面
                var arr = [];                for(var i=0;i<aTr.length;i++){
                    arr.push(aTr[i]);
                }                //排序
                arr.sort(function (tr1, tr2) {                    var n1 = parseInt(tr1.cells[0].innerHTML);                    var n2 = parseInt(tr2.cells[0].innerHTML);                    return n1-n2;
                })                //添加
                for (var i=0;i<arr.length;i++){
                    oTab.tBodies[0].appendChild(arr[i]);
                }
            }

        }    </script></head><body><div id="div1">
    <div id="form">
        <input id="btn1" type="button" value="排序">
    </div>
    <table id="tab1">
        <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
        </thead>

        <tbody>
        <tr>
            <td>2</td>
            <td>张三</td>
            <td>32</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>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>17</td>
            <td></td>
        </tr>
        </tbody>
    </table></div></body></html>
Salin selepas log masuk

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

推荐阅读:

深入JavaScript之基础应用

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

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

Kenyataan Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Peranan dan aplikasi praktikal simbol anak panah dalam PHP Peranan dan aplikasi praktikal simbol anak panah dalam PHP Mar 22, 2024 am 11:30 AM

Peranan dan aplikasi praktikal simbol anak panah dalam PHP Dalam PHP, simbol anak panah (->) biasanya digunakan untuk mengakses sifat dan kaedah objek. Objek adalah salah satu konsep asas pengaturcaraan berorientasikan objek (OOP) dalam PHP Dalam pembangunan sebenar, simbol anak panah memainkan peranan penting dalam mengendalikan objek. Artikel ini akan memperkenalkan peranan dan aplikasi praktikal simbol anak panah, dan menyediakan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik. 1. Peranan simbol anak panah untuk mengakses sifat sesuatu objek Simbol anak panah boleh digunakan untuk mengakses sifat objek. Apabila kita instantiate sepasang

Bagaimana untuk membuat asal Padam dari Skrin Utama dalam iPhone Bagaimana untuk membuat asal Padam dari Skrin Utama dalam iPhone Apr 17, 2024 pm 07:37 PM

Memadamkan sesuatu yang penting daripada skrin utama anda dan cuba mendapatkannya semula? Anda boleh meletakkan ikon apl kembali pada skrin dalam pelbagai cara. Kami telah membincangkan semua kaedah yang boleh anda ikuti dan meletakkan semula ikon aplikasi pada skrin utama Cara Buat Asal Alih Keluar dari Skrin Utama dalam iPhone Seperti yang kami nyatakan sebelum ini, terdapat beberapa cara untuk memulihkan perubahan ini pada iPhone. Kaedah 1 – Gantikan Ikon Apl dalam Pustaka Apl Anda boleh meletakkan ikon apl pada skrin utama anda terus daripada Pustaka Apl. Langkah 1 – Leret ke sisi untuk mencari semua apl dalam pustaka apl. Langkah 2 – Cari ikon apl yang anda padamkan sebelum ini. Langkah 3 – Hanya seret ikon apl dari pustaka utama ke lokasi yang betul pada skrin utama. Ini adalah gambar rajah aplikasi

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Daripada pemula hingga mahir: Terokai pelbagai senario aplikasi arahan tee Linux Daripada pemula hingga mahir: Terokai pelbagai senario aplikasi arahan tee Linux Mar 20, 2024 am 10:00 AM

Perintah Linuxtee ialah alat baris arahan yang sangat berguna yang boleh menulis output ke fail atau menghantar output ke arahan lain tanpa menjejaskan output sedia ada. Dalam artikel ini, kami akan meneroka secara mendalam pelbagai senario aplikasi arahan Linuxtee, daripada kemasukan kepada kemahiran. 1. Penggunaan asas Mula-mula, mari kita lihat pada penggunaan asas arahan tee. Sintaks arahan tee adalah seperti berikut: tee[OPTION]...[FAIL]...Arahan ini akan membaca data daripada input standard dan menyimpan data ke

Hubungan antara js dan vue Hubungan antara js dan vue Mar 11, 2024 pm 05:21 PM

Hubungan antara js dan vue: 1. JS sebagai asas pembangunan Web; 2. Kebangkitan Vue.js sebagai rangka kerja hadapan 3. Hubungan pelengkap antara JS dan Vue; Vue.

Terokai kelebihan dan senario aplikasi bahasa Go Terokai kelebihan dan senario aplikasi bahasa Go Mar 27, 2024 pm 03:48 PM

Bahasa Go ialah bahasa pengaturcaraan sumber terbuka yang dibangunkan oleh Google dan pertama kali dikeluarkan pada tahun 2007. Ia direka bentuk untuk menjadi bahasa yang mudah, mudah dipelajari, cekap dan sangat bersesuaian, serta digemari oleh semakin ramai pembangun. Artikel ini akan meneroka kelebihan bahasa Go, memperkenalkan beberapa senario aplikasi yang sesuai untuk bahasa Go dan memberikan contoh kod khusus. Kelebihan: Konkurensi yang kuat: Bahasa Go mempunyai sokongan terbina dalam untuk benang-goroutine ringan, yang boleh melaksanakan pengaturcaraan serentak dengan mudah. Goroutin boleh dimulakan dengan menggunakan kata kunci go

Aplikasi luas Linux dalam bidang pengkomputeran awan Aplikasi luas Linux dalam bidang pengkomputeran awan Mar 20, 2024 pm 04:51 PM

Aplikasi Linux yang luas dalam bidang pengkomputeran awan Dengan perkembangan berterusan dan mempopularkan teknologi pengkomputeran awan, Linux, sebagai sistem pengendalian sumber terbuka, memainkan peranan penting dalam bidang pengkomputeran awan. Disebabkan oleh kestabilan, keselamatan dan fleksibilitinya, sistem Linux digunakan secara meluas dalam pelbagai platform dan perkhidmatan pengkomputeran awan, menyediakan asas yang kukuh untuk pembangunan teknologi pengkomputeran awan. Artikel ini akan memperkenalkan rangkaian luas aplikasi Linux dalam bidang pengkomputeran awan dan memberikan contoh kod khusus. 1. Aplikasi teknologi virtualisasi Linux dalam platform pengkomputeran awan Teknologi Virtualisasi

Era AI JS sudah tiba! Era AI JS sudah tiba! Apr 08, 2024 am 09:10 AM

Pengenalan kepada JS-Torch JS-Torch ialah perpustakaan JavaScript pembelajaran mendalam yang sintaksnya hampir sama dengan PyTorch. Ia mengandungi objek tensor berfungsi sepenuhnya (boleh digunakan dengan kecerunan yang dijejaki), lapisan dan fungsi pembelajaran mendalam, dan enjin pembezaan automatik. JS-Torch sesuai untuk penyelidikan pembelajaran mendalam dalam JavaScript dan menyediakan banyak alatan dan fungsi yang mudah untuk mempercepatkan pembangunan pembelajaran mendalam. Image PyTorch ialah rangka kerja pembelajaran mendalam sumber terbuka yang dibangunkan dan diselenggara oleh pasukan penyelidik Meta. Ia menyediakan set alat dan perpustakaan yang kaya untuk membina dan melatih model rangkaian saraf. PyTorch direka bentuk untuk menjadi ringkas, fleksibel dan mudah digunakan, dan ciri graf pengiraan dinamiknya menjadikan

See all articles