根据类名：
    **getElementsByClassName(className)**
    注意： 这里的返回值是一个数组，因为类名可以给多个标签加上。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>Title</title>
    6.         <style>
    7.             .div{
    8.                 height: 400px;
    9.                 width: 500px;
    10.                 background: url("img/off.gif") no-repeat ;
    11.                 text-align: center;
    12.             }
    13.         </style>
    14.     </head>
    15.     <body>
    16.       <div class="div" >Hello</div>
    17.     </body>
    18.     <script>
    19.         let div = document.getElementsByClassName("div");
    20.         div[0].style.display="none";
    21.     </script>
    22. </html>

    image.png
    上述代码就会将这个div盒子加上其背景一起隐藏起来。

    根据选择器

    • **querySelector( 对应的选择器 )** 返回第一个被选中的元素对象
    • **querySelectorAll( 对应的选择器 )** 返回所有的选中对象，是一个伪数组的形式
      <!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          .div{
              height: 400px;
              width: 500px;
              background: url("img/off.gif") no-repeat ;
              text-align: center;
          }
      </style>
  </head>
  <body>
    <div class="div" >Hello</div>
  </body>
  <script>
      let div = document.querySelector(".div");
      // let div2 = document.querySelectorAll(".div");
      div.style.display="none";
      // div2[0].style.display="none";
  </script>
</html>
      image.png
      上面代码是将 div 盒子隐藏起来了，注释掉的和未注释的代码作用是一样的。

    通过标签名获取
    **element.getElementByTagName('标签名')**``;

    • 获取的是某个元素（父元素）的内部所有指定标签名的子元素。
    • 获取的时候不包括父元素自己。
    • 这里获取到的是一个数组。
      <body>
<div class="div">
<a href="#" id="first">首页</a>
<a href="#" id="previous" data-name="previous">&lt;&lt;上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#" id="next" data-name="next">下一页&gt;&gt;</a>
<a href="#" id="laster">尾页</a>
</div>
</body>
<script>
let myLabel = document.querySelector(".div").getElementsByTagName("a");
</script>
      通过id唯一标识
      **getElementById("Id值")：** 和有类名获取元素差不多，只不过这个是id，这个获取到的就是元素本身，不是数组，因为id值唯一。
      <body>
<div id="div"></div>
</body>
<script>
let elem = document.getElementById("div");
elem.style.height="400px";
elem.style.backgroundColor="pink";
</script>
      image.png
      通过name属性获取元素：
      **getElementsByName("name属性的取值")：** 多用在表单的单选和多选按钮中，因为这个只能获取到name属性。
      <body>
<input type="radio" name="LuJun" value="man">
</body>
<script>
let elem = document.getElementsByName("LuJun");
elem[0].checked="checked";
</script>
      image.png 打开就默认选中。