JS-0305 - JavaScript Completo ES6 - Classes e Atributos

Manipulando classes e atributos de elementos do DOM
Para os exemplos será utilizado o conteúdo do projeto. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.
Todos os elementos do DOM herdam por padrão uma classe base chamada Element, que é uma interface para diferentes classes especializadas.
Uma das propriedades desta classe que é muito utilizada é a classList, que retorna uma coleção DOMTokenList ativa dos atributos de classe (estilo) do elemento, além de permitir a adição, remoção e verificação.
const menu = document.querySelector('.menu');
menu.className; // retorna o nome da classe do elemento
menu.classList; // lista de classes
menu.classList.add('active'); // adiciona uma classe active
menu.classList.add('active', 'mobile'); // adiciona duas classes, activee mobile, podendo ser adcionadas quantas forem necessárias separando por vírgula
menu.classList.remove('active'); //remove a classe active
menu.classList.toggle('active'); // adiciona a classe aso não tenha ou remove a classe caso tenha
menu.classList.contains('active'); // retorna true caso tenha a classe ou falsecaso não tenha
menu.classList.replace('active', 'inactive'); //substitui uma classe por outra
A propriedade attributesretorna uma array-likecom os atributos deste elemento. Ex:
const skills = document.querySelector('.skills');
skills.attributes; // retorna todos os atributos do elemento
skills.attributes[0]; // retorna o atributo de acordo com o índice passado entre colchetes (vetor)
A propriedade attributes permite a utilização de filtros também. No exemplo acima poderia ser utilizado, para acessar o primeiro atributo, skills.attributes.class. Se for utilizada uma variável separada por hífen, deverá ser colocada entre colchetes e aspas e sem o ponto. Ex: skills.attributes['data-text'].
Os métodos getAttribute e setAttribute, respectivamente, retornam e definem atributos do elemento. Ex:
const img = document.querySelector('img');
img.getAttribute('src'); // retorna o valor do src
img.setAttribute('alt', 'Texto Alternativo'); // muda o valor do atributo alt
img.hasAttribute('id'); // retornatrue ou false dependendo da existência do atributo
img.removeAttribute('alt'); // remove o atributo alt
img.hasAttributes(); // retorna true ou false se existir algum atributo
Algumas propriedades não permitem a mudança de seus valores, essas são considerados Read Only, ou seja, apenas leitura. Já as que permitem são chamadas de Writable.
A propriedade className é writable, mas a propriedade attributes é apenas read only. Ex:
const skills = document.querySelector('.skills');
skills.className; // string com o nome das classes
skills.className = 'substituindo'; // substitui a string integralmente
skills.className += ' adicionada'; // adiciona à string observando o espaço antes da palavra como um método de adição em strings padrão
skills.attributes = "class='tentando-substituir'"; // não funciona, read-only
Lembre-se que podemos modificar o valor de uma propriedade utilizando o modelo objeto.propriedade = 'valor'(leia o conteúdo do post JS-0206 para saber mais).