JS学习小记——以类名获取元素注意获取为集合

JS学到WEB API，学习获取元素的方法时，其中有H5新增以类名获取，语法为document.getElementsByClassName(names)

学习的时候并未发现不妥，使用时却发现了难题，在script中我是这么写的：

var x = document.querySelector('i');

var box1 = document.getElementsByClassName('box1');

x.onclick = function () {

box1.style.display = 'none';

}

这是一个简单的关闭小盒子的案例，点击叉号关闭盒子页面，但并未成功运行。

检查了类名等基础没出错后，我将代码改成了同样为新增的document.querySelector()进行尝试，代码运行成功。又想到querySelectorAll() 是指定选择器的集合，而querySelector是默认所指第一个对象，所以运行成功，便想到类名方法应该也需要指定特定的对象，即使只有一个对象在集合中，然后查阅了MDN：

 果然为集合，包含所有元素，在类名括号后加上索引[0],成功运行：

var x = document.querySelector('i');

        var box1 = document.getElementsByClassName('box1')[0];

        x.onclick = function () {

            box1.style.display = 'none';

        }