DOM 简介
1、什么是DOM
（1）DOM（Document Object Model），文档对象模型
（2）JS 中通过 DOM 来对 **HTML 文档（网页）**进行操作。
（3）文档：表示整个 HTML 网页文档；对象：表示将网页中的每一个部分都将转换为一个对象；模型：表示对象之间的关系。
 |
|---|
 |
 |
 |
 |
2、浏览器已经为我们提供了文档节点对象，这个对象是 window属性。可以在页面中直接使用，文档节点代表的是整个页面。
<body>
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
console.log(document);
// 获取到button对象
var btn = document.getElementById("btn");
// 修改按钮的文字
btn.innerHTML = "I'm Button";
</script>
</body>
事件的简介
事件就是用户和浏览器之间的交互行为，比如：点击按钮、鼠标移动、关闭窗口等。
1、可以为按钮的对应事件绑定处理函数的形式来响应事件。
（1）在事件对应的属性中设置一些 js 代码
<!-- 在事件对应的属性中设置一些 js 代码，这样当事件被触发时，这些代码将会执行
这种写法称为结构和行为耦合，不方便维护，不推荐使用 -->
<button id="btn" onclick="alert('你好呀！！');">我是一个按钮</button>
（2）为事件绑定处理函数的形式来响应事件
<body>
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
// 获取到button对象
var btn = document.getElementById("btn");
// 可以为按钮的对应事件绑定处理函数的形式来响应事件
// 这样事件被触发时，其对应的函数将会被调用
// 绑定一个单击事件
// 像这种为单击事件绑定的函数，称为单击响应函数
btn.onclick = function () {
alert("你好呀！！");
}
</script>
</body>
文档的加载
1、浏览器在加载页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将 script 标签写到页面的上面，在代码执行时，页面还没有加载，DOM 对象也没有加载，会导致无法获取到 DOM对象。
2、onload 事件会在整个页面加载完成之后才触发，为 window 绑定一个 onload事件。window.load = function(){ }
<script type="text/javascript">
// onload事件会在整个页面加载完成之后才触发
// 为window绑定一个onload事件
// 该事件对应的响应函数将会在页面加载完成之后执行
// 这样可以确保代码在执行是所有的 DOM对象 已经加载完毕
window.onload = function () {
// 获取到button对象
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function () {
alert("你好呀！！");
}
}
</script>
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>DOM查询</title>
<script>
// 定义一个函数，专门用来指定元素绑定单击响应函数
// 参数：
// inStr 要绑定单击响应函数的对象的id属性值
// fun 事件的回调函数，当单击元素时，该函数将会被触发
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function () {
// 为id为btn01的按钮绑定一个单击响应函数
myClick("btn01", function () {
//查找#bj节点
var bj = document.getElementById("bj");
// 打印bj
// innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
})
// 为id为btn02的按钮绑定一个单击响应函数
myClick("btn02", function () {
// 查找所有li节点
// getElementByTagName()可以根据标签名来获取一组元素节点对象
// 该方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
// 即使查询到的元素只有一个，也会封装到数组中返回
var lis = document.getElementsByTagName("li");
//遍历lis
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML);
}
})
// 为id为btn03的按钮绑定一个单击响应函数
myClick("btn03", function () {
//查找name = gender的所有节点
var inputs = document.getElementsByName("gender");
for (var i = 0; i < inputs.length; i++) {
// innerHTML用于获取元素内部的HTML代码
// 对于字节数标签，该属性没有意义
// 如果需要读取元素节点属性
// 直接使用 元素.属性名，例如：元素.id 元素.name 元素.value
// 注意：class属性不能采用这种方法
// 读取 class 属性时需要使用 元素.className
alert(inputs[i].className);
}
})
// 为id为btn04的按钮绑定一个单击响应函数
myClick("btn04", function () {
// 获取id为city的元素
var city = document.getElementById("city");
//查找#city下所有li节点
var lis = city.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML);
}
})
// 为id为btn05的按钮绑定一个单击响应函数
myClick("btn05", function () {
//获取id为city的节点
var city = document.getElementById("city");
//返回#city的所有子节点
// childNodes 属性会获取包括文本节点在内的所有节点
// 根据DOM标签，标签间空白也会当成文本节点
// 注意：在IE8及以下的浏览器中，不会讲空白当成子节点
var cns = city.childNodes;
// children属性可以获取当前元素的所有子元素(子元素与子节点不同，不包括空白文本节点)
var cns2 = city.children;
alert(cns2.length);
})
// 为id为btn06的按钮绑定一个单击响应函数
myClick("btn06", function () {
//获取id为phone的元素
var phone = document.getElementById("phone");
//返回#phone的第一个子节点
// firstChild可以获取到当前元素的第一个子节点(包括空白文本)
var fir = phone.firstChild;
// firstElementChild获取当前元素的第一个子元素
// firstElementChild不支持IE8及以下的浏览器，如果需要兼容它们尽量不要使用
alert(fir);
})
// 为id为btn07的按钮绑定一个单击响应函数
myClick("btn07", function () {
//获取id为bj的节点
var bj = document.getElementById("bj");
//返回#bj的父节点
var pn = bj.parentNode;
// innerText
// 该属性可以获取到元素内部的文本内容
// 它和innerHTML类似，不同的是它会自动将html去除
alert(pn.innerText);
})
// 为id为btn08的按钮绑定一个单击响应函数
myClick("btn08", function () {
// 获取id为android的元素
var and = document.getElementById("android");
//返回#android的前一个兄弟节点(也可能获取到空白的文本)
var ps = and.previousSibling;
// previousElementSibling获取前一个兄弟元素(不包括空白文本)，IE8及以下不支持
// var pe = and.previousElementSibling;
alert(ps.innerHTML);
})
//读取#username的value属性值
myClick("btn09", function () {
// 获取id为username的元素
var um = document.getElementById("username");
// 读取um的value属性值
// 文本框的value属性值，就是文本框中填写的内容
alert(um.value);
})
//设置#username的value属性值
myClick("btn10", function () {
var um = document.getElementById("username");
um.value = "今天天气真不错~~"
})
//返回#bj的文本值
myClick("btn11", function () {
var bj = document.getElementById("bj");
alert(bj.innerHTML);
//alert(bj.innerText);
//alert(bj.firstChild.nodeValue);
})
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市？
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏？
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是？
</p>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li>
<li>Windows Phone</li>
</ul>
<div>
gender:
<input class="hello" type="radio" name="gender" value="male">
Male
<input class="hello" type="radio" name="gender" value="female">
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde" />
</div>
</div>
<div>
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">读取#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</div>
</body>
</html>
全选练习
需要实现的结果，如下图所示
<!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>全选练习</title>
<script type="text/javascript">
window.onload = function () {
// 获取四个多选框items
var items = document.getElementsByName("items");
//获取全选/全不选按钮
var checkedAllBox = document.getElementById("checkedAllBox");
// 全选按钮
// 点击按钮以后，四个多选框全都被选中
// 1、#checkedAllBtn
// 为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function () {
for (var i = 0; i < items.length; i++) {
//通过多选框的checked属性可以获取或设置多选框的选中状态
// 设置四个多选框变成选中状态
items[i].checked = true;
}
checkedAllBox.checked = true;
}
// 全不选按钮
// 2、#checkedNoBtn
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function () {
for (var i = 0; i < items.length; i++) {
// 设置四个多选框变成非选中状态
items[i].checked = false;
}
checkedAllBox.checked = false;
}
// 反选按钮
// 3、#checkedRevBtn
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function () {
checkedAllBox.checked = true;
for (var i = 0; i < items.length; i++) {
items[i].checked = !(items[i].checked);
if (items[i].checked == false) {
checkedAllBox.checked = false;
}
}
}
//提交按钮
//4、#sendBtn
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function () {
for (var i = 0; i < items.length; i++) {
if (items[i].checked) {
alert(items[i].value);
}
}
}
// 全选/全不选
// 将一个复选框的状态与其他四个复选框的状态绑定
//在事件的响应函数中，响应函数是给谁绑定的，this就是谁
// 5、#checkedAllBox
checkedAllBox.onclick = function () {
for (var i = 0; i < items.length; i++) {
items[i].checked = this.checked;
}
}
// 6、items
// 只要有一个复选框没有被选中，则全选/全不选复选框就不被选中
// 只有当复选框全被选中，则全选/全不选复选框才被选中
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
// 将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for (var j = 0; j < items.length; j++) {
// 判断四个多选框是否全选
// 只要有一个没选中则就不是全选
if (!items[j].checked) {
// 一旦进入判断，则说明不是全选状态
// 将checkedAllBox设置为没选中状态
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>
DOM 查询的剩余方法
1、获取 body 标签
在 document 中有一个属性 body，它保存的是 body 的引用。
var body = document.body;
2、获取 html 标签
document.documentElement 保存的是html根标签
var html = document.documentElement;
3、获取页面中所有元素
方式一： document.all
方式二：document.getElementsByTagName("*")
//方式一
var all = document.all;
//方式二 (* 表示所有元素)
all = document.getElementsByTagName("*");
for (var i = 0; i < all.length; i++) {
console.log(all[i]);
}
4、根据元素的 class 属性值查询一组元素节点对象
（1）getElementsByClassName() 可以根据 class 属性值获取一组元素节点对象，但是该方法不支持 IE8及以下的浏览器。
var box = document.getElementsByClassName("box");
（2）document.querySelector()
需要一个选择器的字符串作为参数，可以根据一个 CSS选择器 来查询一个元素节点对象
虽然IE8中没有 getElementsByClassName() 但是可以使用 querySelector() 代替
使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1");
（3）document.querySelectorAll()
该方法与 querySelector() 用法类似，不同的是它会将符合条件的元素封装到一个数组中返回。
DOM 增删改
1、document.createElement()
（1）可以用于创建一个元素节点对象
（2）它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
（3）并将创建好的对象作为返回值返回
2、document.createTextNode()
（1）可以用来创建一个文本节点对象
（2）需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
3、appendChild()
（1）向父节点中添加一个新的子节点
（2）用法：父节点.appendChild(子节点)
4、insertBefore()
（1）可以将指定的子节点前面插入新的子节点
（2）语法：父节点.insertBefore(新节点，旧节点);
5、replaceChild()
（1）可以使用指定的子节点替换已有的子节点
（2）语法：父节点.replaceChild(新节点,旧节点);
6、removeChild()
（1）可以删除一个子节点
（2）语法：父节点.removeChild(子节点); 或者 子节点.parentNode.removeChild(子节点);，后面一种方法更常用。
7、innerHTML
使用 innerHTML 也可以完成增删改的相关操作，一般会与第一种方式相结合使用
<!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>dom增删改</title>
<script>
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function () {
//创建一个"广州"节点，添加到#city下
//方式一
myClick("btn01", function () {
//创建"广州"节点 <li>广州</li>
var li = document.createElement("li");
//创建广州文本节点
var gzText = document.createTextNode("广州");
//将gzText设置为li的子节点
li.appendChild(gzText);
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
})
//方式二
myClick("btn07", function () {
//创建"广州"节点 <li>广州</li>
var li = document.createElement("li");
//向li中设置文本
li.innerHTML = "广州";
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
})
//将"广州"节点插入到#bj前面
myClick("btn02", function () {
//创建一个广州节点
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取id为city的节点
var city = document.getElementById("city");
//将"广州"节点插入到#bj前面
city.insertBefore(li, bj);
})
//使用"广州"节点替换#bj节点
myClick("btn03", function () {
//创建一个广州节点
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取id为city的节点
var city = document.getElementById("city");
//使用"广州"节点替换#bj节点
city.replaceChild(li, bj);
})
//删除#bj节点
myClick("btn04", function () {
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取id为city的节点
var city = document.getElementById("city");
//删除#bj节点
city.removeChild(bj);
})
//读取#city内的HTML代码
myClick("btn05", function () {
var city = document.getElementById("city");
alert(city.innerHTML);
})
//设置#bj内的HTML代码
myClick("btn06", function () {
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
})
}
</script>
</head>
<body>
<div>
<p>你最喜欢哪个城市？</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
<div>
<div><button id="btn01">方式一：创建一个"广州"节点，添加到#city下</button></div>
<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
<div><button id="btn07">方式二：创建一个"广州"节点，添加到#city下</button></div>
</div>
</body>
</html>
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>练习</title>
<style>
* {
margin: 0;
padding: 0;
}
#employeeTable {
width: 350px;
height: 60px;
margin: 50px auto;
padding: 10px;
}
#employeeTable,
td,
th {
border: 1px solid black;
/* 合并相邻的边框 */
border-collapse: collapse;
}
#addEmployee {
width: 240px;
margin: 50px auto;
padding: 20px 10px 10px 10px;
text-align: center;
border: 1px solid black;
}
h3 {
text-align: left;
}
</style>
<script>
// 删除tr的响应函数
function delA() {
// 点击超链接后需要删除超链接所在的那一行
// 点击哪个超链接,this就是谁
// 获取当前 tr
var tr = this.parentNode.parentNode;
// 获取要删除员工的名字
var name = tr.getElementsByTagName("td")[0].innerHTML;
// 删除前弹出一个提示框
//confirm()用于弹出一个带有确认和取消按钮的提示框
//需要一个字符串作为参数，最终以提示文字显示出来
// 确认返回 true，取消返回 false
var flag = confirm("确认删除" + name + "吗？");
if (flag) {
// 删除tr
tr.parentNode.removeChild(tr);
}
// 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
// 但是此时不希望出现默认行为,可以通过在响应函数的最后 return false来取消
// 或者将超链接的href属性改为 href ="javascript:;"
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 () {
// 获取用户添加的员工信息
// 获取员工的name、email和salary
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
/*
* <tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
需要将获取到的信息保存到tr中
*/
//创建一个 tr
var tr = document.createElement("tr");
//创建四个 td
var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td");
//创建一个a元素
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");
//将文本添加到td中
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
//向a中添加文本
a.appendChild(delText);
//将a添加到td中
aTd.appendChild(a);
//将td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
//向a中添加href属性
a.href = "javascript:;";
//为新添加的a再绑定一次单击响应函数
a.onclick = delA;
//获取table
var employeeTable = document.getElementById("employeeTable");
//获取employeeTable中的tbody
var tbody = employeeTable.getElementsByTagName("tbody")[0];
//将tr添加到table中
tbody.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=001">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="addEmployee">
<h3>添加新员工</h3>
<br>
name：<input type="text" id="name">
<br>
email：<input type="text" id="email">
<br>
salary：<input type="text" id="salary">
<br>
<input type="button" value="Submit" id="addEmpButton">
</div>
</body>
</html>
练习中代码的简化（利用innerHTML）
<!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>练习</title>
<style>
* {
margin: 0;
padding: 0;
}
#employeeTable {
width: 350px;
height: 60px;
margin: 50px auto;
padding: 10px;
}
#employeeTable,
td,
th {
border: 1px solid black;
/* 合并相邻的边框 */
border-collapse: collapse;
}
#addEmployee {
width: 240px;
margin: 50px auto;
padding: 20px 10px 10px 10px;
text-align: center;
border: 1px solid black;
}
h3 {
text-align: left;
}
</style>
<script>
// 删除tr的响应函数
function delA() {
// 点击超链接后需要删除超链接所在的那一行
// 点击哪个超链接,this就是谁
// 获取当前 tr
var tr = this.parentNode.parentNode;
// 获取要删除员工的名字
var name = tr.getElementsByTagName("td")[0].innerHTML;
// 删除前弹出一个提示框
//confirm()用于弹出一个带有确认和取消按钮的提示框
//需要一个字符串作为参数，最终以提示文字显示出来
// 确认返回 true，取消返回 false
var flag = confirm("确认删除" + name + "吗？");
if (flag) {
// 删除tr
tr.parentNode.removeChild(tr);
}
// 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
// 但是此时不希望出现默认行为,可以通过在响应函数的最后 return false来取消
// 或者将超链接的href属性改为 href ="javascript:;"
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 () {
// 获取用户添加的员工信息
// 获取员工的name、email和salary
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
/*
* <tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
需要将获取到的信息保存到tr中
*/
//创建一个 tr
var tr = document.createElement("tr");
//设置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;
//获取table
var employeeTable = document.getElementById("employeeTable");
//获取employeeTable中的tbody
var tbody = employeeTable.getElementsByTagName("tbody")[0];
//将tr添加到tbody中
tbody.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=001">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="addEmployee">
<h3>添加新员工</h3>
<br>
name：<input type="text" id="name">
<br>
email：<input type="text" id="email">
<br>
salary：<input type="text" id="salary">
<br>
<input type="button" value="Submit" id="addEmpButton">
</div>
</body>
</html>
a的索引问题
for循环会在页面加载完成之后立即执行
而响应函数会在超链接被点击时才执行
当响应函数执行时，for循环早已执行完毕
所以，在这里allA[i]和this是不相同的，此时的i为3
a.onclick = function () {
// for循环会在页面加载完成之后立即执行
// 而响应函数会在超链接被点击时才执行
// 当响应函数执行时，for循环早已执行完毕
// 所以，在这里allA[i]和this是不相同的，此时的i为3
var tr = this.parentNode.parentNode;
var name = tr.getElementsByTagName("td")[0].innerHTML;
var flag = confirm("确认删除" + name + "吗？");
if (flag) {
// 删除tr
tr.parentNode.removeChild(tr);
}
return false;
};
973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
