javascript--通过dom查找页面元素的三种方法_js 查找dom下的a元素-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_60672911/article/details/123138039

首先在body里面先创建四个buttonl来区分

<body>
    <button>标签名</button>
    <button class="lei">类名</button>
    <button class="lei">类名2</button>
    <button id="gogo">id名</button>
</body>

//第一种
//通过标签名获取元素如果有多个一样的标签在通过数组下标取到相应的标签属性

var but = document.getElementsByTagName('button')[0];
 //  var but = document.getElementsByTagName('标签名') 
 加一个数组[下标]  (下标是几就是第几个) 注意下标从0开始;
 console.log(but);//得到button标签

 but[0].onclick = function () {
     alert('我是第一个');
 }
 but[1].onclick = function () {
     alert('我是第二个');
 }
 but[2].onclick = function () {
     alert('我是第三个');
      }

//第二种
//通过类名找到元素如果有多个一样的类名也是通过数组下标确定类的位置

  var classbtn = document.getElementsByClassName('lei');
    //console.log(classbtn);//得到两个类名为lei 的button
    
    classbtn[0].onclick = function () {
        alert('我是第一个类');
    }
    classbtn[1].onclick = function () {
        alert('我是第二个类');
    }

第三种
//通过id名为gogo 找到元素
//id 是唯一的所以不用找数组的下标

 var gogo_ = document.getElementById('gogo');
    console.log(gogo_);
    gogo_.onclick = function () {
        alert('我是id');
    }