JavaScript基础
本章节通过练习需要重点掌握对DOM增删改查过程!，代码量变多，但是并不复杂难懂
91. DOM查询（二）
获取元素节点的子节点，通过具体的元素节点调用
getElementsByTagName( )：方法，返回当前节点的指定标签名后代节点
childNodes：属性，表示当前节点的所有子节点，包括文本节点，IE8及以下的浏览器不会将空白文本当作子节点
children：属性，表示当前节点的所有子元素，不包括文本节点，且浏览器通用
firstChild：属性，表示当前节点的第一个子节点
firstElementChild：属性，表示当前节点的第一个子元素，不包括文本节点，IE8以下不兼容
lastChild：属性，表示当前节点的最后一个子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var btn4 = document.getElementById("btn4");
btn4.onclick = function(){
var city = document.getElementById("city");
var lis = city.getElementsByTagName("li"); //通过具体的元素节点调用getElementsByTagName()
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
};
var btn5 = document.getElementById("btn5");
btn5.onclick = function(){
var city = document.getElementById("city");
var cns = city.childNodes;//放回#city的所有子节点，包括文本节点（如前面空白换行）
alert(cns.length);
// for(var i=0;i<cns.length;i++){
// alert(cns[i]);
// }
var cnss = city.children;//返回#city的所有子元素，不包括文本节点
alert(cnss.length);
};
var btn6 = document.getElementById("btn6");
btn6.onclick = function(){
var people = document.getElementById("people");
var firstChild = people.firstChild;
alert(firstChild);//返回当前元素的第一个子节点，包括文本节点（如前面空白换行）
var firstChilds = people.firstElementChild;
alert(firstChilds.innerHTML);//返回当前元素的第一个子元素，不包括文本节点
};
var btn7 = document.getElementById("btn7");
btn7.onclick = function(){
var people = document.getElementById("people");
var lastChild = people.lastChild;
alert(lastChild);//返回当前元素的第一个子节点，包括文本节点（如前面空白换行）
var lastChilds = people.lastElementChild;
alert(lastChilds.innerHTML);//返回当前元素的第一个子元素，不包括文本节点
}
};
</script>
</head>
<body>
<ul id="city">
<li >北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<ul id="people">
<li >张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<br>
<button id="btn4">查找#city的所有li节点</button>
<button id="btn5">查找#city的所有子节点</button>
<button id="btn6">查找#people的第一个子节点</button>
<button id="btn7">查找#people的最后一个子节点</button>
</body>
</html>
92. DOM查询（三）
获取父节点和兄弟节点，通过具体的节点调用
parentNode：属性，表示当前节点的父节点，不会是文本节点
previousSibling：属性，表示当前节点的前一个兄弟节点，可能获取到空白的文本
nextSibling：属性，表示当前节点的后一个兄弟节点
innerText：属性，获取到元素的文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function myClick(idStr,fun){//定义一个通用点击响应函数
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function(){
myClick("btn8",function(){
var bj = document.getElementById("bj");
var pn = bj.parentNode;
alert(pn.innerText);//innerText获取元素内部的文本内容
});
myClick("btn9",function(){
var ls = document.getElementById("ls");
var pre = ls.previousSibling;
alert(pre.innerText);//previousSibling:返回当前元素的前一个兄弟节点，包括文本节点
var pres = ls.previousElementSibling;
alert(pres.innerText);//previousElementSibling：返回当前元素的前一个兄弟元素，不包括文本节点，IE8及以下不兼容
});
myClick("btn10",function(){
var um = document.getElementById("username");
alert(um.value);
});
myClick("btn11",function(){
var um = document.getElementById("username");
um.value = "我是张三";
alert(um.value);
});
};
</script>
</head>
<body>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<ul id="people">
<li id="zs">张三</li>
<li id="ls">李四</li>
<li>王五</li>
</ul>
name:<input type="text" name="name" id="username" value="张三">
<br>
<br>
<button id="btn8">查找#bj的父节点</button>
<button id="btn9">查找#ls的前一个兄弟节点</button>
<button id="btn10">读取username的value属性值</button>
<button id="btn11">设置username的value属性值</button>
</body>
</html>
93. 全选练习
在事件响应函数中，响应函数给谁绑定的，this就是谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
margin: 5px 10px;
}
button{
margin: 5px 10px;
}
</style>
<script>
window.onload = function(){
var items = document.getElementsByName("items");
//全选按钮
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
//获取4个多选框
for(var i=0;i<items.length;i++){
items[i].checked = true;
}
checkedAllBox.checked = true;
};
//全不选按钮
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
//获取4个多选框
for(var i=0;i<items.length;i++){
items[i].checked = false;
}
checkedAllBox.checked = false;
};
//反选按钮
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
checkedAllBox.checked = true;//默认设置为选中状态
//获取4个多选框
for(var i=0;i<items.length;i++){
// if(items[i].checked){
// items[i].checked = false;
// }
// else{
// items[i].checked = true;
// }
items[i].checked = !items[i].checked
if(!items[i].checked){
checkedAllBox.checked = false;//有一个没选中，设置为没选中状态
}
}
};
//提交按钮
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
//获取4个多选框
for(var i=0;i<items.length;i++){
if(items[i].checked){
alert(items[i].value);
}
}
};
//全选\全不选按钮
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function(){
//获取4个多选框
for(var i=0;i<items.length;i++){
items[i].checked = this.checked;
}
}
//items
for(var i=0;i<items.length;i++){
items[i].onclick = function(){
checkedAllBox.checked = true;//设置为选中状态
for(var j=0;j<items.length;j++){
if(!items[j].checked){
checkedAllBox.checked = false;//有一个没选中，设置为没选中状态
break;
}
}
};
}
};
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是?<input type="checkbox" id="checkedAllBox">全选/全不选
<br>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkedAllBtn" value="全 选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反 选">
<input type="button" id="sendBtn" value="提 交">
</form>
</body>
</html>
94. DOM查询其它方法
获取body标签：在document中有一个属性body，保存的是body的引用
例如：var body = document.body;
document.documentElement：保存的是HTML根标签
document.all：代表页面中所有元素
document.getElementsByClassName( )：根据类选择器查询一个元素节点对象，支持IE9+
document.querySelector( )：根据一个CSS选择器来查询一个元素节点对象，支持IE8+，该方法只会返回唯一的第一个元素
document.querySelectorAll( )：根据一个CSS选择器来查询多个元素节点对象，支持IE8+，即使符合条件的元素只有一个，也返回数组保存结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var body = document.body;
console.log(body);//获取body标签
var html = document.documentElement;
console.log(html);//获取html标签
var all = document.all;
console.log(all);//获取页面所有元素
for(var i=0;i<all.length;i++){
console.log(all[i],i);
}
var box = document.getElementsByClassName("box");//支持IE9+
console.log(box);
var inDiv = document.querySelector(".box div");//支持IE8+
console.log(inDiv.innerHTML);
};
</script>
</head>
<body>
<div class="box">
<div>我是内部div</div>
</div>
</body>
</html>
95. DOM增删改
document.creatElement( )：创建一个元素节点对象，需要一个标签名作为参数，根据该标签名创建元素节点对象，并将创建的对象作为返回值返回
document.creatTextNode( )：创建一个文本节点对象，需要一个文本内容作为参数，根据该内容创建文本节点，并将新的节点返回
appendChild( )：向一个父节点添加一个新的子节点
insertBefore(新节点,旧节点)：在指定的子节点前面插入新的子节点，需要父节点调用
replaceChild(新节点,旧节点)：使用指定的子节点替换已有的子节点，需要父节点调用
removeChild( )：删除子节点，需要父节点调用
innerHTML：该属性也可以完成DOM的增删改相关操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 10px 5px;
}
</style>
<script>
window.onload = function(){
//创建一个"广州"节点,添加到#city下,先创建li元素节点，再创建文本节点
myClick("btn1",function(){
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);//新创建的li中添加广州文本节点，内存中
var city = document.getElementById("city");
city.appendChild(li);//将新创建的节点加到#city下以在页面中显示
});
//将"广州"节点插入到#bj前面
myClick("btn2",function(){
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
var bj = document.getElementById("bj");
var city = document.getElementById("city");//获取父节点#city
city.insertBefore(li, bj);
});
//使用"广州"节点替换#bj节点
myClick("btn3",function(){
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
var bj = document.getElementById("bj");
var city = document.getElementById("city");//获取父节点#city
city.replaceChild(li, bj);
});
//删除#bj节点
myClick("btn4",function(){
var bj = document.getElementById("bj");
var city = document.getElementById("city");//获取父节点#city
// city.removeChild(bj);
bj.parentNode.removeChild(bj);
});
//读取#city内的HTML代码
myClick("btn5",function(){
var city = document.getElementById("city");
alert(city.innerHTML);
});
//设置#bj内的HTML代码
myClick("btn6",function(){
var bj = document.getElementById("bj");
bj.innerHTML = "杭州";
});
//使用innerHTML与方法相结合方式
myClick("btn7",function(){
var city = document.getElementById("city");
var li = document.createElement("li");
li.innerHTML = "广州";
city.appendChild(li);
});
};
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
};
</script>
</head>
<body>
你最喜欢那个城市:
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>深圳</li>
<li>四川</li>
</ul>
<div id="btnlist">
<div><button id="btn1">创建一个"广州"节点,添加到#city下</button></div>
<div><button id="btn2">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn3">使用"广州"节点替换#bj节点</button></div>
<div><button id="btn4">删除#bj节点</button></div>
<div><button id="btn5">读取#city内的HTML代码</button></div>
<div><button id="btn6">设置#bj内的HTML代码</button></div>
<div><button id="btn7">创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
</html>
96. DOM删除
l练习：对员工数据进行增删改查操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#employeeTable, tr, td{
border: 1px black solid;
border-collapse: collapse;
margin-bottom: 50px;
text-align: center;
}
#formDiv{
width: 276px;
border: 1px black solid;
text-align: center;
}
#formDiv table{
margin-left: 15px;
}
#employeeTable tr:first-child{
font-weight: bold;
}
</style>
<script>
window.onload = function(){
//获取所有超链接
var allA = document.getElementsByTagName("a");
for(var i=0;i<allA.length;i++){
allA[i].onclick = function(){
var tr = this.parentNode.parentNode;
var name = tr.children[0].innerHTML;
var flag = confirm("确认删除"+name+"吗?");
if(flag){
tr.parentNode.removeChild(tr);
}
return false;//取消点击超链接跳转页面的默认行为
};
}
};
</script>
</head>
<body>
<div>
<table id="employeeTable">
<tr>
<td>name</td>
<td>Email</td>
<td>Salary</td>
<td> </td>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@soho.com</td>
<td>8000</td>
<td><a href="deleteEmp?id002">Delete</a></td>
</tr>
</table>
</div>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp"><input type="text" name="empName" id="empName"></td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp"><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp"><input type="text" name="salary" id="salary"></td>
</tr>
<tr>
<td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td>
</tr>
</table>
</div>
</body>
</html>
97. DOM添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#employeeTable, tr, td{
border: 1px black solid;
border-collapse: collapse;
margin-bottom: 50px;
text-align: center;
}
#formDiv{
width: 276px;
border: 1px black solid;
text-align: center;
}
#formDiv table{
margin-left: 15px;
}
#employeeTable tr:first-child{
font-weight: bold;
}
</style>
<script>
function dela()
{
var tr = this.parentNode.parentNode;
var name = tr.children[0].innerHTML;
var flag = confirm("确认删除"+name+"吗?");
if(flag){
tr.parentNode.removeChild(tr);
}
return false;//取消点击超链接跳转页面的默认行为
};
window.onload = function(){
//删除员工
var allA = document.getElementsByTagName("a");
for(var i=0;i<allA.length;i++){
allA[i].onclick = dela;
}
//添加员工
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function(){
var name = document.getElementById("empName").value;
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
var tr = document.createElement("tr");
var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td");
var a = document.createElement("a");
var nameText = document.createTextNode(name);
var emailText = document.createTextNode(email);
var salaryText = document.createTextNode(salary);
var delText = document.createTextNode("Delete");
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
a.appendChild(delText);
aTd.appendChild(a);
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
a.href = "javascript:;"
//重新为新添加的a绑定单击响应事件
a.onclick = dela;
//获取tbody,在tbody里面添加tr
var tbody = employeeTable.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<div>
<table id="employeeTable">
<tr>
<td>name</td>
<td>Email</td>
<td>Salary</td>
<td> </td>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@soho.com</td>
<td>8000</td>
<td><a href="deleteEmp?id002">Delete</a></td>
</tr>
</table>
</div>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp"><input type="text" name="empName" id="empName"></td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp"><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp"><input type="text" name="salary" id="salary"></td>
</tr>
<tr>
<td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td>
</tr>
</table>
</div>
</body>
</html>
98. DOM添加修改
可以使用innerHTML属性来简化添加节点的步骤，对比97. DOM添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#employeeTable, tr, td{
border: 1px black solid;
border-collapse: collapse;
margin-bottom: 50px;
text-align: center;
}
#formDiv{
width: 276px;
border: 1px black solid;
text-align: center;
}
#formDiv table{
margin-left: 15px;
}
#employeeTable tr:first-child{
font-weight: bold;
}
</style>
<script>
function dela()
{
var tr = this.parentNode.parentNode;
var name = tr.children[0].innerHTML;
var flag = confirm("确认删除"+name+"吗?");
if(flag){
tr.parentNode.removeChild(tr);
}
return false;//取消点击超链接跳转页面的默认行为
};
window.onload = function(){
//删除员工
var allA = document.getElementsByTagName("a");
for(var i=0;i<allA.length;i++){
allA[i].onclick = dela;
}
//添加员工
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function(){
var name = document.getElementById("empName").value;
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
var tr = document.createElement("tr");
tr.innerHTML = "<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='javascript:;'>Delete</a></td>";
//重新为新添加的a绑定单击响应事件
var a = tr.getElementsByTagName("a")[0];
a.onclick = dela;
//获取tbody,在tbody里面添加tr
var tbody = employeeTable.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<div>
<table id="employeeTable">
<tr>
<td>name</td>
<td>Email</td>
<td>Salary</td>
<td> </td>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@soho.com</td>
<td>8000</td>
<td><a href="deleteEmp?id002">Delete</a></td>
</tr>
</table>
</div>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp"><input type="text" name="empName" id="empName"></td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp"><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp"><input type="text" name="salary" id="salary"></td>
</tr>
<tr>
<td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td>
</tr>
</table>
</div>
</body>
</html>
99. a的索引问题
注意96. DOM删除中，for循环会在页面加载完成后立即执行，而响应函数会在超链接被点击时才执行，当响应函数执行时，for循环早已执行完毕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#employeeTable, tr, td{
border: 1px black solid;
border-collapse: collapse;
margin-bottom: 50px;
text-align: center;
}
#formDiv{
width: 276px;
border: 1px black solid;
text-align: center;
}
#formDiv table{
margin-left: 15px;
}
#employeeTable tr:first-child{
font-weight: bold;
}
</style>
<script>
window.onload = function(){
//获取所有超链接
var allA = document.getElementsByTagName("a");
for(var i=0;i<allA.length;i++){
console.log("for循环正在执行"+i);
allA[i].onclick = function(){
console.log("响应函数正在执行"+i);
var tr = this.parentNode.parentNode;
var name = tr.children[0].innerHTML;
var flag = confirm("确认删除"+name+"吗?");
if(flag){
tr.parentNode.removeChild(tr);
}
return false;//取消点击超链接跳转页面的默认行为
};
}
};
</script>
</head>
<body>
<div>
<table id="employeeTable">
<tr>
<td>name</td>
<td>Email</td>
<td>Salary</td>
<td> </td>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@soho.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
</table>
</div>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp"><input type="text" name="empName" id="empName"></td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp"><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp"><input type="text" name="salary" id="salary"></td>
</tr>
<tr>
<td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td>
</tr>
</table>
</div>
</body>
</html>
for循环已执行完毕，只有点击Delete时，才会执行单击响应函数，此时i已超出数组长度
下一章节将对DOM操作样式和事件进行深入了解！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
