Dom-Html

最新推荐文章于 2023-06-13 10:07:16 发布

韵然CP

最新推荐文章于 2023-06-13 10:07:16 发布

阅读量93

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_40354578/article/details/94553520

版权

JavaWeb 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dom-Html</title>
	</head>
	<body>
		<div id="a" data="nihao">
			123
		</div>
		<div id="b" data="shijie">
			123
		</div>
		<img src="img/imooclogo.png" id="image"/>
		<a href="https://blog.csdn.net/qq_40354578" id="href"></a>
		<script type="text/javascript">
			var a=document.getElementById("a");
			var b = document.getElementById("b");
			//通过js去修改HTML中的内容
			a.innerHTML=456;
			b.innerHTML='hello';
			/*
			 * 获得属性
			 * element.getAttribute()
			 * 添加/修改属性
			 * element.setAttribute()
			 * element.src
			 * element.href
			 */
			//获取属性
			alert(a.getAttribute("data"));
			//修改属性
			b.setAttribute("data","yuzhou");
			//添加属性
			b.setAttribute("date","date");
			
			var image=document.getElementById("image");
			image.src="1.jpeg";
			
			var href1=document.getElementById("href");
			href1.href="www.baidu.com";
			
			
		</script>
	</body>
</html>

这个alert应该显示的是id为a的div的data的内容，通过element.getAttribute()获得的

依照顺序应该显示的是两个div的内容，然后就是img的内容，但是div的内容通过document.getElementById.innerHTML()改变成了456，hello，对于图片让我们查看一下代码

实际上这就是图片03-02了，应该源代码也改的不知道为啥没改，但是还是正常显示了

韵然CP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom-Html

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Dom-Html</title> </head> <body> <div id="a" data="nihao"> 123 </div&...
复制链接

扫一扫

专栏目录