javascript学习DOM2

2022/3/20 22:29:47

本文主要是介绍javascript学习DOM2,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div>
			
			<!--为按钮button加入事件-->
			<button onclick="jiaTu()">添加图片</button>
			<button onclick="shanTu()">删除图片</button>
			
			<!--通过id将图片固定在div上-->
			<div id="imgs"></div>
		
		</div>
		
		<script type="text/javascript">
			
			function jiaTu(){
				//注意:不管是添加元素还是删除元素,都要通过父元素进行操作
				var divJia = document.getElementById("imgs");
				
				//创建图片标签
				var img = document.createElement("img");  
				
				//设置标签属性
				img.setAttribute("src","img/autumn.jpg");
				img.setAttribute("width","200px");
				img.setAttribute("height","200px");
			
				//appendChild(img)为父元素添加一个子节点
				divJia.appendChild(img)
			
			}
			
			//删除标签
			function shanTu(){
				
				//思路:先获得父元素,再获得子元素,通过父元素删除子元素
				var divJian = document.getElementById("imgs")
				
				//parentNode:返回节点的父节点,removeChild(divJian):删除指定的节点
				divJian.parentNode.removeChild(divJian)
			}
		</script>
	</body>
</html>



这篇关于javascript学习DOM2的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程