Resumo : neste tutorial, você aprenderá como usar o getAttribute()método JavaScript para obter o valor de um atributo especificado em um elemento.
Introdução ao getAttribute()método JavaScript
Para obter o valor de um atributo em um elemento especificado, você chama o getAttribute()método do elemento:
let value = element.getAttribute(name);
Linguagem de código: JavaScript ( javascript )Parâmetros
O getAttribute()aceita um argumento que é o nome do atributo do qual você deseja retornar o valor.
Valor de retorno
Se o atributo existir no elemento, retornará getAttribute()uma string que representa o valor do atributo. Caso o atributo não exista, o getAttribute()retorno é null.
Observe que você pode usar o hasAttribute()método para verificar se o atributo existe no elemento antes de obter seu valor.
getAttribute()Exemplo de JavaScript
Considere o seguinte exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS getAttribute() Demo</title>
</head>
<body>
<a href="https://tutorials.acervolima.com"
target="_blank"
id="js">JavaScript Tutorial
</a>
<script>
let link = document.querySelector('#js');
if (link) {
let target = link.getAttribute('target');
console.log(target);
}
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )Saída
_blank
Como funciona:
- Primeiro, selecione o elemento link com o id
jsusando oquerySelector()método. - Segundo, obtenha o atributo de destino do link chamando o
getAttribute()elemento do link selecionado. - Terceiro, mostre o valor do destino na janela do console.
O exemplo a seguir usa o getAttribute()método para obter o valor do atributo title do elemento link com o id js:
let link = document.querySelector('#js');
if (link) {
let title = link.getAttribute('title');
console.log(title);
}
Linguagem de código: JavaScript ( javascript )Saída:
null
Linguagem de código: JavaScript ( javascript )Resumo
- Obtenha o valor de um atributo de um elemento especificado chamando o
getAttribute()método no elemento. - O
getAttribute()retorna nulo se o atributo não existir.
