节点的增删改复制的操作

最新推荐文章于 2022-08-24 12:08:14 发布

张bin

最新推荐文章于 2022-08-24 12:08:14 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： html、css、javascript、dom 文章标签：节点克隆节点修改节点增加节点

本文链接：https://blog.youkuaiyun.com/zhangtianhao7_6/article/details/17733419

html、css、javascript、dom 专栏收录该内容

3 篇文章

订阅专栏

需求：完成节点的增删改复制的操作

用到的方法和属性：
1.获取某个节点的父节点
parentNode属性
2.获取某个节点的子节点集合
childNodes属性
3.创键一个新的节点
createTextNode(节点文本内容) document对象的方法在某些浏览器上兼容性不是很好
createElement(对象) document对象的方法例如：document.createElement("a");
4.给某个节点对象添加属性和属性值
setAttribute(属性，属性值); 例如：aNode.setAttribute("href","http://www.baidu.com");
5.替换某个节点下的子节点
replaceChild(新节点，原子节点);
6.将某个节点添加到一个节点下
appendChild(要添加的节点)
7.克隆某个节点

cloneNode() 不传参数和传入true参数一样，表示克隆该节点包括子节点

<!DOCTYPE html>
<html>
  <head>
    <title>node_CURD.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: red 1px solid;
			width: 200px;
			height: 50px;
			margin: 20px 30px;
			padding: 20px;
		}
		#div_1{
			clear:both;
			background-color:#FF3366;
		}
		#div_2{
			clear:both;
			background-color:#6699FF;
		}
		#div_3{
			clear:both;
			background-color:#CCCC99;
		}
		#div_4{
			clear:both;
			background-color:#00CC33;
		}
	</style>
	<script type="text/javascript">
		// 增加方式一：给第一个div区域添加文本
		function addText(){
			//1.获取要添加文本内容的节点
			var div_1Node = document.getElementById("div_1");
			//2.创建一个文本节点。document对象的createTextNode(文本内容)方法。某些浏览器不支持。
			var TextNode = document.createTextNode("这不就显示了吗？");
			//3.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法
			div_1Node.appendChild(TextNode);
		}
		// 增加方式二：给第一个div区域添加按钮
		function addButton(){
			//1.获取要添加文本内容的节点
			var div_1Node = document.getElementById("div_1");
			//2.创建一个节点。document对象的createElement()
			var aNode = document.createElement("input");
			//3.给指定对象添加属性和属性值
			//aNode.setAttribute("type","button");//和下面一句代码达到的效果一样
			aNode.type="button";
			aNode.setAttribute("value","按钮");
			aNode.setAttribute("onclick","deleteText('div_1')");
			//4.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法
			div_1Node.appendChild(aNode);
		}
		
		// 删除方式一：删除第二个区域的节点的子节点
		function deleteText(NodeId){
			//1.获取块节点
			var divNode = document.getElementById(NodeId);
			//2.获取子节点，即文本节点
			var chileNode = divNode.childNodes[0];
			//3.删除，传入一个参数true会删除其下所有子节点
			//chileNode.removeNode();   // 此方式在火狐和谷歌下不兼容
			divNode.removeChild(chileNode);
		}
		// 删除方式二：删除元素
		function deleteElement(){
			//1.获取块节点
			var div_2Node = document.getElementById("div_2");
			//2.获取父节点，
			var parentNode = div_2Node.parentNode;
			//3.删除
			parentNode.removeChild(div_2Node);
		}
		
		// 修改
		function UpdateText(){
			//1获取要修改字符的区域的节点
			var div_3Node = document.getElementById("div_3");
			//2.获取第一步中的子节点集合，指定到要修改的节点
			var childNode = div_3Node.childNodes[0];
			//3.创建一个文本节点
			var newNode = document.createTextNode("哈哈，我把你替换了.");
			//4.用3步创建的节点替换2步骤中的节点
			//childNode.replaceNode(newNode);//此方式在火狐和谷歌下不兼容
			div_3Node.replaceChild(newNode,childNode);
		}
		//克隆
		function copyNode(){
			//1.获取第四区域节点
			var div_1Node = document.getElementById("div_1");
			//2.获取第一区域节点
			var div_4Node = document.getElementById("div_4");
			//3.获得一个新节点通过克隆第四节点
			var newNode = div_4Node.cloneNode();//传入参数true表示克隆整个节点，包括子节点.默认是true参数的结果
			//4.将步骤3的新节点替换掉原来的第一节点
			div_1Node.parentNode.replaceChild(newNode,div_1Node);
		}
	</script>
  </head>
  
  <body>
	<div id="div_1"></div>
	
	<div id="div_2">这里是第二个区域</div>
	
	<div id="div_3">这里是第三个区域</div>
	
	<div id="div_4">这里是第四个区域</div>
	 <hr />
	 <font size="12px">增：</font>
	 <input type="button" value="给第一个区域增加文本" onclick="addText()" /> 
	 <input type="button" value="给第一个区域增加一个按钮" onclick="addButton()" /> 
	 <hr />
	 <font size="12px">删：</font>
	 <input type="button" value="删除第二区域的文本内容" onclick="deleteText('div_2')" /> 
	 <input type="button" value="删除第二个区域" onclick="deleteElement()" /> 
	 <hr />
	 <font size="12px">改：</font>
	 <input type="button" value="修改第三个区域中的内容" onclick="UpdateText()" /> 
	 <hr />
	 <font size="12px">克隆：</font>
	 <input type="button" value="将第四区域克隆到第一区域" onclick="copyNode()" /> 
  </body>
</html>