day15：JavaScript DOM编程学习笔记07

最新推荐文章于 2026-01-01 17:43:06 发布

原创最新推荐文章于 2026-01-01 17:43:06 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍如何使用JavaScript操作DOM元素，包括为元素添加事件监听器、创建新的DOM节点及实现基本的用户交互功能。具体涉及如何删除表格行、添加新记录及确保链接默认行为被取消。

※※※例子

例五：

需求1：为#employeetable的所有的a节点添加Onclick响应函数：

1.弹出确认对话框confirm：确定要删除xx的信息吗？xx为当前a节点所在的td所在的tr的第一个td子节点的文本值，且要去除前面空格。

2.若点击确认，则删除a节点所在的行。

*注意：

1.a节点是一个超级链接，可以在其onclick事件中通过返回false来取消其默认行为。

2.tr的直接父节点为tbody，而不是table

3.可以把去除前后空格的代码写成一个trim(str)函数。

需求2：为#addEmpButton添加onclick响应函数：

1.获取#name,#email,#salary的文本框的值

2.利用1获取的文本值创建三个td节点，再创建一个tr节点，并把以上三个td节点加为tr节点的子节点

<tr>

</tr>

3.再创建一个td节点：<td><ahref="deleteEmp?id=xxx">Delete</a></td>

4.把3创建的td也加为tr的子节点。

5.再把tr加为#employeetable的tbody子节点的子节点。

6.为新创建的tr的a子节点添加Onclick响应函数，使其也具备删除的功能。

window.onload=function(){
	 function removeTr(aNoe){
			var trNode=aNoe.parentNode.parentNode;
			var textContent=trNode.getElementsByTagName("td")[0]
									.firstChild.nodeValue;
			textContent=trim(textContent);
			var flag=confirm("确定要删除"+textContent+"的信息吗？")
			if(flag){
				trNode.parentNode.removeChild(trNode);
			}
			//取消默认行为
			return false;
		}
	var aNodes=document.getElementById("employeetable")
						.getElementsByTagName("a");
	for(var i=0;i<aNodes.length;i++){
		aNodes[i].onclick=function(){
			removeTr(this);
			//取消默认行为
			return false;
		}
	}
	
	document.getElementById("addEmpButton").onclick=function(){
		//value用于获取html表单元素的值，nodeValue用于获取文本节点的文本值
		var nameVal=document.getElementById("name").value;
		var emailVal=document.getElementById("email").value;
		var salaryVal=document.getElementById("salary").value;
		
		var nameTd=document.createElement("td");
		nameTd.appendChild(document.createTextNode(nameVal));
		
		var emailTd=document.createElement("td");
		emailTd.appendChild(document.createTextNode(emailVal));
		
		var salaryTd=document.createElement("td");
		salaryTd.appendChild(document.createTextNode(salaryVal));
		
		var tr=document.createElement("tr");
		tr.appendChild(nameTd);
		tr.appendChild(emailTd);
		tr.appendChild(salaryTd);
		
		alert("aa");
		
		var aNode=document.createElement("a");
		aNode.href="deleteEmp?id=xxx";
		aNode.appendChild(document.createTextNode("Delete"));
		var aTd=document.createElement("td");
		aTd.appendChild(aNode);
		tr.appendChild(aTd);
		
		aNode.onclick=function(){
			removeTr(this);
			
			return false;
		}
		
		document.getElementById("employeetable")
				.getElementsByTagName("tbody")[0]
				.appendChild(tr);
		
	}
	
	function trim(str){
		var reg=/^\s*|\s*$/g;
		return str.replace(reg,"");
	}
}

十二、插入节点

12.1insertBefore()：把一个给定节点插入到一个给定元素节点的给定子节点的前面

varreference=element.insertBefore(newNode,targetNode);

节点newNode将被插入到元素节点element中并出现在节点targetNode的前面，节点targetNode必须是element元素的一个子节点。

12.2自定义insertAfter()：

function insertAfter(newNode,refNode){
		//1.测试refNode是否为其父节点的最后一个子节点
		var parentNode=refNode.parentNode;
		if(parentNode){
			var lastNode=parentNode.lastChild;
			
			//2.若是：直接把newNode插入为refNode父节点的最后一个子节点
			if(refNode==lastNode){
				parentNode.appendChild(newNode);
			}
			//3.若不是：获取refNode的下一个兄弟节点，然后插入到其下一个兄弟节点的前面
			else{
				var nextNode=refNode.nextSibling;//下一个兄弟
				parentNode.insertBefore(newNode,nextNode);
			}
		}