javascript - el.classList未定义

单击链接后，我试图在纯JS中将一个类添加到div中(在这种情况下，该链接的ID为#switchlogin)。当我console.log我的元素时，我可以单击该对象，并看到它的classList中当前有两个名称。但是，当我console.log element.classList时，我收到一个“未定义”。我不确定为什么收到未定义的信息，为什么不能添加新的类名。

问题在这里重新创建:https://jsfiddle.net/swf5zc74/

这是我的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>

我的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");
    }
})

最佳答案

signIn是document.getElementsByClassName('sign_in modal')的结果-getElementsByClassName返回一个集合-因此您必须引用所需的索引:

console.log(signIn[0].classList);

演示:https://jsfiddle.net/swf5zc74/1/

关于javascript - el.classList未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33132393/