JS-0305 - JavaScript Completo ES6 - Classes e Atributos

JS-0305 - JavaScript Completo ES6 - Classes e Atributos
Publicado em 24/01/2021 13h25
Visualizações: 529

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, active e 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 false caso não tenha
menu.classList.replace('active', 'inactive'); //substitui uma classe por outra

JS-0305 - JavaScript Completo ES6 - Classes e Atributos

A propriedade attributes retorna uma array-like com 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)

JS-0305 - JavaScript Completo ES6 - Classes e Atributos

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'); // retorna true 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

JS-0305 - JavaScript Completo ES6 - Classes e Atributos


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

JS-0305 - JavaScript Completo ES6 - Classes e Atributos

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).

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.