1.通过id获取

getElementById() 方法返回带有指定 ID 的元素

  <div id="time"></div>
  <script>
    let time = document.getElementById('time');
  </script>

2.通过标签名获取

getElementsByTagName()返回带有指定标签名的所有元素的集合。

  <p></p>
  <script>
    let p = document.getElementsByTagName('p');
  </script>

3.通过类名获取

getElementsByClassName() 方法返回带有相同类名的所有 HTML 元素的集合

  <div class="box"></div>
  <script>
    let box = document.getElementsByClassName('box');
    console.log(box);
  </script>

4.通过querySelector()方法获取

querySelector()方法用于返回指定选择器的第一个元素对象

    //1.通过标签名
    let res =document.querySelector('div');
    console.log(res); 
    //2.通过类名
    console.log(document.querySelector('.one')); 
    //3. id选择器
    console.log(document.querySelector('#box')); 
    //4.后代选择器
    let res1 = document.querySelector('ul li');
    console.log(res1); 
    //5.伪类选择器
    console.log(document.querySelector('ul li:nth-child(3)') );
    //6.属性选择器
    document.querySelector('input[name="username"]');

5.通过querySelector()方法获取

querySelecorAlI()方法用于返回指定选择器的所有元素对象集合
（选择器同样指的是css所有选择器，这里就不一一举例了）

console.log(document.querySelectorAll('li'));