Como alterar o valor do atributo de um elemento HTML em JavaScript

As páginas da web são projetadas usando várias linguagens de programação. Duas dessas linguagens de programação da web são HTML e JavaScript. HTML é uma linguagem da web usada para criar a estrutura básica das páginas da web, enquanto isso, o JavaScript é usado para incluir conteúdo dinâmico nas páginas da web, a fim de torná -las cativantes. Ambos têm diferentes características distintivas que os fazem se destacar. Um desses recursos é html dom. Html dom, que é abreviado para o modelo de objeto de documento permite que o JavaScript altere o conteúdo dos elementos HTML.

Com o objetivo de alterar o valor do atributo de um elemento HTML usando JavaScript, o HTML DOM fornece vários métodos. Usando esses métodos, você pode alterar o valor do atributo de um elemento HTML das seguintes maneiras:

1. Usando o método getAttribute ()
2. Usando o método setAttribute ()

Vamos discutir cada um deles em detalhes.

Obtenha atributo

Como o nome sugere o método getAttribute () é extrair o valor atual do atributo. A sintaxe do método getAttribute () é o seguinte.

Sintaxe do método getAttribute ()

elemento.getAttribute (atributeName);

Vamos ver o exemplo para uma mais compreensão.

Exemplo

Suponha que você queira alterar o valor do atributo src do elemento.

O código acima mostra uma imagem da natureza.

Agora queremos mudar esta imagem de cachorro para uma imagem de gato. Usamos o seguinte código.

O exemplo completo da saída é mostrado abaixo.

A imagem da natureza é alterada para a imagem de neve

Definir atributo

Para definir um atributo em um elemento específico, usamos o método setAttribute (). Ele atualiza o valor de um atributo existente em um elemento ou define um novo atributo com um novo nome e valor em um elemento se não existir. A sintaxe deste método é a seguinte.

Sintaxe do método setAttribute ()

elemento.setAttribute (atributeName, attributeValue);

Vamos ver um exemplo para entender melhor o método.

Exemplo:

Primeiro, criamos um botão simples com um rótulo de "Clique aqui".

Clique aqui

Agora temos que selecionar o elemento e faremos isso usando seu id.

var btn = documento.getElementById ("mybtn");

Agora usaremos o método setAttribute () para definir novos atributos.

btn.setattribute ("classe", "click-btn");
btn.setattribute ("habilitar", "");

O código completo junto com a saída é mostrado abaixo.

Clique aqui

Conclusão

Para alterar o valor do atributo de um elemento HTML HTML DOM fornece dois métodos que são GetAttribute () e SetAttribute (). O getAttribute () é usado para extrair o valor atual do atributo enquanto o setAttribute () é usado para alterar o valor do atributo. Neste tutorial, esses dois métodos são discutidos em detalhes, juntamente com exemplos adequados.