通过 id 查找 HTML 元素
下面的代码通过ID查找元素，给button注册点击事件。
<input type="button" value = "隐藏" id="btn" class="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
if(flag===1){
btn.value="显示";
box.className = "hidden";
flag=0;
}
else{
btn.value="隐藏";
box.className = "show";
flag = 1;
}
</script>
image.png
我们通过console.log(btn)在浏览器控制台打印出获取的元素。
image.png
通过标签名查找 HTML 元素
上述的例子，我们使用标签名获取元素,并在控制台打印。
var tags = document.getElementsByTagName("input");
console.log(tags);
image.png
可以看到，此时打印出来的不是单个元素，而是一个元素集合，此时注册按钮事件时应该取其中的一个元素。
tags[0].onclick = function(){
if(flag===1){
btn.value="显示";
box.className = "hidden";
flag=0;
}
else{
btn.value="隐藏";
box.className = "show";
flag = 1;
}
}
通过类名找到 HTML 元素
var classnames = document.getElementsByClassName("btn");
image.png
通过类名得到的也是一个元素集合，用法与标签名类似
classnames[0].onclick = function(){
if(flag===1){
btn.value="显示";
box.className = "hidden";
flag=0;
}
else{
btn.value="隐藏";
box.className = "show";
flag = 1;
}
}
