Gerenciando Atributos de Elementos - 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:

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>