版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chengxu_kuangrexintu/article/details/86551463
前言
在前面的《前端笔记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>