一、通过id获取元素（一次一个元素）

一个id在一个页面是唯一的，所以我们可以使用

document.getElementById("id名")

获取元素，使用变量来接收，直接就能获取到这个元素，通过 id 名去获取元素，一次只能获取一个元素。

  
  
  
  
  


  
LiuQing
  

直接能获取到这个元素。

二、通过标签名元素（一次多个元素）

通过标签名获取：

document.getElementsByTagName("标签名");

例子：

  
  
  
  
  


  
LiuQing
  
Liuqing1
  
Liuqing2
  

通过

 var Liuqing = document.getElementsByTagName('div')

获取所有div标签元素，得到的是一个HTMLCollection数组，元素集合，然后去集合的第0项，也就是id名为box的元素。

三、通过类名元素（一次多个元素）

通过类名获取：

document.getElementsByClassName("类名");

例子：

  
  
  
  
  


  
LiuQing
  
Liuqing1
  
Liuqing2
  

通过

 var Liuqing = document.getElementsByClassName('Liuqing')

获取所有class名称为Liuqing的标签元素，得到的是一个HTMLCollection数组，元素集合，然后去集合的第0项，也就是第一个calss名称为Liuqing的元素。

四、querySelector(获取第一个匹配成功的元素)

用法：

document.querySelector('类名（需要加.）|| id（需要加 #）||标签名')

注意：

获取第一个匹配成功的元素

例子：

  
  
  
  
  


  
LiuQing
  
Liuqing1
  
Liuqing2
  

五、querySelectorAll(获取所有匹配成功的元素)

用法：

document.querySelector('类名（需要加.）|| id（需要加 #）||标签名')

注意：

获取所有匹配成功的元素

例子：

  
  
  
  
  


  

    
      span内容
    
  
  

    
      span内容
    
  
  

document.querySelectorAll中可以写选择样式，css中怎么写，这里就可以怎么写。