JavaScript 对图像进行（追加，插入，替换，删除）

Posted 不苦不累, 人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 对图像进行（追加，插入，替换，删除）相关的知识，希望对你有一定的参考价值。

javascript 对图像进行（追加，插入，替换，删除）

本次所学内容：

document.querySelector(‘.container‘)       　　　　

这个是可以查找单个【id标签和class标签】

document.querySelectorAll(‘.container‘)   　　　　

这个是可以查找全部【li标签和class标签】

container.appendChild(img)    　　　　　　　　　 

这个是对container标签进行追加子标签

container.firstElementChild　　　　　 　 　　　　

这个是在（谷歌浏览器兼容），功能是查找container标签下的第一个子标签

container.firstChild;　　　　　　　　　   　　　　 

这个是在（IE8兼容），功能是查找container标签下的第一个子标签

container.lastElementChild                        　　　　

这个是在（谷歌浏览器兼容），功能是查找container标签下的最后一个子标签

container.lastChild;                                    　　　　 

这个是在（IE8兼容），功能是查找container标签下的最后 一个子标签

container.insertBefore(img,firstImg);         　　　   

这个是对container标签的子标签进行插入功能，参数一个是要插入的标签，后边的参数是要在那个节点进行插入

container.replaceChild(img,lastImg);        　　　　

这个是对container标签然后替换这个标签下的标签，共有俩个参数，一个是要替换的标签，一个是被替换的标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.节点方法:添加、替换、删除</title>
	<style>
	/*对class标签进行css样式*/
	.container{
		width:600px;
		/*设置宽度为600px*/
		height:600px;
		/*设置高度为600px*/
		border:1px solid #ddd;
		/*设置边框 厚度为1px 使用实线，颜色为灰色*/
	}
	img{
		/*通过img标签名进行查找*/
		width:100px;
		/*设置宽度为100px*/
		height:100px;
		/*设置高度为100px*/
		border-radius:50%;
		/*设置图像显示的范围，50%为园型图*/
		float:left;
		/*使用向左悬浮，去掉间隙*/
	}
	</style>
</head>
<body>
	<div class="container">
	<!-- 定义一个div标签 -->
		<img src="images/1.jpg" />
		<!-- 在div标签中定义一个img标签 -->
	</div>
	<button>点击追加一张图片</button>
	<!-- 定义一个按钮标签 -->
	<button>点击前面添加一张图片</button>
	<!-- 定义一个按钮标签 -->
	<button>点击替换最后一张图片</button>
	<!-- 定义一个按钮标签 -->
	<button>点击删除第三张图片（索引值为2）</button>
	<!-- 定义一个按钮标签 -->
</body>
<script>
/*
方法
	// append:追加 child:子节点
	ul.appendChild(节点对象):

	// insert:添加 before:在...之前
	insertBefore(添加的节点,指定的节点)

	// replace:替换 
	replaceChild(新节点,被替换的节点)

	// remove:删除
	removeChild(删除的节点)
*/
	//1.获取对象
	var container = document.querySelector(‘.container‘);
	// 获取标签并赋值到一个变量中
	var btn = document.querySelectorAll(‘button‘);
	// 获取所有的标签并赋值到一个变量中，获取的是一个数组，每个数组中都是object对象
	
	//2.点击事件,追加一张图片images/2.jpg
	btn[0].onclick = function(){
		// 通过下标索引获取第一个button标签，然后绑定一个点击事件
		//(1)创建图片节点
		var img = document.createElement(‘img‘);
		//创建一个新的img标签，然后赋值给变量
		//(3)随机数
		var index = rand(1,60);
		// 调用函数将函数的执行效果赋值给变量
		img.src = ‘images/‘ + index + ‘.jpg‘;
		// 使用拼接字符，然后设置标签的src属性
		img.alt = ‘美女图‘;
		// 如果图片没有加载成功就就会返回美女图字符串
		// 
		//console.log(img);

		//(2)追加图片
		container.appendChild(img);
		// 这个是找到container 标签然后在这个标签的中添加字标签
	}

	//在节点之前添加节点
	btn[1].onclick = function(){
		//创建图片节点（添加一张新图片，浏览器上没有的图片，就只能创建）
		var img = document.createElement(‘img‘);
		img.src = ‘images/‘ + rand(1,60) +‘.jpg‘;
		img.alt = ‘美女头像图‘;


		//firstElementChild（谷歌兼容）
		//firstChild（IE8兼容）
		var firstImg = container.firstElementChild ||　container.firstChild;
		//获取第一张图片
		
		//头部添加图片（在节点之前添加）
		container.insertBefore(img,firstImg);
		// 使用插入的方法共有俩个参数，一个是要插入的内容是什么，一个参数是要在什么节点之前，
	}	

	//替换节点
	btn[2].onclick = function(){
		//1.新节点
		var img = document.createElement(‘img‘);
		// 创建一个新的标签
		img.src = ‘images/‘+rand(1,60)+‘.jpg‘;
		// 使用字符串拼接，然后赋值给一个变量
		img.alt = ‘加班中‘;
		// 如果图片加载错误，就提示支付串加班中
		//2.最后一个节点
		var lastImg = container.lastElementChild || container.lastChild;
		// 查找container标签下的最后一个标签，然后赋值到一个新的变量中
		//3.替换节点
		container.replaceChild(img,lastImg);
		// 找到container标签然后替换这个标签下的标签，共有俩个参数，一个是要替换的标签，一个是被替换的标签
	}

	//点击删除第三张图片
	btn[3].onclick = function(){
		//获取第三张图片
		var threeChild = container.children[2];//获取了所有的标签子节点
		//console.log(threeChild);
		//删除该图片
		container.removeChild(threeChild);
	}

	//点击一次随机出现一张(1-60张图片)
	//随机数函数
	function rand(m,n){
		// 定义一个函数，需要有俩个参数
		//随机数
		return Math.floor(Math.random()*(n-m+1)+m);
		// 返回向下取整的方式然后执行随机数的函数
	}

</script>
</html>

以上是关于JavaScript 对图像进行（追加，插入，替换，删除）的主要内容，如果未能解决你的问题，请参考以下文章

Redshift 复制命令追加、替换或更新插入？

JavaScript如何实现对数组元素的插入、删除、替换

sed指定某行插入追加全局替换

Javascript进阶篇——(DOM—节点---插入删除和替换元素创建元素创建文本节点)—笔记整理

如何通过Java代码在PDF中插入替换或删除图像？

如何用 Javascript 替换和追加