Atributos e Propriedades

Dominar JavaScript requer entender como ele interage com o Document Object Model (DOM). Este tutorial aborda atributos e propriedades do DOM, explicando como lê-los, modificá-los e sincronizá-los para manipular páginas web dinamicamente.

Introdução ao DOM em JavaScript

O DOM representa uma página web como uma árvore hierárquica de objetos, permitindo que linguagens de programação como JavaScript interajam com o conteúdo, estilo e estrutura da página. Cada elemento no documento HTML é espelhado como um objeto no DOM, e esses objetos possuem propriedades e atributos que podem ser manipulados com JavaScript.

Diferenças Entre Atributos e Propriedades

Embora os termos "atributos" e "propriedades" sejam frequentemente usados de forma intercambiável, eles têm significados distintos no contexto do DOM:

• Atributos: São definidos no código HTML. Fornecem informações adicionais sobre os elementos HTML. Atributos são sempre strings e são acessados por meio de métodos como getAttribute() e setAttribute().
• Propriedades: São as características dos objetos DOM que representam elementos HTML. As propriedades podem ser de qualquer tipo de dado, como boolean, string ou número, e são acessadas diretamente usando a notação de ponto.

Em resumo: um atributo é o que você escreveu no código-fonte HTML; uma propriedade é o que o navegador analisou e expõe no objeto JavaScript. Eles parecem iguais em casos simples como id, mas são duas coisas diferentes.

Nota sobre sincronização: Para a maioria dos atributos padrão (como id, class), alterar o atributo atualiza a propriedade correspondente e vice-versa. Porém, a sincronização não é garantida em todos os casos, e alguns atributos importantes deliberadamente a quebram (veja Quando a sincronização falha abaixo).

Exemplo de Código: Acessando Atributos e Propriedades

<!-- snippet: html-result -->

<div id="demo" class="sample" data-level="1">Hello, World!</div>
<br />
<div>first getAttributes result (data-level): <span id="1"></span></div>
<div>className property: <span id="2"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");

  // Accessing an attribute
  let classAttribute = demoElement.getAttribute("data-level");  // Output: "1"
  span1.innerHTML = classAttribute;
  
  // Accessing a property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  const classNameProperty = demoElement.className;  // Output: "sample"
  span2.innerHTML = classNameProperty;
</script>

Os Métodos de Atributo

Todo elemento expõe quatro métodos padrão para trabalhar com atributos pelo nome. Eles sempre lidam com strings e mapeiam diretamente para o código-fonte HTML:

Os nomes de atributos são insensíveis a maiúsculas e minúsculas (id e ID são iguais), e todo valor é lido como string, mesmo que pareça um número.

Definindo Atributos

Use o método setAttribute() para adicionar um novo atributo ou alterar o valor de um atributo existente em um elemento HTML.

Exemplo de Código: Definindo Atributos

<!-- snippet: html-result -->

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");
  
  // Changing the attribute
  demoElement.setAttribute("class", "changed");
  // The property updates automatically due to attribute-property synchronization
  span1.innerHTML = demoElement.className;
</script>

Este trecho de código altera o atributo class do elemento div para "changed".

Removendo Atributos

Para remover completamente um atributo de um elemento HTML, use o método removeAttribute(). Isso é útil quando você deseja retirar de um elemento um comportamento ou estilo específico definido por um atributo.

Combine-o com hasAttribute() para agir condicionalmente:

if (demoElement.hasAttribute("disabled")) {
  demoElement.removeAttribute("disabled");
}

Reatribuindo Propriedades

As propriedades dos elementos DOM podem ser facilmente reatribuídas diretamente usando a notação de ponto, permitindo uma manipulação mais flexível das características do elemento.

Exemplo de Código: Modificando Propriedades

<!-- snippet: html-result -->

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");

  // Changing the property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  demoElement.className = "changed";
  span1.innerHTML = demoElement.className;
</script>

Este exemplo altera a propriedade className do elemento div, demonstrando como as propriedades podem ser usadas para controlar as características dos elementos dinamicamente.

Quando a Sincronização Entre Atributo e Propriedade Falha

O mapeamento conveniente um-para-um tem exceções que você precisa conhecer, ou passará horas depurando.

A propriedade value dos inputs

O atributo value contém o valor inicial (padrão) do HTML. A propriedade value contém o valor atual que o usuário está digitando. Depois que o usuário edita o campo, os dois divergem: a propriedade muda, o atributo não.

// <input id="name" value="initial">
const input = document.getElementById("name");
// user types "Alice" into the field...

input.getAttribute("value"); // "initial"  — still the HTML default
input.value;                 // "Alice"     — the live, current value

A mesma ideia se aplica a <input type="checkbox">: o atributo checked é o estado padrão, e a propriedade checked indica se ele está marcado agora.

A propriedade href dos links

Para um <a href="/page">, getAttribute("href") retorna exatamente o que você escreveu ("/page"), mas a propriedade href retorna a URL absoluta completamente resolvida ("https://example.com/page").

// <a id="link" href="/page">
const link = document.getElementById("link");
link.getAttribute("href"); // "/page"
link.href;                 // "https://example.com/page"

Regra geral: use os métodos de atributo quando precisar do valor bruto exatamente como foi escrito; use a propriedade quando precisar do valor ao vivo e analisado pelo navegador.

Atributos Boolean

Alguns atributos HTML — disabled, checked, required, readonly, selected — são boolean: a mera presença deles significa true, independentemente do valor. disabled="" e disabled="false" desabilitam o elemento igualmente.

Em JavaScript, a propriedade correspondente é um boolean real, que é a forma mais limpa de alterná-los:

button.disabled = true;   // adds the attribute, disables the button
button.disabled = false;  // removes the attribute, enables it

Evite setAttribute("disabled", false) — porque o atributo está presente, o elemento permanece desabilitado. Defina a propriedade em vez disso.

Atributos de Dados Personalizados

Os desenvolvedores podem definir atributos personalizados com o prefixo data-, que é a forma padrão e preparada para o futuro de anexar informações extras a um elemento sem inventar atributos não-padrão. Eles são lidos e escritos por meio da propriedade dataset em vez de getAttribute.

A nomenclatura converte entre kebab-case no HTML e camelCase em JavaScript: data-author se torna dataset.author, e data-order-status se torna dataset.orderStatus. Você também pode escrever em dataset para criar ou atualizar o atributo data-* subjacente.

Exemplo de Código: Atributos de Dados Personalizados

<!-- snippet: html-result -->

<div id="demo" data-author="Jane Doe" data-year="2022">Information Panel</div>
<br />
<div>author: <span id="1"></span></div>
<div>year: <span id="2"></span></div>
<script>
  const element = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");
  span1.innerHTML = element.dataset.author;
  span2.innerHTML = element.dataset.year;
</script>

Conclusão

Entender os atributos e propriedades do DOM de forma eficaz permite manipular elementos da página dinamicamente e criar aplicações mais ricas e interativas. Lembre-se da distinção central: atributos são os valores string do seu código-fonte HTML, enquanto propriedades são os valores ao vivo e tipados no objeto DOM — e alguns atributos (value, href, os boolean) deliberadamente mantêm os dois separados.

Para avançar, explore estes capítulos relacionados:

• Modificando o documento — criar, inserir e remover elementos.
• Propriedades de nós: tipo, tag e conteúdos — ler e alterar texto e HTML de elementos.
• Trabalhando com estilos no DOM — manipular CSS por meio de style e className.

Prática