JavaScript基础(27)—DIV节点的操作

最新推荐文章于 2024-01-04 14:18:16 发布

msirene

最新推荐文章于 2024-01-04 14:18:16 发布

阅读量219

点赞数 1

分类专栏： Javasprict

本文链接：https://blog.csdn.net/msirene/article/details/24303223

版权

Javasprict 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>javascript039.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">-->
	<style type="text/css">
		div {
			border:#0099ff 1px solid;
			height:60px;
			width:120px;
			margin:20px 0px 20px 20px;
			padding:10px 0px 0px 20px;
		}
		
		#div_1 {
			background-color:#00ffff;
		}
		
		#div_2 {
			background-color:#ff3399;
		}
		
		#div_3 {
			background-color:#0000ff;
		}
		
		#div_4 {
			background-color:#ffff66;
		}
	</style>
	
	<script type="text/javascript">
		function create()
		{
			/*
				需求：给div添加一个文本节点
				分析：
					A:创建一个文本节点
					B:将文件节点的值添加到指定的div区域中
			*/
			
			//如何创建文本节点呢?
			//createTextNode
			var textNode = document.createTextNode("div区域1");
			//获取指定的div
			var divNode = document.getElementById("div_1");
			//div对象中有这样的一个方法：appendChild 给对象追加一个子元素。 
			divNode.appendChild(textNode);
			
			//我想给它添加一个超链接标签行不行呢?
			//createElement 为指定标签创建一个元素的实例。 
			var aNode = document.createElement("a");
			//给a标签添加文本节点
			// href 设置或获取目标 URL 或锚点 
			aNode.href = "http://www.baidu.com";
			aNode.innerText = "百度";
			
			//把a标签节点添加到div上
			divNode.appendChild(aNode);
		}
		
		function deleteNode()
		{
			/*
				需求：删除div_2的内容。
				分析：
					A:找到div_2节点
					B:删除内容即可
			*/	
			//找到div_2节点
			//var divNode = byId("div_2");
			//childNodes 返回div的所有儿子节点
			//var nodes = divNode.childNodes;
			//alert(nodes[0].nodeValue);
			//获取文本节点
			//var textNode = divNode.childNodes[0];
			//删除文本节点
			//removeChild 从元素上删除子结点。 
			//divNode.removeChild(textNode);
			
			/*
				需求：我要删除div_2这个节点。
				分析：
					A:先找到div_2的父节点
					B:通过父节点删除div_2这个节点
			*/
			//var divNode = byId("div_2");
			//获取该节点的父节点
			// parentNode 获取文档层次中的父对象 
			//alert(divNode.parentNode.nodeName);
			//获取到了body节点
			//var bodyNode = divNode.parentNode;
			//采用删除方法即可
			//bodyNode.removeChild(divNode);
			
			//节点自己删除自己
			var divNode = byId("div_2");
			//删除节点
			//removeNode 从文档层次中删除对象
			//true childNodes collection of the object is removed. 
			//IE
			//divNode.removeNode(true); //连同儿子都干掉
			//chrome
			divNode.remove(); //连同儿子都干掉
		}
		
		function update()
		{
			/*
				需求：用div_1把div_3给替换调用
				分析：
					A:获取div_1节点对象
					B:获取div_3节点对象
					C:用div_1节点替换div_3节点
			*/
			//获取div_1节点对象
			var div1Node = byId("div_1");
			//获取div_3节点对象
			var div3Node = byId("div_3");
			//替换节点
			//object.replaceNode(oNewNode)
			//IE
			//div3Node.replaceNode(div1Node);
			//IE,chrome
			div3Node.parentNode.replaceChild(div1Node,div3Node);
		}
		
		function clone()
		{
			/*
				需求：用div_3替换div_4。但是还是要去div_3存在
				分析：
					A:获取div_3节点对象
					B:获取div_4节点对象
					C:把div_3的节点对象复制一份
					D:用复制后的div_3节点替换div_4节点
			*/
			var div3Node = byId("div_3");
			var div4Node = byId("div_4");
			
			//复制节点呢
			//cloneNode 从文档层次中复制对对象的引用 
			var div3Node2 = div3Node.cloneNode(true);//表示连同子节点对象一起克隆
			
			//替换
			//IE
			//div4Node.replaceNode(div3Node2);
			//IE,chrome
			div4Node.parentNode.replaceChild(div3Node2,div4Node);
		}
		
		function byId(id)
		{
			return document.getElementById(id);	
		}
	</script>
  </head>
  
  <body>
    <div id="div_1">
    
    </div>
    <div id="div_2">
    	div区域2
    </div>
    <div id="div_3">
    	div区域3
    </div>
    <div id="div_4">
    	div区域4
    </div>
    <hr/> 
    <input type="button" value="创建并添加数据" οnclick="create()" />
    <input type="button" value="删除节点" οnclick="deleteNode()" />
    <input type="button" value="替换节点" οnclick="update()" />
    <input type="button" value="克隆节点" οnclick="clone()" />
  </body>
</html>