El.classList undefined

Question

I am trying to add a class to a div in pure JS after clicking a link (in this case, the link has id #switchlogin). When I console.log my item, I can click through the object and see that it currently has two names in its List class. However, when I console.log element.classList, I get "undefined". I am not sure why I am getting undefined, and why I cannot add a new class name.

The problem is recreated here: https://jsfiddle.net/swf5zc74/

Here is part of my 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:

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

Answer 1

signIn - document.getElementsByClassName('sign_in modal') - getElementsByClassName - :

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

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

Answer 2

document.getElementsByClassName , . document.getElementsByClassName, .

logIn = document.getElementsByClassName('log_in') [0]

?

document.getElementsByClassName('log_in')[0].className += " foo";