Diferentes tags que você usa para criar uma página da web também podem ter diferentes atributos anexados a elas. Esses atributos alterarão a aparência ou o comportamento dos elementos ou fornecerão metadados adicionais. Alguns exemplos de atributos incluem id, class, contenteditable, minlength, maxlengthe pattern.

Neste tutorial, aprenderemos como manipular diferentes atributos de qualquer elemento em uma página da web.

Obtendo valores de atributos de elementos

Podemos chamar o getAttribute() método em nosso elemento e passe o nome de nosso atributo para recuperar seu valor. O valor de retorno desse método é uma string que representa o valor do atributo.

você vai voltar null quando o atributo cujo valor você está recuperando não existe de fato.

Vamos tentar obter os valores de atributo para a lista ordenada na seguinte marcação:

1

Most Populated Countries

2

3

 type="I" start="10" reversed="true">

4

  
Mexico

5

  
Russia

6

  
Bangladesh

7

  
Nigeria

8

  
Brazil

9

Aqui está o JavaScript que obtém o valor de todos os três atributos:

1

let pop_countries = document.querySelector("ol");

2

3

// Output: 10

4

console.log(pop_countries.getAttribute("start"));

5

6

// Output: true

7

console.log(pop_countries.getAttribute("reversed"));

8

9

// Output: I

10

console.log(pop_countries.getAttribute("type"));

Definir valores de atributo para elementos

Como mencionei anteriormente, os atributos são usados ​​para alterar o comportamento de um elemento ou fornecer metadados adicionais. Pode ser necessário atualizar o valor de um atributo existente para outra coisa ou adicionar um novo atributo a um elemento.

Você pode usar o setAttribute() método em ambos os casos. Ele aceita dois parâmetros – o nome do atributo e o valor do atributo. O nome do atributo deve ser uma string e será convertido para letras minúsculas. O valor do atributo também é uma string e qualquer valor que não seja string será automaticamente convertido em uma string.

Considere a seguinte marcação:

1

 type="I" start="10" reversed="true">

2

  
Brazil

3

  
Nigeria

4

  
Bangladesh

5

  
Russia

6

  
Mexico

7

O JavaScript a seguir atualizará o valor de type, start e reversed atributos em nossa lista:

1

let pop_countries = document.querySelector("ol");

2

3

pop_countries.setAttribute("type", "i");

4

pop_countries.setAttribute("start", "6");

5

pop_countries.setAttribute("reversed", "false");

Isso resulta na seguinte marcação:

1

 type="i" start="6" reversed="false">

2

  
Brazil

3

  
Nigeria

4

  
Bangladesh

5

  
Russia

6

  
Mexico

7

A imagem a seguir mostra como a lista de pedidos foi renderizada originalmente e após as atualizações nos valores de atributo.

Como você pode ver, a ordem de contagem ainda é invertida, embora tenhamos definido o valor de reversed para false. A razão pela qual isso acontece é porque reversed é um atributo booleano e configurá-lo para qualquer valor fará com que seu valor seja considerado verdadeiro.

É recomendado que você defina o valor de tais atributos como uma string vazia ou nomes de atributos se desejar que sejam verdadeiros. A única maneira de evitar que a reversão aconteça é remover o atributo inteiramente usando o removeAttribute() método.

1

pop_countries.removeAttribute("reversed");

Adicionar, remover, substituir ou alternar classes de elementos

Você provavelmente já conhece o class atributo que podemos usar com diferentes elementos HTML para fornecer uma lista de classes separadas por espaço. As classes desempenham um papel importante na seleção de elementos para aplicar algum estilo ou script.

Adicionar, remover, substituir e alternar as classes de um elemento é, na verdade, uma tarefa muito comum no desenvolvimento web. Um elemento pode precisar estar no estado ativo ou inativo, que você pode mostrar pelo uso de diferentes classes.

Embora possamos usar o getAttribute() e setAttribute() métodos para fazer todas essas operações nas classes de um elemento, é muito mais conveniente usar apenas o método somente leitura classList propriedade junto com sua add(), remove(), replace() e toggle() métodos auxiliares.

O add() Método

O classList propriedade devolve um DOMTokenList de classes anexadas ao elemento consultado. Você pode usar o add() para adicionar novos tokens ou nomes de classe à lista. É possível passar vários nomes de classe para este método e qualquer token existente não será adicionado duas vezes, mas simplesmente omitido.

Aqui estão alguns exemplos de uso desse método:

1

let message = document.querySelector(".message");

2

3

// Add a single class

4

message.classList.add("notification");

5

6

// Add multiple classes

7

message.classList.add("alert", "message");

O remove() Método

Você pode usar o remove() método se desejar remover uma ou mais classes de um elemento. Nenhum erro será lançado se a classe que você deseja remover de um elemento já estiver ausente da lista de classes do elemento.

Aqui estão alguns exemplos de uso desse método:

1

let message = document.querySelector(".message");

2

3

// Remove a single class

4

message.classList.remove("notification");

5

6

// Remove multiple classes

7

message.classList.remove("alert", "hidden");

O toggle() Método

O toggle() método é útil quando você deseja remover uma classe se ela estiver no DOMTokenList e adicionar uma classe se não estiver no DOMTokenList. Este método pode aceitar um ou dois parâmetros. O primeiro parâmetro é o nome da classe que você deseja alternar. O segundo parâmetro é uma condição que você deseja verificar antes de alternar a classe. Quando o segundo parâmetro retorna false, a classe só pode ser removida e não incluída. Quando o segundo parâmetro retorna truea classe só pode ser adicionada e não removida.

Este método retorna true quando uma classe é adicionada ao DOMTokenList e retorna false quando uma classe é removida do DOMTokenList. Você pode usar o valor de retorno para confirmar se a classe está presente ou ausente após a operação.

1

message.classList.toggle("hidden");

O replace() Método

Algumas vezes, queremos substituir uma classe existente por uma nova e não fazer nada se a classe antiga ainda não estiver anexada ao elemento. O replace() método funciona melhor neste caso. vai voltar false se a substituição falhou e true se a substituição foi bem-sucedida.

Aqui está um código que escuta o evento click em um botão e, em seguida, pega todos os parágrafos com uma classe específica e substitui essa classe por uma nova.

1

done_btn.addEventListener("click", (evt) => {

2

  let planned_tasks = document.querySelectorAll(".will-do");

3

4

  for(task of planned_tasks) {

5

    task.classList.replace("will-do", "done");

6

  }

7

});

O CodePen a seguir mostra todos esses quatro métodos em ação com as classes adicionar, remover, alternar ou substituir com base em cliques de botão.

Pensamentos finais

Neste tutorial, aprendemos sobre métodos nativos de JavaScript para adicionar, atualizar ou remover atributos de diferentes elementos em sua página da web. É muito comum que desenvolvedores manipulem as classes associadas a um elemento. JavaScript permite que você faça isso muito mais facilmente com o classList propriedade e seus métodos auxiliares.