Qual é a diferença entre atributos e propriedades nas tags HTML?

Os atributos são pares de nome-valor escritos diretamente na tag HTML de abertura. Eles definem as características iniciais ou atuais do elemento, mas nem sempre refletem diretamente o seu estado atual no DOM.

As propriedades são valores associados a objetos JavaScript que representam elementos DOM. São dinâmicas e refletem o estado atual do elemento.

Aqui estão as diferenças principais:

• Localização: Os atributos estão no HTML, as propriedades nos objetos DOM.
• Tipos de dados: Os atributos são sempre strings. As propriedades podem ter diferentes tipos de dados (strings, números, booleanos, objetos).
• Dinamicidade: Os atributos são estáticos após o carregamento da página (embora possam ser alterados via JavaScript). As propriedades podem mudar dinamicamente em resposta à interação do usuário ou à lógica dos scripts.
• Relação: Muitos atributos têm correspondências diretas com propriedades (por exemplo, o atributo id e a propriedade id). Mas há atributos sem propriedades diretas (data-*) e propriedades sem atributos diretos (textContent, className).

Exemplo:

<input type="text" value="Valor inicial" readonly>

Aqui:

• type="text", value="Valor inicial" e readonly são atributos.

Após o carregamento da página, as propriedades correspondentes em JavaScript serão:

// Obtemos o elemento input
const inputElement = document.querySelector('input');

// Propriedades do elemento
console.log(inputElement.type);     // Mostrará: "text" (a propriedade corresponde ao atributo)
console.log(inputElement.value);    // Mostrará: "Valor inicial" (corresponde inicialmente ao atributo)
console.log(inputElement.readOnly); // Mostrará: true (a propriedade corresponde ao atributo, mas em camelCase)

Se o usuário alterar o texto no campo de entrada, a propriedade value será atualizada, mas o atributo value no HTML permanecerá igual, refletindo apenas o valor inicial.

// O usuário inseriu "Novo valor"
// inputElement.value agora será "Novo valor",
// mas inputElement.getAttribute('value') ainda retornará "Valor inicial".