Home >Web Front-end >JS Tutorial >In-depth analysis of advanced applications of JavaScript's DOM
In-depth analysis of advanced applications of JavaScript's DOM
- php中世界最好的语言Original
- 2018-03-13 13:35:131516browse
This time I will bring you an in-depth advanced application of DOM in JavaScript. What are the precautions for advanced DOM applications using JavaScript? Here are practical cases. Let’s take a look. .
Changing colors on alternate rows
<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. Adding tables
Dynamic adding of tables
<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.Deleting tables
<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 .Table search
Ignore case, fuzzy search, multi-keyword search
toLowerCase() Convert the string to all lowercase;
Fuzzy search search When found, return the position ;Not found, returns -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. Sorting
<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>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
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
In-depth basic application of JavaScript
##8 basic knowledge that must be paid attention to in JS
The above is the detailed content of In-depth analysis of advanced applications of JavaScript's DOM. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：In-depth knowledge of JavaScriptNext article：In-depth knowledge of JavaScript
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills