GetElementById

getElementById é um método JavaScript frequentemente usado para acessar um elemento HTML específico com base no valor do atributo id. Este método está disponível no objeto document, que representa o documento HTML atual carregado no navegador. Aqui está a sintaxe básica:

var elemento = document.getElementById("idDoElemento");
  • "idDoElemento" é o valor do atributo id do elemento HTML que você deseja acessar.

Após usar getElementById, você pode manipular o elemento recuperado, alterando seu conteúdo, estilo ou qualquer outra propriedade que desejar. Aqui está um exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo getElementById</title>
</head>
<body>
    <h1 id="meuTitulo">Título Original</h1>

    <script>
        // Acessando o elemento pelo seu ID
        var titulo = document.getElementById("meuTitulo");

        // Alterando o conteúdo do elemento
        titulo.innerHTML = "Novo Título";
        
        // Alterando o estilo do elemento
        titulo.style.color = "red";
        titulo.style.fontSize = "24px";
    </script>
</body>
</html>

Neste exemplo, o JavaScript acessa um elemento de título <h1> pelo seu ID ("meuTitulo"), altera seu conteúdo para "Novo Título", e muda sua cor para vermelho e tamanho de fonte para 24 pixels.

Por favor, note que o método getElementById só retorna o primeiro elemento com o ID correspondente, mesmo que haja vários elementos com o mesmo ID na página. É uma boa prática garantir que os IDs sejam únicos em um documento HTML para evitar comportamentos inesperados ao usar getElementById.