这次给大家带来深入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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
深入javascript之基础应用
js的8个必须注意的基础知识
以上就是深入javascript之dom的高级应用的详细内容。