Como adicionar atributo ao elemento DOM em JavaScript
O DOM é a estrutura de um documento HTML a partir de seu elemento raiz até o final do documento. Qualquer elemento, como “p","div", ou "mesa“, É referido como o elemento DOM. Os elementos DOM permitem ao usuário modificar o conteúdo da página da web. Um atributo especifica a coleção de objetos. Além disso, o JavaScript fornece métodos setAtTribute () para adicionar ou modificar os atributos dos elementos DOM. Neste post, demonstramos todos os métodos possíveis para adicionar atributos aos elementos DOM em JavaScript.
- Como adicionar atributo ao elemento DOM em JavaScript
- Adicionar atributo ao elemento DOM
- Adicione vários atributos ao elemento DOM
Como adicionar atributo ao elemento DOM em JavaScript?
O método setAttribute () é empregado para adicionar um valor de atributo a um elemento existente. Se o atributo já estiver adicionado, o setAttribute () atualiza o valor. São necessários duas entradas, uma é o nome e o segundo especifica o valor. Ao carregar a página da web, a propriedade de atributo é aplicada aos elementos DOM. A sintaxe do método setAttribute () é fornecida abaixo:
Sintaxe
setattribute (nome, valor)
Os parâmetros são descritos da seguinte forma:
- nome: Refere -se ao nome do atributo.
- valor: Especifica o valor do atributo.
Exemplo 1: Adicione um atributo ao elemento DOM
Um exemplo é considerado pela adição de um atributo ao elemento DOM. O método setAttribute () é utilizado para agregar valor ao atributo. O código de exemplo está escrito abaixo:
Código
Exemplo para adicionar atributo ao elemento DOM.
Clique no botão para desativá -lo
A descrição do código é fornecida abaixo:
- Um botão chamado “Clique no botão"Está anexado e tem um ID único"btn”.
- Depois disso, este botão está associado ao “btn_fn ()”Método.
- Neste método, “getElementById”É utilizado para extrair o“btn" eu ia.
- Finalmente, o "setAttribute ()”O método é empregado para desativar o botão, passando um vazio Ele desativa o botão pressionando -o.
Saída
Observa -se que depois de pressionar o “Clique no botão”, O valor desativado é passado pelo“setAttribute ()”Método.
Exemplo 2: Adicione vários atributos ao elemento DOM
Um exemplo é considerado para adicionar vários atributos ao elemento DOM, utilizando o método setAttribute () no JavaScript. O método setAttribute () extrai os elementos DOM por getElementById. Depois disso, atribua a propriedade através do método setAttribute (). Esses atributos incluem um botão, link e propriedade de estilo. Por exemplo, o código é o seguinte.
Código
Exemplo de adição de um atributo usando o método setAttribute ().
Google.com
A descrição do código é fornecida na seguinte ordem:
- Em primeiro lugar, uma âncora “”A tag é empregada passando o id“link”.
- Neste link, “com”É passado como texto para exibição no navegador.
- Um botão "Adicione o atributo”Está anexado que está associado ao“diversão()”Método. O "func ()”Será acionado pelo botão com o ONCLICK valor.
- O "setAttribute ()”O método é utilizado para buscar“link" usando "getElementById" e um "Href”O atributo é definido cujo valor é“https: // www.Google.coma”.
- Da mesma forma, um “estilo”O atributo é definido cujo valor é “Background-Color: vermelho” Para alterar a cor de fundo do texto.
Saída
Em primeiro lugar, o texto não é clicável. Depois de pressionar o botão “Adicione o atributo”, Um link é adicionado ao texto“Google.com”Que é clicável agora e abre a página da web associada ao link.
Conclusão
O método setAttribute () é empregado para adicionar um atributo aos elementos em JavaScript. O mesmo método atualiza o valor do atributo se o elemento DOM já contiver o atributo. Este post demonstrou os métodos para adicionar atributos aos elementos DOM em JavaScript. O método setAttribtue () leva um nome e um valor como argumentos. Além disso, os usuários podem definir vários atributos para os elementos DOM, utilizando JavaScript. Este artigo demonstra dois exemplos adicionando, bem como modificando o valor do atributo do elemento DOM em JavaScript.