深入JavaScript之DOM的高级应用
这次给大家带来深入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('tab1'); //获取第二行的'张三'// alert( oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
//table独有的简单操作
//上面的代码可以简写成下面的格式;// alert( oTab.tBodies('tbody')[0].rows('tr')[1].cells('td')[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 = 'green';
}
aRow[i].onmouseout = function () { this.style.backgroundColor = oldColor;
} if (i%2){
aRow[i].style.background = '';
}else {
aRow[i].style.background = '#ccc';
}
}
} </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('tab1'); var oName = document.getElementById('name'); var oAge = document.getElementById('age'); var oBtn = document.getElementById('btn1');
oBtn.onclick = function () { var oTr = document.createElement('tr'); var oTd = document.createElement('td');
oTd.innerHTML = oTab.tBodies[0].rows.length+1;
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); //注意:一定要添加到第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('tab1'); var oName = document.getElementById('name'); var oAge = document.getElementById('age'); var oBtn = document.getElementById('btn1'); //行数
var vRow = oTab.tBodies[0].rows.length+1;
oBtn.onclick = function () { var oTr = document.createElement('tr');
vRow++; var oTd = document.createElement('td');
oTd.innerHTML = vRow;
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 () { //注意:一定要从第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('tab1'); var oTxt = document.getElementById('name'); var oBtn = document.getElementById('btn1');
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(' '); //先把背景颜色重置
oTab.tBodies[0].rows[i].style.backgroundColor = ''; for (var j=0;j<arr.length;++j){ if (sTab.search(arr[j]) != -1){
oTab.tBodies[0].rows[i].style.backgroundColor = 'yellow';
}
}
}
}
} </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('btn1'); var oUl = document.getElementById('ul1');
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><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('tab1'); var oBtn = document.getElementById('btn1');
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>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci 深入JavaScript之DOM的高级应用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
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
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
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
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
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
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.
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
Memahami cap masa MySQL: fungsi, ciri dan senario aplikasi
Mar 15, 2024 pm 04:36 PM
Cap waktu MySQL ialah jenis data yang sangat penting, yang boleh menyimpan tarikh, masa atau tarikh tambah masa. Dalam proses pembangunan sebenar, penggunaan cap masa yang rasional boleh meningkatkan kecekapan operasi pangkalan data dan memudahkan pertanyaan dan pengiraan berkaitan masa. Artikel ini akan membincangkan fungsi, ciri dan senario aplikasi cap waktu MySQL, dan menerangkannya dengan contoh kod khusus. 1. Fungsi dan ciri cap waktu MySQL Terdapat dua jenis cap masa dalam MySQL, satu ialah TIMESTAMP
