原生JS四（获取页面元素）

最新推荐文章于 2024-04-11 16:16:12 发布

CSDN_GMC

最新推荐文章于 2024-04-11 16:16:12 发布

阅读量140

点赞数

分类专栏：原生js 文章标签： html5 javascript 前端 html

本文链接：https://blog.csdn.net/CSDN_GMC/article/details/105350004

版权

原生js 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div>我是通过标签名获取的</div>
		<div class="div1">我是通过class类名获取的</div>
		
		<div id="div2">
				我是通过id名来获取的
				<span>ssss</span>
		</div>
		
		
		<!--innerHTML-->
		<div name="div3">我是通过name来获取的
		
				<span>ssss</span>
		</div>
		
		
	<ul>
		<li class="list"></li>
		<li class="list"></li>
		<li class="list"></li>
		<li class="list"></li>
		<li class="list"></li>
		<li class="list"></li>
	</ul>
		
		
		<script type="text/javascript">
			
			//获取元素的四种方式：
			
			// 1. 通过标签名来获取
			var box = document.getElementsByTagName("div")[2];
			console.log(box);
			
			// 2. 通过class类名 来获取
			var box2 = document.getElementsByClassName("div1")[0];
			console.log(box2);
			
			
			// 3. 通过id名来获取
			var box3 = document.getElementById("div2");
			console.log(box3);
			
			// 4. 通过name属性来获取
			var box4 = document.getElementsByName("div3")[0];
			console.log(box4);
			
			
			// 设置HTML标签的文字
			//  innerHTML: 会修改开始标签到结束标签之间，所有的内容(覆盖子元素)
			//  innerText: 只会修改文本内容
			
			box4.innerHTML = "我被js给羞辱了";
			box3.innerText = "我也被js给羞辱了";
			
			
			//通过js 来修改html 的样式
			box.style.width = 100 + "px";
			box.style.height = 100 + "px";
			box.style.backgroundColor = "red";
			
			
			// 将循环和标签和结合使用一下     （了 解）
			var list = document.getElementsByClassName("list");
			
			for(var i = 0; i < list.length; i++){
					list[i].innerHTML = i+1;
			}
			
			
			
		</script>
	</body>
</html>

CSDN_GMC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS四（获取页面元素）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div>我是通过标签名获取的</div> <div class="div1"...
复制链接

扫一扫