JavaScript中获取元素的两种方法

xuekatie

于 2021-03-16 12:10:27 发布

阅读量395

点赞数

分类专栏： web前端学习 JavaScript 语法

本文链接：https://blog.youkuaiyun.com/xuekatie/article/details/114874825

版权

web前端学习同时被 2 个专栏收录

15 篇文章

订阅专栏

JavaScript 语法

12 篇文章

订阅专栏

第一种方法，通过Id来获取

<body>
  <button class='box' id='btn'>按钮</button>
  <script>
    var btn = document.getElementById('btn') // 获取元素通过id
    console.log(btn)
    /*
      document.getElementById()
          - 通过 id 进行获取
          - 如果获取一个不存在的元素，得到的结果会是null
          - 只有document下存在getElementById，id是当前页面中唯一的
          - 遇到第一个符合条件的元素，就返回第一个元素
    */   
  </script>


</body>

第二种方法通过选择器来获取

<body>

  <button class='box' id='btn'>按钮</button>
  <div class='box'>盒子</div>
  
  <script>
    // 获取元素通过元素选择器来选择
    console.log(document.querySelector('#btn')) //通过指定选择器获取元素
    console.log(document.querySelector('.btn')) // 如果获取一个不存在的元素，得到的结果会是null !!! 
    console.log(document.querySelector('.box')) // 遇到第一个符合条件的就返回第一个元素
 //IE8以下不可以使用
  </script>

</body>