此问题已在此处有答案:
What do querySelectorAll and getElementsBy* methods return?(12个回答)
querySelector and querySelectorAll vs getElementsByClassName and getElementById in JavaScript(11个答案)
2天前关闭。
如何让getElementsByClassName
工作?想要替换工作正常的getElementById
,但需要获取类。
Codepen here
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;
}
现在轮到JS了
...Working JSS(fetching ID):
function spinner() {
const spinnerDisplayer = document.querySelector(".spinner-displayer3");
const btn = document.getElementById("something");
btn.addEventListener('click', () => {
spinnerDisplayer.classList.add("loading2");
})
}
spinner();
...Not working JS(fetching class):
function spinner() {
const spinnerDisplayer = document.querySelector(".spinner-displayer3");
const btn = document.getElementsByClassName("something2");
btn.addEventListener('click', () => {
spinnerDisplayer.classList.add("loading2");
})
}
spinner();
2条答案
按热度按时间t2a7ltrp1#
getElementById
返回单个HTML元素,但getElementsByClassName
返回HTML元素的HTMLCollection
(相当于数组,因此元素s的复数形式)。您应该访问getElementsByClassName
返回值中的第一个元素(注意最后的[0]
):4xrmg8kj2#
这是一个常见的错误,但是
getElementsByClassName
返回一个HTMLCollection
(这里只考虑一个数组)。如果你想得到className为something2
的第一个元素,你可以这样做通过className而不是id获取的主要用途是,您可以拥有多个具有相同className的元素。您可以对每个具有特定类名的元素执行一些操作,如下所示