JavaScript技术问题：如何使getElementsByClassName替代可用的getElementById生效

想把当前正常运行的getElementById替换成通过类名获取元素，但替换后代码无法运行。

示例代码 #

HTML

<div class="spinner-displayer3"></div>    
<div id="something"  class="something2">Click orange box!</div>

CSS

#something, .something2 {
  margin:150px 0 0 150px;
  background-color:orange;
  width:130px;
}
   
.loading2 {
position:fixed;                      
top:0;
left:0;
z-index:1000001;
width:100%; 
height:100%;
background-image: url("https://tradinglatam.com/wp-content/uploads/2019/04/loading-gif-png-4.gif");
border: 2px solid #ccc;
width: 100%;
height:100%;
background-color: white;
background-color: rgba(255, 255, 255, 0.8); 
background-repeat: no-repeat;
background-position: center;
}

可正常运行的代码（通过ID获取）

function spinner() {
   const spinnerDisplayer = document.querySelector(".spinner-displayer3");
   const btn = document.getElementById("something");

   btn.addEventListener('click', () => {
   spinnerDisplayer.classList.add("loading2");

 })
}     
spinner();                

无法运行的代码（通过类名获取）

function spinner() {
   const spinnerDisplayer = document.querySelector(".spinner-displayer3");
   const btn = document.getElementsByClassName("something2");

   btn.addEventListener('click', () => {
   spinnerDisplayer.classList.add("loading2");
 
 })
}     
spinner();                

问题出在getElementsByClassName的返回值上：它返回的是HTMLCollection（类数组对象），而非单个DOM元素，因此不能直接调用addEventListener方法。

有两种常用解决方式：

方式1：获取类数组中的第一个元素 #

由于页面中只有一个带something2类的元素，直接取索引0的元素即可：

function spinner() {
   const spinnerDisplayer = document.querySelector(".spinner-displayer3");
   // 提取HTMLCollection的第一个元素
   const btn = document.getElementsByClassName("something2")[0];

   btn.addEventListener('click', () => {
   spinnerDisplayer.classList.add("loading2");
 
 })
}     
spinner();                

方式2：使用querySelector替代 #

querySelector可直接通过类选择器获取单个匹配元素，返回结果就是单个DOM元素，无需处理类数组，语法更简洁：

function spinner() {
   const spinnerDisplayer = document.querySelector(".spinner-displayer3");
   // 通过querySelector按类名获取元素
   const btn = document.querySelector(".something2");

   btn.addEventListener('click', () => {
   spinnerDisplayer.classList.add("loading2");
 
 })
}     
spinner();                

内容的提问来源于stack exchange，提问作者Mr_G