Você pode estar familiarizado com o trabalho com atributos em seus projetos HTML e CSS. Mas você sabia que pode adicionar atributos aos seus elementos HTML no seu arquivo JavaScript? Nesta lição, você aprenderá como trabalhar com o método setAttribute() para adicionar atributos aos seus elementos HTML. Aqui está a sintaxe básica:

setAttribute(attribute, value);

Vamos dar uma olhada em alguns exemplos para entender melhor como usar o método setAttribute(). Neste primeiro exemplo, temos um elemento p dentro do HTML:

<p id="para">I am a paragraph</p>

Para adicionar um atributo class primeiro precisamos acessar o elemento p usando o método getElementById(). Depois podemos usar o método setAttribute() para adicionar o atributo class e definir o valor como my-class. Estamos usando outerHTML para registrar todo o elemento HTML incluindo seus atributos.

<p id="para">I am a paragraph</p>
<script src="index.js"></script>

const para = document.getElementById("para");
para.setAttribute("class", "my-class");

console.log(${para.outerHTML});

Se você tiver um atributo existente em um elemento HTML, pode atualizar seu valor usando o método setAttribute(). Neste exemplo temos um elemento div com um atributo class definido como my-class:

<div class="my-class"></div>

Para atualizar o valor do atributo class para example, podemos usar o método setAttribute() novamente:

<div class="my-class"></div>
<script src="index.js"></script>

const divEl = document.querySelector(".my-class");
divEl.setAttribute("class", "example");

console.log(${divEl.outerHTML});

Então, quais são alguns exemplos do mundo real de quando usar o método setAttribute()? Se você estivesse construindo uma galeria de imagens dinâmica, talvez precise atualizar o atributo src de um elemento de imagem quando um usuário clicar em uma miniatura. Outro exemplo seria se você estiver lidando com validação de formulário e precisar adicionar certos atributos como required ou minlength a um elemento input.