前端笔记65——查找HTML元素的其他方法

最新推荐文章于 2022-09-19 22:00:00 发布

野生杂学家阿博

最新推荐文章于 2022-09-19 22:00:00 发布

阅读量524

点赞数 1

分类专栏：前端文章标签：前端 JavaScript 查找元素

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/86551463

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

在前面的《前端笔记41——JavaScript查找HTML元素》中，分享了通过id来查找HTML元素的方法。

查找HTML元素的方法

通过id来获取元素；
通过标签名称来获取元素；
通过类名称来获取元素。

代码实例

实现上面说的三种方法查找元素，还做了一个批量添加功能。小伙伴们可以复制到编译器上面看运行效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<button id="btn">添加内容</button>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<input type="checkbox" class="ipt" />
		</div>
		<script type="text/javascript">
			// 通过id来获取元素
			var oBox = document.getElementById("box")
			// 通过标签名称来获取元素
			var aLi = document.getElementsByTagName("li")
			// 通过类名称来获取元素
			var aIpt = document.getElementsByClassName("ipt")
			
			var oBtn = document.getElementById("btn")
			// 点击按钮 批量的给li添加内容
			oBtn.onclick = function(){
				for(var i in aLi){
					aLi[i].innerHTML = i
					aLi[i].style.color = "red"
				}
			}
		</script>
	</body>
</html>

野生杂学家阿博

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端笔记65——查找HTML元素的其他方法

前言在前面的《前端笔记41——JavaScript查找HTML元素》中，分享了通过id来查找HTML元素的方法。查找HTML元素的方法通过id来获取元素；通过标签名称来获取元素；通过类名称来获取元素。代码实例实现上面说的三种方法查找元素，还做了一个批量添加功能。小伙伴们可以复制到编译器上面看运行效果。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt...
复制链接

扫一扫

专栏目录