JavaScriptgetElementById – Acervo Lima Tutorials

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 Elementobjeto 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 documentobjeto, 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 idatributo 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 um idou nullse 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.