Javascript操作文档(DOM)

最新推荐文章于 2022-07-09 17:04:01 发布

我是一只好羊

最新推荐文章于 2022-07-09 17:04:01 发布

阅读量422

点赞数

分类专栏： HTML / JSP

本文链接：https://blog.csdn.net/chinamummy_29/article/details/24797909

版权

HTML / JSP 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在DOM中不仅可以通过节点的属性查询节点，还可以对节点进行创建、插入、删除和替换等操作。

<!DOCTYPE html>
<html>
  <head>
    <title>DOM.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script>
    		function addElement(){
    			//创建评论人和评论的TextNode节点
    			var person = document.createTextNode(form1.person.value);
    			var content = document.createTextNode(form1.content.value);
    			//创建td类型的Element节点
    			var td_person = document.createElement("td");
    			var td_content = document.createElement("td");
    			var tr = document.createElement("tr");
    			var tbody = document.createElement("tbody");
    			//将TextNode添加到td类型的节点中
    			td_person.appendChild(person);
    			td_content.appendChild(content);
    			//将td类型节点添加到tr类型的节点中
    			tr.appendChild(td_person);
    			tr.appendChild(td_content);
    			tbody.appendChild(tr);
    			
    			//获取table对象
    			var tComment = document.getElementById("comment");
    			tComment.appendChild(tbody);
    			
    			form1.person.value="";
    			form1.content.value="";
    		}
    		
    		//删除第一条
    		function deleteFirstE(){
    			var tComment = document.getElementById("comment");
    			if(tComment.rows.length>1){
    				tComment.deleteRow(1);	
    			}
    		}
    		
    		function deleteLastE(){
    			var tComment = document.getElementById("comment");
    			if(tComment.rows.length>1){
    				tComment.deleteRow(tComment.rows.length-1);	
    			}	
    		}
    		
    	</script>
	
  </head>
  
  <body>
  	
  	<table id="comment" width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#666666" bordercolordark="#FFFFFF">
  		<tr>
  			<td width="18%" height="27" align="center" bgcolor="#E5BB93">评论人</td>
  			<td width="18%" align="center" bgcolor="#E5BB93">评论内容</td>	
  		</tr>	
  	</table>
  	
  	<form name="form1" method="post" action="">
  		评论人：<input name="person" type="text" id="person" size="40" />
  		评论内容：<input name="content" cols="60" rows="6" id="content" />	
  		<br/>
  		<input type="button" value="发表" οnclick="addElement()" />
  		<input type="button" value="删除第一条评论" οnclick="deleteFirstE()" />
  		<input type="button" value="删除最后一条评论" οnclick="deleteLastE()" />
  	</form>
  	
  </body>
</html>