Manipulando classes e atributos

Manipular nomes de classes sem jQuery costumava ser muito inconveniente. Não mais, graças à propriedade classList. E se você precisa para manipular atributos, você tem setAttribute.

var botao = document.querySelectorAll("button"),
    div = document.querySelector("#exemplo");

botao[0].addEventListener("click", function (e) {

    // Resgata o ID da div de forma fácil
    console.log(div.id);
    div.innerHTML = "ID: " + div.id;
});


// O Elemento.classList guarda todas as classes do elemento.

var classes = div.classList;

botao[1].addEventListener("click", function () {

    console.log(classes);
    div.innerHTML = "Classes: " + classes;

});

botao[2].addEventListener("click", function () {

    // Se for suportado, adicionará a classe vermelho.
    classes.add("vermelho");

});

botao[3].addEventListener("click", function () {

    // You can also toggle a class on and off
    classes.toggle("esconder");

});