本文档详细介绍了DOM操作的实践，包括查询、增加、删除、修改和选择元素。通过DOM查询，可以获取指定ID、标签名、属性名的节点，以及其子节点、兄弟节点等。此外，还提供了全选、全不选和反选的实现，展示了如何处理多选框的选择状态。练习部分涵盖了DOM操作的多个场景，如创建新节点、插入节点、替换节点和删除节点，以及读取和设置元素内容。文章最后是添加删除记录的练习，涉及动态添加表格行和删除功能。
目录
1.DOM查询练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript">
/*创建一个方法
*
* 定义一个函数，专门用来为指定元素绑定单击响应函数
* 参数：
* idStr 要绑定单击响应函数的对象id属性值
* fun 事件的回调函数，当单击元素时，该函数将会被触发
*
* */
function myClick(idStr , fun){
//btn是会改变的
var btn = document.getElementById(idStr);
//fun是传进来的函数
btn.onclick = fun;
};
//为id为btn01的按钮绑定一个单击响应函数
window.onload = function(){
var btn01 = document.getElementById("btn01");//通过document的getElementById找到id="btn01"
//找到绑定的对象btn01带有返回值的，然后再绑定oncick事件
btn01.onclick = function(){
//再次通过document找到id="bj"
var bj = document.getElementById("bj");
//带有返回值的bj使用innerHTML输出网页内容
alert(bj.innerHTML);
};
//查找所有li节点
var btn02 = document.getElementById("btn02");//通过document的getElementById找到li
btn02.onclick = function(){
//再次通过document找到li
var lis = document.getElementsByTagName("li");
//这时候lis成为了一个数组
//alert(lis.length);显示11
//历遍lis[i]出内容
for(var i =0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
//查找name=gender的所有节点
//找到btn03这个id
var btn03 = document.getElementById("btn03");
//绑定点击事件并且接收一个回调函数
btn03.onclick = function(){
//使用getElementsByName找到name="gender"的值 并且返回到inputs中
var inputs = document.getElementsByName("gender");
//alert(inputs.innerHTML);显示类型
//alert(inputs.length);
//循环输出该数
for(var i=0 ; i<inputs.length ; i++){
/* innerHTML用于获取元素内部的HTML代码的
* 对于自结束标签，这个属性没有意义*/
//alert(inputs[i].innerHTML);innerHTML不适合自结束标签
//alert(inputs[i].name);
/*
* 如果需要读取元素节点属性，
* 直接使用 元素.属性名
* 例子：元素.id 元素.name 元素.value
* 注意：class属性不能采用这种方式，
* 读取class属性时需要使用 元素.className
*/
/*但是特别注意的就是:class因为是保留字所以不能在自结束标签中使用，所以使用className替换class*/
//alert(inputs[i].class);使用不了
alert(inputs[i].className);
}
};
/*
* .通过具体的元素节点调用
* 1.getElementsByTagName()
* - 方法，返回当前节点的指定标签后代节点
* 2.childNodes
* - 属性，表示当前节点的所有子节点（包含文本节点。空白的）
* 3.firstChild
* - 属性，表示当前节点的第一个子节点
* 4.lastChild
* - 属性，表示当前节点的最后一个子节点
*
*/
//查找#city下所有li节点
//1.找到btn04并且绑定点击事件
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
//找到city下面的li
var lis = city.getElementsByTagName("li");
//alert(lis.length);
for(var i =0 ; i<lis.length;i++)
{
alert(lis[i].innerHTML);
}
};
//返回#city的所有子节点
//找到按钮
//为id为btn05的按钮绑定一个单击响应函数
var btn05 =document.getElementById("btn05");
//按钮绑定点击事件
btn05.onclick = function(){
//获取#city的所有子节点
var city = document.getElementById("city");
/*
* childNodes属性会获取包括文本节点在内的所有节点
* 根据DOM标签之间的空白也会被当成文本节点
* 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
* 所以该属性在IE8中会返回4个子元素 而其他浏览器9个
*
*/
var cns = city.childNodes;
//alert(cns.length);
/*for (var i=0 ; i<cns.length ; i++) {
alert(cns[i].innerHTML);
//空格被称输出为了undefined
}*/
//children属性
/*
*children属性可以获取当前元素的所有子元素
* 更符合我们的需求，不包括text
*/
var cns2 = city.children;
//alert(cns.length);
for (var i=0 ; i<cns2.length ; i++) {
alert(cns2[i].innerHTML);
//空格不被输出
}
};
//找到btn06
var btn06 = document.getElementById("btn06");
//为btn06绑定一个单击响应事件
btn06.onclick = function(){
//找到#phone
var phone = document.getElementById("phone");
//返回#phone的第一个子节点
//var fir = phone.childNodes[0];麻烦
//firstChild可以获取到当前元素的第一个子节点(包括空白文本)
var fir = phone.firstChild;
//firstElementChild获取当前元素的第一个子元素
/*
* firstElementChild 不支持ie8及以下浏览器，
* 如果需要兼容他们尽量不要使用
*/
alert("我选择的操作系统是~~"+fir.innerHTML);
};
/*
* 获取父节点和兄弟节点
* . 通过具体的节点调用
* 1.parentNode
* - 属性，表示当前节点的父节点
* 2.previousSibling
* - 属性，表示当前节点的前一个兄弟节点
* 3.nextSibling
* - 属性，表示当前节点的后一个兄弟节点
*
* 注意属性和方法的区别
*/
/*单个写*/
//给id为btn07的按钮绑定一个单击响应事件
/*var btn07 = document.getElementById("btn07");
//绑定点击事件
btn07.onclick = function(){
//找到bj的父节点
var bj = document.getElementById("bj");
//返回#bj的父节点
var parbj = bj.parentNode;
//alert("bj的父节点是："+parbj.innerHTML);
//innerText
//- 该属性可以获取到元素内部的文本内容
//- 它和innerHTML类似，不同的是它会自动将html去除
alert(parbj.innerText);
};*/
/*创建方法来写*/
myClick("btn07",function(){
//找到bj的父节点
var bj = document.getElementById("bj");
//返回#bj的父节点
var parbj = bj.parentNode;
//alert("bj的父节点是："+parbj.innerHTML);
//innerText
//- 该属性可以获取到元素内部的文本内容
//- 它和innerHTML类似，不同的是它会自动将html去除
alert(parbj.innerText);
});
//返回#android的前一个兄弟节点
myClick("btn08",function(){
var android = document.getElementById("android")
//返回#android的前一个兄弟节点(也可以获取到空白文本)
var perva = android.previousSibling;
//previousElementSibling获取一个兄弟元素。IE8及以下不支持
//var perva = android.previousElementSibling;
alert(perva.innerHTML);//innerText都一样的
});
//读取#username的value属性值
myClick("btn09",function(){
var usm = document.getElementById("username");
//读取um的value属性值，并且返回一个结果
var usa = usm.value;
alert(usa);
});
//设置#username的value属性值
myClick("btn10",function(){
var um = document.getElementById("username");
//读取um的value属性值，并且返回一个结果
um.value="今天天气很不错";//直接设置，不用返回
});
//返回#bj的文本值
myClick("btn11",function(){
var bj = document.getElementById("bj");
//alert(bj.innerText);
//alert(bj.innerHTML);
//获取bj中的文本节点
//知道思想
var fc = bj.firstChild;//首先先获取文本对象
//再进行获取文本值
//alert(fc.nodeValue);//显示：北京
//经常用的
alert(fc.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>
<div class="inner">
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 id="btnList">
<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>
</body>
</html>
2.全选练习
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">
window.onload = function(){
//1.#checkedAllBtn
var checkedAllBtn = document.getElementById("checkedAllBtn");
//绑定单击响应事件
checkedAllBtn.onclick = function(){
var items = document.getElementsByName("items");
//得到一个数组
for (var i = 0 ; i<items.length ; i++)
{
//找到的checked=true来显示选中效果
items[i].checked = true;
}
//设置全选
checkedAllBox.checked = true;
};
//2.#checkedNoBtn
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
var items = document.getElementsByName("items");
//得到一个数组
for(var i = 0 ; i < items.length ; i++)
{
//找到的checked=true来取消选中效果
items[i].checked = false;
}
//设置全不选
checkedAllBox.checked = false;
};
//3.#checkedRevBtn
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
var items = document.getElementsByName("items");
for (var i=0 ; i<items.length ; i++) {
//items[i].checked 本身就是true
//判断多选框状态
/*if(items[i].checked){
//证明多选框已经选中，则取消
items[i].checked = false;
}else{
//证明多选框已经没选中，则选中
items[i].checked = true;
}*/
//绝了 学到了学到了
//当是true、false时就返回
items[i].checked =! items[i].checked;
}
/*设置反选*/
//这个反选可以直接加到上面的for循环里面
//一上来就如点击一个框的时候，上面的全选框也会选中
checkedAllBox.checked = true;
for(var j=0 ; j<items.length ; j++){
//和质数一样的想法：如果我点的不全就不能是false
if(!items[j].checked){
checkedAllBox.checked = false;
break;
}
}
};
//4.#sendBtn
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
var items = document.getElementsByName("items");
for (var i=0 ; i<items.length ; i++) {
if(items[i].checked)
{
alert(items[i].value);
}
}
};
//5.#checkedAllBox
/*
* 全选/全不选 多选框
* - 当它选中时，其余的也选中，当它取消时其余的也取消
*
* 在事件的响应函数中，响应函数是给谁绑定的this就是谁
*/
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function(){
var items = document.getElementsByName("items");
for (var i = 0 ; i<items.length ; i++) {
//this在全局的时候使用的是window
//this在函数内使用的是绑定函数的对象，这里就是checkedAllBox对象
//items[i].checked = checkedAllBox.checked;
items[i].checked = this.checked;
}
};
//6.#items
//细节补充
/*
* 如果四个多选框全都选中，则checkedAllBox也应该选中
* 如果四个多选框没都选中，则checkedAllBox也不应该选中
*/
var items = document.getElementsByName("items");
for (var i=0 ; i<items.length ; i++) {
items[i].onclick = function(){
//一上来就如点击一个框的时候，上面的全选框也会选中
checkedAllBox.checked = true;
for(var j=0 ; j<items.length ; j++){
//和质数一样的想法：如果我点的不全就不能是false
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>3.全选练习答案
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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(){
//遍历items
for(var i=0 ; i<items.length ; i++){
//通过多选框的checked属性可以来获取或设置多选框的选中状态
//alert(items[i].checked);
//设置四个多选框变成选中状态
items[i].checked = true;
}
//将全选/全不选设置为选中
checkedAllBox.checked = true;
};
/*
* 全不选按钮
* - 点击按钮以后，四个多选框都变成没选中的状态
*/
//2.#checkedNoBtn
//为id为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设置为选中状态
checkedAllBox.checked = true;
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设置为没选中状态
checkedAllBox.checked = false;
}
}
//在反选时也需要判断四个多选框是否全都选中
};
/*
* 提交按钮：
* - 点击按钮以后，将所有选中的多选框的value属性值弹出
*/
//4.#sendBtn
//为sendBtn绑定单击响应函数
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
//遍历items
for(var i=0 ; i<items.length ; i++){
//判断多选框是否选中
if(items[i].checked){
alert(items[i].value);
}
}
};
//5.#checkedAllBox
/*
* 全选/全不选 多选框
* - 当它选中时，其余的也选中，当它取消时其余的也取消
*
* 在事件的响应函数中，响应函数是给谁绑定的this就是谁
*/
//为checkedAllBox绑定单击响应函数
checkedAllBox.onclick = function(){
//alert(this === checkedAllBox);
//设置多选框的选中状态
for(var i=0; i <items.length ; i++){
items[i].checked = this.checked;
}
};
//6.items
/*
* 如果四个多选框全都选中，则checkedAllBox也应该选中
* 如果四个多选框没都选中，则checkedAllBox也不应该选中
*/
//为四个多选框分别绑定点击响应函数
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>4.DOM查询补充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取body标签
//这里的[0]的意思就是把数组中的第一个取出来
/*var body = document.getElementsByTagName("body")[0];
console.log(body);*/
//1.新增的body查询方法
//在document中有一属性body，它保存的是body的引用
/*var body = document.body;
console.log(body);*/
//2.document.documentElement保存的是html根标签
/*var html = document.documentElement;
console.log(html);*/
//all不经常用
//3.document.all代表的是页面中的所有元素
//var all = document.all;
//console.log(all.length);//显示6
//for(var i=0 ; i<all.length ; i++){
//console.log(all[i]);
//}
//4.document.getElementsByTagName("*")也是获取页面中所有的元素
//getElementsByTagName("div");获取页面中所有的div
var all = document.getElementsByTagName("*");
/*5.getElementsByClassName()
* 根据元素的class属性值查询一组元素节点
* getElementsByClassName()可以根据class属性值获取一组元素节点对象
* 局限性: 但是该方法不支持IE8及以下的浏览器
*/
/*var box1 = document.getElementsByClassName("box1");
console.log(box1.length);*/
//获取页面中的所有的div
/*var divs = document.getElementsByTagName("div");
console.log(divs.length);*/
//6. 获取class为box1中的所有的div
// .box1 div 通过CSS中的选择器来找
/*7.document.querySelector()
* document.querySelector()
* - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点
* - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()来代替查询
* 局限性：当同名的<div class="box1">有多个的时候，使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个元素
*/
/*var div = document.querySelector(".box1 div");
console.log(div.innerHTML);*/
//只要()是选择器就可以；只返回第一组div
/*var box1 = document.querySelector(".box1");
console.log(box1);*/
/*8.document.querySelectorAll()
* document.querySelectorAll()
* - 该方法和querySelector()用法类似，不同的是，它将会将符合条件的元素封装到一个数组中返回
* - 即使符合条件的元素只有一个，那么它也会返回一个数组
*/
var box1 = document.querySelectorAll(".box1");
//var box1 = document.querySelectorAll("#box1");
console.log(box1.length);
};
</script>
</head>
<body>
<div id="box1"></div>
<div class="box1">
我是第一个box1
<div>我是box1中的div~~</div>
</div>
<div class="box1">
<div>我是box1中的div~~</div>
</div>
<div class="box1">
<div>我是box1中的div~~</div>
</div>
</body>
</html>
5.DOM的增删改查
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript">
window.onload = function() {
//创建一个"广州"节点,添加到#city下
myClick("btn01",function(){
//1.创建广州节点<li>广州<li>
//2.创建li元素节点
/*
* document.createElement()
* 可以用于创建一个元素节点对象
* 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
* 并将创建好的对象作为返回值返回
*
*/
var li = document.createElement("li");
//创建广州文本节点
/*
* document.createTextNode();//参数是:"文本内容"
* 可以用来创建一个文本节点对象
* 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*
*/
var gzText = document.createTextNode("广州");
//将gzText设置li的子节点(因为上面的是独立的，所以得把文本节点添加到li中去)
/*
* appendChild()
* - 向一个父节点中添加一个新的子节点
* - 用法：父节点.appendChild(子节点)
*/
li.appendChild(gzText);
/*此时已经将其存入浏览器内存当中*/
//显示到页面当中
//获取id为city的节点
var city = document.getElementById("city");
//将带有广州的li添加到city下
city.appendChild(li);
});
//将"广州"节点插入到#bj前面
myClick("btn02",function(){
//创建广州节点:1.li 2.广州 3.绑定关系
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取北京节点
var bj = document.getElementById("bj");
//将"广州"节点插入到#bj前面
//因为是使用父节点调用的，所以，先找获取父节点
var city = document.getElementById("city");
/*
* insertBefore()
* - 可以在指定的子节点前插入新的子节点
* - 语法：
* 父节点.insertBefore(新节点,旧节点)
*
*/
city.insertBefore(li,bj);
});
//使用"广州"节点替换#bj节点
myClick("btn03",function(){
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取广州节点
//因为是使用父节点调用的，所以，先找获取父节点
var city = document.getElementById("city");
//替换：使用"广州"节点替换#bj节点
/*
* replaceChild()
* - 可以在指定的子节点前替换旧的子节点
* - 语法：
* 父节点.replaceChild(新节点,旧节点)
*
*/
city.replaceChild(li,bj);
});
删除#bj节点
myClick("btn04",function(){
var bj = document.getElementById("bj");
var city = document.getElementById("city");
/*
* removeChild()
* - 可以删除一个子节点
* - 语法：父节点.removeChild(子节点)；
*/
city.removeChild(bj);
//有些时候，我们是不知道父元素的，所以就可以这样使用
//bj.parentNode.removeChild(bj);
/*
* 语法：子节点.parentNode.removeChild(子节点)
*
*/
});
//读取#city内的HTML代码
myClick("btn05",function(){
var city = document.getElementById("city");
alert(city.innerText);
});
//设置#bj内的HTML代码
myClick("btn06",function(){
var bj = document.getElementById("bj");
bj.innerText = "昌平";
});
//创建一个"广州"节点,添加到#city下
//这都行
myClick("btn07",function(){
var city = document.getElementById("city");
//city.innerHTML = "<li>广州</li>"; 覆盖了之前的
//应该在原来的基础上添加
//这是替换了之前所有的li，因此如果之前有绑定事件的都会取消
//city.innerHTML += "<li>广州</li>";
/*
* 使用innerHTML也可以完成DOM的增删改的相关操作
* - 一般我们会两种方式结合使用
*
*/
//中和两种
//创建一个li
var li = document.createElement("li");
//先li中设置文本
li.innerHTML="广州";
//将li添加到city中
city.appendChild(li);
});
};
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</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>
</div>
</div>
<div id="btnList">
<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>
6.DOM的增删改查练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function() {
//创建一个"广州"节点,添加到#city下
myClick("btn01",function(){
//创建广州节点 <li>广州</li>
//创建li元素节点
/*
* document.createElement()
* 可以用于创建一个元素节点对象，
* 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
* 并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//创建广州文本节点
/*
* document.createTextNode()
* 可以用来创建一个文本节点对象
* 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
var gzText = document.createTextNode("广州");
//将gzText设置li的子节点
/*
* appendChild()
* - 向一个父节点中添加一个新的子节点
* - 用法：父节点.appendChild(子节点);
*/
li.appendChild(gzText);
//获取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");
//获取city
var city = document.getElementById("city");
/*
* insertBefore()
* - 可以在指定的子节点前插入新的子节点
* - 语法：
* 父节点.insertBefore(新节点,旧节点);
*/
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");
//获取city
var city = document.getElementById("city");
/*
* replaceChild()
* - 可以使用指定的子节点替换已有的子节点
* - 语法：父节点.replaceChild(新节点,旧节点);
*/
city.replaceChild(li , bj);
});
//删除#bj节点
myClick("btn04",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
* removeChild()
* - 可以删除一个子节点
* - 语法：父节点.removeChild(子节点);
*
* 子节点.parentNode.removeChild(子节点);
*/
//city.removeChild(bj);
bj.parentNode.removeChild(bj);
});
//读取#city内的HTML代码
myClick("btn05",function(){
//获取city
var city = document.getElementById("city");
alert(city.innerHTML);
});
//设置#bj内的HTML代码
myClick("btn06" , function(){
//获取bj
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
});
myClick("btn07",function(){
//向city中添加广州
var city = document.getElementById("city");
/*
* 使用innerHTML也可以完成DOM的增删改的相关操作
* 一般我们会两种方式结合使用
*/
//city.innerHTML += "<li>广州</li>";
//创建一个li
var li = document.createElement("li");
//向li中设置文本
li.innerHTML = "广州";
//将li添加到city中
city.appendChild(li);
});
};
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</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>
</div>
</div>
<div id="btnList">
<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>
7.练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
//设置一个tr的单击超链接删除响应事件
function detA () {
//点击超链接以后删除这一行
//找到父节点的父节点，并且返回一个值tr
//this这里代表的是点击时候的超链接a.parentNode.parentNode找到tr
var tr= this.parentNode.parentNode;
//获取删除的对象(这里表示所有的td)
//var name = tr.getElementsByTagName("td");
//获取第一个
var name = tr.getElementsByTagName("td")[0].innerHTML;
/*
* confirm 和alert差不多，但是多出了一个取消按钮
* 括号内容：提示信息是一个字符串
* 如果用户点击确认则返回true ，如果点击取消则返回false
*/
//弹出框返回一个结果
var flag = confirm("是否删除"+name);
//我自己写的，但是firstChild有一个局限性，有空格
//var flag = confirm("是否删除"+this.parentNode.parentNode.firstChild.innerHTML);
//我自己写的，就可以children[0]先找到所有子元素中的第一个
//var flag = confirm("是否删除"+this.parentNode.parentNode.children[0].innerHTML);
//判断用点击的是true还是false
if(flag==true){
//tr.parentNode找到父节点删除这个元素
tr.parentNode.removeChild(tr);
}
//点击超链接以后，超链接会跳转页面，这是个超链接的默认行为
//但是我们不希望出现新的窗口跳转，所以设置return false;取消超链接的默认行为
//可以使用这一个javascript:;两种方式
return false;
};
window.onload = function(){
//点击超链接后，删除一个员工信息
//获取所有的超链接
var allA = document.getElementsByTagName("a");
//给超链接添加响应事件,绑定单击响应函数
for (var i = 0 ; i<allA.length ; i++) {
//赋值不用括号
allA[i].onclick = detA;
//把删除的超链接响应函数封装起来了，在函数中
}
/*
* 添加员工的功能
* - 点击按钮以后，将员工的信息添加到表格中
*
*/
//给按钮绑定一个单击响应事件
//return false; 这里是一个input表单项，不是from，所以这里不用写
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function(){
//获取用户添加的员工信息
//获取员工的名字
var name = document.getElementById("empName").value;
//获取表单中用户输入的值
//这样写也可以name.value
//alert(name);
var email = document.getElementById("email").value;
//获取表单中用户输入的值
//这样写也可以email.value
//alert(email);
var salary = document.getElementById("salary").value;
//获取表单中用户输入的值
//这样写也可以salary.value
//alert(salary);
//添加到表格中：先创建tr和td和a
//创建一个tr
var tr = document.createElement("tr");
//创建4个td
var td01 = document.createElement("td");
var td02 = document.createElement("td");
var td03 = document.createElement("td");
var td04 = 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中去,将nameText绑到td01中
td01.appendChild(nameText);
td02.appendChild(emailText);
td03.appendChild(salaryText);
//先a中进行添加文本
a.appendChild(delText);
//a带文本的添加到td中
td04.appendChild(a);
//将td添加到tr中
tr.appendChild(td01);
tr.appendChild(td02);
tr.appendChild(td03);
tr.appendChild(td04);
//向a中添加href属性
a.href = "javascript:;";
//由于新添加的项是没有加载删除方法的，所以还得给a超链接绑定一个单击响应事件
//因为上面的单击响应事件是浏览器加载就有的，但是这个新加的a不会有
//所以得给a绑定一个单击删除事件
a.onclick = detA;
//把删除的超链接响应函数封装起来了，在函数中
//获取table
var employeeTable = document.getElementById("employeeTable");
//将tr添加到table中
//employeeTable.appendChild(tr);
//由于浏览器的原因，新加的行数会在外面，如果后期设置样式的时候那么就会不统一
//所以就可以全部放在tbody中
//获取employeeTable中的tbody,因为是数组，所以得加一个[0]
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="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<!--javascript:;-->
<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>
扫一扫
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
