js基础_64、DOM练习
取消超链接的默认行为
点击超链接后，超链接会跳转页面，这个是超链接的默认行为，但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为。
比如：
window.onload=function(){
//获取a标签
var mya=document.getElementById("mya");
//在超链接标签的单击响应函数里取消超链接的默认行为
mya.onclick=function(){
return false;
}
}
或者，直接在href里写javascritp:;
如图：
练习：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="./css/css.css" />
<script type="text/javascript">
var delectfun=function(){
var state=confirm("确定要删除吗？"+this.parentNode.parentNode.firstElementChild.innerText);
if(state){
var parent=this.parentNode.parentNode
parent.parentNode.removeChild(parent);
}
return false;
}
window.onload=function(){
//给所有的超链接绑定一个单击响应函数
var alist=document.getElementsByTagName("a");
for (var i=0;i<alist.length;i++) {
alist[i].onclick=delectfun;
}
var btn=document.getElementById("addEmpButton");
btn.onclick=function(){
var empName=document.getElementById("empName").value;
var email=document.getElementById("email").value;
var salary=document.getElementById("salary").value;
var tr=document.createElement("tr");
tr.innerHTML=
"<td>"+empName+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='deleteEmp?id=002'>Delete</a></td>";
var a=tr.getElementsByTagName("a")[0];
a.onclick=delectfun;
var parent=document.getElementById("employeeTable");
parent=parent.getElementsByTagName("tbody")[0];
parent.appendChild(tr);
}
}
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<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>
css样式如下：
@CHARSET "UTF-8";
#total {
width: 450px;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
}
li {
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float: left;
}
.inner {
width: 400px;
border-style: solid;
border-width: 1px;
margin: 10px;
padding: 10px;
float: left;
}
#employeeTable {
border-spacing: 1px;
background-color: black;
margin: 80px auto 10px auto;
}
th,td {
background-color: white;
}
#formDiv {
width: 250px;
border-style: solid;
border-width: 1px;
margin: 50px auto 10px auto;
padding: 10px;
}
#formDiv input {
width: 100%;
}
.word {
width: 40px;
}
.inp {
width: 200px;
}
a索引的问题
当body不变，将scrijpt改成如下时：
<script type="text/javascript">
window.onload=function(){
//给所有的超链接绑定一个单击响应函数
var alist=document.getElementsByTagName("a");
for (var i=0;i<alist.length;i++) {
alist[i].onclick=function(){
alert(i);//输出结果为3
return false;
};
}
};
</script>
输出结果为3
在这里，for循环会在页面加载完成后立即执行，而响应函数会在超链接被点击时才执行，当响应函数执行时，for循环早已执行完毕。
所以，这里alist[i].parentNode.parentNode找不到，因为这时候i已经变成了3了，所以输出alist[i]为undefined，而alist[0]——alist[2]都能找到a标签。
而this.parentNode.parentNode能找到，因为this就是这个a标签
比如：
<script type="text/javascript">
window.onload=function(){
//给所有的超链接绑定一个单击响应函数
var alist=document.getElementsByTagName("a");
for (var i=0;i<alist.length;i++) {
alert("for循环正在执行"+i);
alist[i].onclick=function(){
alert("响应函数正在执行"+i);
//alert(alist[i]);//输出结果为undefined
//alert(alist);//输出结果为类数组
//alert(alist[i]===this);//输出结果为false
//alist[i].parentNode.parentNode找不到，因为这时候i已经变成了3了
//this.parentNode.parentNode能找到
return false;
};
}
};
</script>
