1.querySelector指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。对于多个选择器，使用逗号隔开，返回一个匹配的元素。

注意：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

但是有区别：

例如：ID选择

getElementById:    var btn =document.getElementById("btn");

 querySelector:    var btn =document.querySelector("#btn");

  类选择                                 

 var btn =document.querySelector(".btn");

  var btn =document. getElementsByClassName（“btn”）;

2.classList 属性返回元素的类名，作为 DOMTokenList 对象

classList.length :  class的长度

add()  :  添加class方法

remove()  :  删除class方法

toggle() :  切换class方法

下面通过刚学的做了个小练习-下拉列表

html5部分

css部分

js部分