Modificando atributos de elementos HTML com `setAttribute` e `getAttribute`

Como modificar atributos de elementos (setAttribute, getAttribute)?

Manipular os atributos de elementos HTML é uma tarefa comum ao trabalhar com o DOM (Document Object Model) em JavaScript. A modificação de atributos permite que você altere propriedades de elementos de forma dinâmica, como mudar o src de uma imagem, o href de um link ou adicionar e remover classes. As funções setAttribute() e getAttribute() são as ferramentas padrão para realizar essa manipulação.

O que é setAttribute()?

O método setAttribute() é usado para definir o valor de um atributo em um elemento HTML. Você pode usar setAttribute() para alterar ou adicionar novos atributos a um elemento. A sintaxe básica do método é:

elemento.setAttribute(nomeDoAtributo, valorDoAtributo);

Aqui, nomeDoAtributo é o nome do atributo que você deseja modificar (como src, href, id, class), e valorDoAtributo é o novo valor que você deseja atribuir a esse atributo.

Exemplo de código com setAttribute():

let imagem = document.getElementById('minhaImagem');
imagem.setAttribute('src', 'novaImagem.jpg');
console.log(imagem.getAttribute('src'));  // Exibe 'novaImagem.jpg'

Neste exemplo, setAttribute('src', 'novaImagem.jpg') altera o atributo src da imagem com o id="minhaImagem", apontando para uma nova imagem.

Características do setAttribute()

• Adiciona ou altera atributos: Você pode usar setAttribute() para adicionar novos atributos ou alterar os existentes em um elemento.
• Qualquer tipo de atributo: Funciona para qualquer tipo de atributo HTML, como class, id, style, src, etc.
• Valores como strings: O valor atribuído ao atributo sempre será tratado como uma string.

O que é getAttribute()?

O método getAttribute() é utilizado para obter o valor de um atributo de um elemento. Ele retorna o valor do atributo especificado, ou null se o atributo não existir.

Exemplo de código com getAttribute():

let imagem = document.getElementById('minhaImagem');
let srcImagem = imagem.getAttribute('src');
console.log(srcImagem);  // Exibe o valor atual do atributo 'src'

Neste exemplo, getAttribute('src') retorna o valor atual do atributo src da imagem com o id="minhaImagem", permitindo que você verifique qual imagem está sendo exibida.

Características do getAttribute()

• Obtém o valor de um atributo: Esse método é útil quando você precisa saber o valor de um atributo de um elemento.
• Retorna null se o atributo não existir: Se o atributo não estiver presente, getAttribute() retorna null.
• Permite acesso a qualquer atributo: Pode ser usado para obter o valor de qualquer atributo HTML, como href, src, alt, etc.

Comparando setAttribute() e getAttribute()

Quando usar setAttribute() e getAttribute()?

• Use setAttribute() quando você quiser alterar ou adicionar um atributo em um elemento, como alterar o src de uma imagem ou o href de um link.
• Use getAttribute() quando precisar obter o valor atual de um atributo, como verificar o id de um elemento ou o alt de uma imagem.

Exemplo prático de uso de setAttribute() e getAttribute()

Vamos ver um exemplo prático de como usar os dois métodos para alterar e acessar atributos de um elemento.

let link = document.getElementById('meuLink');

// Modificando o atributo 'href'
link.setAttribute('href', 'https://www.exemplo.com');
console.log(link.getAttribute('href'));  // Exibe 'https://www.exemplo.com'

// Verificando o atributo 'target'
let targetLink = link.getAttribute('target');
console.log(targetLink);  // Exibe o valor atual de 'target' (ou 'null' se não existir)

Neste exemplo, setAttribute('href', 'https://www.exemplo.com') altera o atributo href de um link, enquanto getAttribute('href') obtém o valor atual desse atributo.

Conclusão

Alterar e acessar atributos de elementos HTML com setAttribute() e getAttribute() é uma tarefa essencial ao trabalhar com JavaScript no DOM. Essas funções são simples, mas poderosas, permitindo que você modifique dinamicamente o comportamento e o conteúdo da sua página. Ao utilizar essas funções corretamente, você pode criar páginas mais interativas e personalizadas para os usuários.

Como usar setAttribute() e getAttribute() para alterar e acessar atributos HTML

Manipular atributos de elementos HTML é fundamental para o desenvolvimento de páginas web dinâmicas. Usando setAttribute() e getAttribute(), é possível alterar e acessar qualquer atributo de um elemento, como href, src, alt, entre outros. Isso é especialmente útil para modificar links, imagens e outros elementos sem precisar modificar diretamente o HTML. Esses métodos são fáceis de usar e proporcionam flexibilidade ao criar interatividade na sua página.

Algumas aplicações:

• Alterar o href de links ou o src de imagens de forma dinâmica.
• Adicionar ou remover atributos como class, id, e style de elementos.
• Usar setAttribute() para modificar atributos de elementos de formulários, como value ou placeholder.
• Obter valores de atributos para validar ou verificar informações em elementos HTML.

Dicas para quem está começando

• Use getAttribute() para acessar valores de atributos antes de fazer alterações em elementos.
• Evite usar setAttribute() para modificar propriedades específicas, como style, que podem ser melhor manipuladas diretamente.
• Se estiver adicionando novas classes, considere usar a propriedade classList em vez de setAttribute('class', 'novaClasse').
• Pratique alterando atributos dinâmicos como src, href e value para se acostumar com a manipulação de atributos em JavaScript.

Contribuições de

Lucas Souza

Desenvolvedor front-end apaixonado por JavaScript e interfaces intuitivas.

Mais sobre o autor

Compartilhe este tutorial