JavaScript节点克隆与删除

javascript节点操作过程中的问题

  • 这是在节点克隆,和删除节点是出现的错误。以下代码逻辑上看似没有错误,但是运行会发现var parent = deleteimg.parentNode;处会报错,说是找不到子节点。
  • 原因分析:克隆对象段代码var images = document.getElementsByClassName(“images”)[0];和var parent = deleteimg.parentNode;是同一节点,并且获取是同一级别的(也可以说是同时获取的内容)
    及parent.removeChild(deleteimg)删除的是第一张原有的img,后续克隆出来的img在(parent = deleteimg.parentNode;)这段代码里是没有的。改进如下改进代码。

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<input type="button" id="input1" value="克隆图片" />
		<input type="button" id="input2" value="删除图片" />
		<div class="images">
			<img src="../img/青春靓丽宅男女神系列%20-%201.jpg" width="150px" height="150px" >
		div>
		<script type="text/javascript">
			//1.获取删除元素和触发按钮
			
			var deleteimg = document.getElementsByTagName("img")[0];
			var deletebtn = document.getElementById("input2");
			//2.获取其父标签
			var parent = deleteimg.parentNode;
			//3.绑定按钮事件
			deletebtn.onclick=function(){
      
				parent.removeChild(deleteimg)
			}

			//1.获取按钮、被克隆对像、存放容器
			var btn = document.getElementById("input1");
			var img = document.getElementsByTagName("img")[0];
			var images = document.getElementsByClassName("images")[0];
			//2.绑定点击事件克隆
			btn.onclick=function(){
      
				var newimg = img.cloneNode(true)//true表示克隆所有内容,包括子元素
				//3.添加到对应存放位置
				images.appendChild(newimg);
			}
				
		script>
	body>
html>

改进

  • 选择在点击删除时在来获取div对象,这时里面才有已经克隆的img。

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<input type="button" id="input1" value="克隆图片" />
		<input type="button" id="input2" value="删除图片" />
		<div class="images">
			<img src="../img/青春靓丽宅男女神系列%20-%201.jpg" width="150px" height="150px" >
		div>
		<script type="text/javascript">
			
			
			//3.绑定按钮事件
			deletebtn.onclick=function(){
      
				//1.获取删除元素和触发按钮
				var deleteimg = document.getElementsByTagName("img")[0];
				var deletebtn = document.getElementById("input2");
				//2.获取其父标签
				var parent = deleteimg.parentNode;
				parent.removeChild(deleteimg)
			}

			//1.获取按钮、被克隆对像、存放容器
			var btn = document.getElementById("input1");
			var img = document.getElementsByTagName("img")[0];
			var images = document.getElementsByClassName("images")[0];
			//2.绑定点击事件克隆
			btn.onclick=function(){
      
				var newimg = img.cloneNode(true)//true表示克隆所有内容,包括子元素
				//3.添加到对应存放位置
				images.appendChild(newimg);
			}
				
		script>
	body>
html>

你可能感兴趣的:(前端,javascript,javascript节点操作,javascript节点克隆,javascript节点删除,父节点删除子节点)