获取页面元素的方法（JS）

首先先了解一个词：DOM（Document Object Model）,文档对象类型。顾名思义，DOM就是个对象，里面存着好多属性值，因此就可以通过它的方法来获取元素了。

（1）通过id：getElementById("id名")

（2）通过Class：getElementsByClassName("class名")

（3）通过标签名：getElementsByTagName("标签名")

（4）通过name：getElementsByName("name")

（5）通过选择器,获取一个元素：querySelector("选择器")

（6）通过选择器,获取一组元素:querySelectorAll("选择器")

代码举例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        background: skyblue;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="div1" id="div1">1</div>
    <div class="div1">2</div>
    <input type="radio" name="justify" />对
    <input type="radio" name="justify" />错
    <input type="radio" name="justify" />不确定

    <script>
      // 通过id获取div1
      var div1 = document.getElementById("div1");
      console.log(div1);

      // 通过class名获取class=div1的元素
      var div = document.getElementsByClassName("div1");
      console.log(div);

      //   通过标签名获取所有div
      var divTagName = document.getElementsByTagName("div");
      console.log(divTagName);

      //   获取name=justify的所有元素
      var inputName = document.getElementsByName("justify");
      console.log(inputName);

      //   通过id选择器获取元素
      var divSelector = document.querySelector("#div1");
      console.log(divSelector);
      //   通过选择器获取第二个div
      var divSec = document.querySelector("div:nth-child(2)");
      console.log(divSec);

      //   通过选择器获取所有div
      var divSelectorAll = document.querySelectorAll("div");
      console.log(divSelectorAll);
    </script>
  </body>
</html>

运行结果：

分析输出结果会发现，当时Elements的时候获取到的元素是一个数组，而其他属性可以重名，而id属性不能重名，所以对于前四个来说，只有通过id获取的时才会获得的是一个元素，其他的即使是一个元素也会是个数组。

获取页面元素的方法（JS）

Guess you like