js学习（十二）-- DOM的增删改

目录

• DOM增删改
• 练习-实现增删改
  • 改进版-使用innerHTMl
  • a的索引问题

DOM增删改

(https://www.w3school.com.cn/htmldom/dom_methods.asp)

<script type="text/javascript">
            window.onload = function(){
                  myClick("btn01",function(){
                        //创建广州节点<li>广州</li>
                        //创建li元素节点
                        /*
                         *document.createElement()
                         *可以用于创建一个元素节点对象
                         *他需要一个标签名作为参数，将会根据该标签名创建元素节点对象
                         *并将创建好的对象作为返回值返回
                         */
                        var li = document.creatrElement("li");
                        
                        //创建广州的文本节点
                        /**
                         * document.createTextNode()
                         * 可以用来创建一个文本节点对象
                         * 需要一个文本内容作为参数，将会根据内容创建文本节点，并将新的节点返回
                         */
    
                        var gzText = document.createTextNode("广州");
    
                        //将gzText设置为li的子节点
                        /**
                         * appendChild()
                         * -向一个父节点中添加一个新的子节点
                         * -用法:父节点.appendChild(子节点);
                         */ 
                        li.appendChild(gzText);
    
                        //获取id为city的节点
                        var city = document.getElementsByName("city");
    
                        //将广州添加到city下
                        city.appendChild(li);
                  });
    
                  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);
                    });
    
                  //将“广州”节点插入到#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 = "昌平";
                  });
            }
        </script>

练习-实现增删改

<!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 del() {

			//点击超链接以后需要删除超链接所在的那行
			//这里我们点击那个超链接this就是谁
			//获取当前tr
			var tr = this.parentNode.parentNode;

			//获取要删除的员工的名字
			//var name = tr.getElementsByTagName("td")[0].innerHTML;
			var name = tr.children[0].innerHTML;

			//删除之前弹出一个提示框
			/*
			 * confirm()用于弹出一个带有确认和取消按钮的提示框
			 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
			 * 如果用户点击确认则会返回true，如果点击取消则返回false
			 */
			var flag = confirm("确认删除" + name + "吗?");

			//如果用户点击确认
			if (flag) {
				//删除tr
				tr.parentNode.removeChild(tr);
			}

			/*
			 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
			 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
			 */

			return false;



		};

		window.onload = function () {

			/*
			 * 点击超链接以后，删除一个员工的信息
			 */

			//获取所有额超链接
			var allA = document.getElementsByTagName("a");

			//为每个超链接都绑定一个单击响应函数
			for (var i = 0; i < allA.length; i++) {
				allA[i].onclick = del;
			}

			/**
					 * 添加员工的功能
					 * - 点击按钮后，将员工的信息添加到表格中
					 */
			//为提交按钮绑定一个单击响应函数
			var addEmpButton = document.getElementById("addEmpButton");
			addEmpButton.onclick = function () {
				//获取用户添加的员工信息
				//获取员工的名字	
				var name = document.getElementById("empName").value;
				//获取员工的email和salary
				var email = document.getElementById("email").value;
				var salary = document.getElementById("salary").value;


				//将获取到的信息添加到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 = del;

				//获取table将tr添加到table 中
				var employeeTable = document.getElementById("employeeTable");

				//获取employeeTable中的tbody
				var tbody = employeeTable.getElementsByTagName("tbody")[0];

				//将tr添加到table中
				//employeeTable.appendChild(tr);

				//将tr添加到tbody中
				tbody.appendChild(tr);
			}


		};


	</script>
</head>

<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</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>
			<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>

改进版-使用innerHTMl

<!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 delA() {

				//点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
				var tr = this.parentNode.parentNode;

				//获取要删除的员工的名字
				//var name = tr.getElementsByTagName("td")[0].innerHTML;
				var name = tr.children[0].innerHTML;

				//删除之前弹出一个提示框
				/*
				 * confirm()用于弹出一个带有确认和取消按钮的提示框
				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
				 * 如果用户点击确认则会返回true，如果点击取消则返回false
				 */
				var flag = confirm("确认删除" + name + "吗?");

				//如果用户点击确认
				if(flag) {
					//删除tr
					tr.parentNode.removeChild(tr);
				}

				/*
				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
				 */
				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;
					//获取员工的email和salary
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;

					//alert(name+","+email+","+salary);
					/*
					 *  <tr>
							<td>Tom</td>
							<td>tom@tom.com</td>
							<td>5000</td>
							<td><a href="javascript:;">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添加到tbodye中
					tbody.appendChild(tr);
				};
			};
		</script>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</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>
				<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">
						Submit
					</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

a的索引问题

for(var i=0;i<allA.length;i++){
      allA[i].onclick = function(){
            alert(allA[i]);
            return false;
      }
}

因为是处在window.onload下的所以，for循环早就遍历了,输出的alert(allA[i])一直都是allA.length