document.getElementsByClassName和document.querySelector的区别

document.getElementsByClassName和document.querySelector的区别如下：
1.获取元素的方式不同：document.getElementsByClassName是通过class名字获取一个或多个Dom元素，而document.querySelector是通过CSS选择器获取一个Dom元素。
2.返回结果不同：document.getElementsByClassName返回的是一个类数组对象NodeList，而document.querySelector返回的是一个单一的Dom元素。
3.兼容性不同：document.getElementsByClassName是HTML5新增的DOM API，而document.querySelector是在CSS3中引入的选择器，但是两者都不支持IE8及以下版本。

以下是两个方法的使用示例：

// 使用document.getElementsByClassName获取所有class为box的元素
var boxes = document.getElementsByClassName("box");
for (var i = 0; i < boxes.length; i++) {
  boxes[i].style.backgroundColor = "red";
}

// 使用document.querySelector获取第一个class为box的元素
var box = document.querySelector(".box");
box.style.backgroundColor = "blue";