Javascript el.classList 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33132393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
el.classList is undefined
提问by Angelina Bethoney
I'm trying to add a class to a div in pure JS once a link is clicked (In this case, the link has id #switchlogin). When I console.log my element, I am able to click through the object and see that it currently has two names in its classList. However, when I console.log element.classList, I receive an "undefined". I am unsure why I'm receiving undefined, and why I cannot add my new class name.
单击链接后，我试图在纯 JS 中向 div 添加一个类（在这种情况下，链接具有 id #switchlogin）。当我 console.log 我的元素时，我能够点击对象并看到它的 classList 中当前有两个名称。但是，当我 console.log element.classList 时，我收到一个“未定义”。我不确定为什么我会收到 undefined，以及为什么我不能添加我的新类名。
The issue is recreated here: https://jsfiddle.net/swf5zc74/
这个问题在这里重新创建：https: //jsfiddle.net/swf5zc74/
Here is a portion of my HTML:
这是我的 HTML 的一部分：
<div class="sign_in modal">
<h1>Get Started!</h1>
<form action="" method="get">
<input type="text" name="fname" placeholder="Name" required>
<input type="text" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<input type="submit" value="Submit" class="submit">
</form>
<h3><a href="#" id="switchLogin">Been Here Before?</a></h3>
</div>
My JS:
我的JS：
var body = document.getElementsByTagName('body'),
signIn = document.getElementsByClassName('sign_in modal'),
logIn = document.getElementsByClassName('log_in'),
switchLogIn = document.getElementById('switchLogin'),
switchSignIn = document.getElementById('switchSignin'),
link = document.querySelector('a');
link.addEventListener("click", function(e){
if ((e.target || e.srcElement).id == 'switchLogin'){
console.log(signIn);
console.log(signIn.classList);
signIn.classList += ' slideOut';
}else{
console.log("nope");
}
})
回答by tymeJV
signInis the result of document.getElementsByClassName('sign_in modal')- getElementsByClassNamereturns a collection - so you have to reference the index you want:
signIn是document.getElementsByClassName('sign_in modal')-getElementsByClassName返回一个集合的结果- 所以你必须引用你想要的索引：
console.log(signIn[0].classList);
回答by Jake
document.getElementsByClassName returns an "array-like" collection of elements, even if there is only one element with that class name. To access elements with document.getElementsByClassName, you can use array syntax.
document.getElementsByClassName 返回一个“类似数组”的元素集合，即使只有一个元素具有该类名。要使用 document.getElementsByClassName 访问元素，您可以使用数组语法。
for exampe logIn = document.getElementsByClassName('log_in')[0]
例如 logIn = document.getElementsByClassName('log_in')[0]
want to add a class to that element?
想为该元素添加一个类？
document.getElementsByClassName('log_in')[0].className += " foo";
document.getElementsByClassName('log_in')[0].className += " foo";
