DOM获取HTML元素

通过 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;
           }
       }