Resumo : neste tutorial, você aprenderá como usar o JavaScript getElementById()
para selecionar um elemento por um ID especificado.
Introdução ao método JavaScript getElementById()
O document.getElementById()
método retorna um Element
objeto que representa um elemento HTML com um id que corresponde a uma string especificada.
Se o documento não tiver nenhum elemento com o id especificado, o document.getElementById()
retorno será null
.
Como o id de um elemento é exclusivo em um documento HTML, é document.getElementById()
uma maneira rápida de acessar um elemento.
Ao contrário do querySelector()
método, o getElementById()
está disponível apenas no document
objeto, não em outros elementos.
O seguinte mostra a sintaxe do getElementById()
método:
const element = document.getElementById(id);
Linguagem de código: JavaScript ( javascript )
Nesta sintaxe, o id é uma string que representa o id do elemento a ser selecionado. O ID diferencia maiúsculas de minúsculas. Por exemplo, o 'root'
e 'Root'
são totalmente diferentes.
O id
é único em um documento HTML. No entanto, HTML é uma linguagem indulgente. Se o documento HTML tiver vários elementos com o mesmo id, o document.getElementById()
método retornará o primeiro elemento que encontrar.
Exemplo do método JavaScript getElementById()
Suponha que você tenha o seguinte documento HTML:
<html>
<head>
<title>JavaScript getElementById() Method</title>
</head>
<body>
<p id="message">A paragraph</p>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
O documento contém um <p>
elemento que possui o id
atributo com o valor message
:
const p = document.getElementById('message');
console.log(p);
Linguagem de código: JavaScript ( javascript )
Saída:
<p id="message">A paragraph</p>
Linguagem de código: HTML, XML ( xml )
Depois de selecionar um elemento, você pode adicionar estilos ao elemento , manipular seus atributos e passar para elementos pai e filho .
Resumo
- O
document.getElementById()
retorna um elemento DOM especificado por umid
ounull
se nenhum elemento correspondente for encontrado. - Se vários elementos tiverem o mesmo
id
, mesmo que seja inválido,getElementById()
retornará o primeiro elemento que encontrar.