Gerenciando Atributos de Elementos do DOM em JavaScript

JavaScript nos fornece vários métodos fornecidos para gerenciar os atributos de elementos HTML:

getAttribute(attr): retorna o valor do atributo attr.
createAttribute(attr): cria um novo atributo attr.
setAttribute(attr, value): define o valor value para o atributo attr. Se o atributo não existir, ele é adicionado.
removeAttribute(attr): remove o atributo attr e seu valor.

Obtendo um Atributo

Para obter um atributo de um elemento, chamamos o método getAttribute(), passando o nome do atributo. Por exemplo, considere o seguinte elemento que representa um link na página:

<a id="home" class="link" href="index.html">Home</a>

Podemos obter os atributos deste elemento assim:

// Obtendo o elemento
const element = document.getElementById("home");
// Obtendo os atributos do elemento
console.log(element.getAttribute("id")); // home
console.log(element.getAttribute("class")); // link
console.log(element.getAttribute("href")); // index.html

Vale notar que os atributos também estão acessíveis diretamente como propriedades do elemento, que são nomeadas de forma semelhante aos atributos (com raras exceções):

// Obtendo o elemento
const element = document.getElementById("home");
// Acessando as propriedades do elemento
console.log(element.id); // home
console.log(element.className); // link
console.log(element.href); //  file:///C:/app/index.html

Uma exceção importante é o atributo class, que é acessado através da propriedade className.

Além disso, as propriedades podem retornar valores ligeiramente diferentes. Por exemplo, a propriedade href retorna o URL completo, enquanto o método getAttribute("href") retorna apenas o valor diretamente atribuído.

O mesmo se aplica ao atributo style:

<a id="home" style="color:red;" href="index.html">Home</a>
<script>
  // Obtendo o elemento
  const element = document.getElementById("home");
  // Obtendo os atributos do elemento
  console.log(element.style); // CSSStyleDeclaration
  console.log(element.getAttribute("style")); // color:red;
</script>

O método getAttribute("style") retorna o estilo como texto, enquanto a propriedade style retorna um objeto CSSStyleDeclaration, que permite acessar aspectos individuais do estilo.

Definindo Atributos

Para definir o valor de um atributo, usamos o método setAttribute(attr, value), onde o primeiro parâmetro é o atributo a ser definido e o segundo é seu valor:

<a id="home" href="index.html">Home</a>
<script>
  // Obtendo o elemento
  const element = document.getElementById("home");
  // Definindo o atributo href
  element.setAttribute("href", "https://www.programicio.com");
  // Definindo o atributo style
  element.setAttribute("style", "color:navy;");
</script>

Aqui, modificamos o atributo href e definimos o atributo style. Como o atributo style não estava presente inicialmente, ele será adicionado.

Removendo um Atributo

Para remover um atributo, usamos o método removeAttribute(), passando o atributo a ser removido:

<a id="home" href="https://www.programicio.com" style="color:navy;">Home</a>
<script>
// Obtendo o elemento
const element = document.getElementById("home");
// Removendo o atributo style
element.removeAttribute("style");
</script>