Javascript Obter Elemento por Id

| | | | | | | | | | | | | | | | | | | | | | | | |

Então, você deseja selecionar um elemento em uma página da Web em JavaScript? Essa é a especialidade do método getElementById, o chamado rei dos elementos getters em JavaScript.

getElementById permite selecionar um elemento com base em seu ID. É um nome de método bastante autoexplicativo se você pensar bem.

Neste guia, falaremos sobre o que é getElementById, como funciona e quando você deve usá-lo em seu código. Vamos dar uma olhada em um exemplo de um texto de botão "Mostrar / Ocultar‚" em nossa demonstração document.getElementById.

Vamos mergulhar em Let!

O que é getElementById?

getElementById () é um método de documento que seleciona um elemento HTML DOM em uma página com base no atributo ID do elemento especificado.

Considere o seguinte código:

No nosso código HTML, definimos um elemento Encontre sua partida de Bootcamp

Você pode optar por usar este método se tiver atribuído um ID a um artigo. Em vez de usar um getter maior como querySelector ou getElementByClass, que retorna o primeiro objeto de elemento que corresponde a um critério específico, você pode obter um elemento usando getElementById().

getElementById() é um método comum usado para recuperar um elemento em uma página da web.

O que você deve saber sobre getElementById

Antes de mergulharmos em um exemplo, vamos falar sobre os erros que os iniciantes costumam cometer ao usar esse método.

é sempre frustrante quando você aprenda algo novo e não funcione, então vamos falar sobre quais erros comuns você pode cometer ao aprender a getElementById() .

Primeiro, getElementById() diferencia maiúsculas de minúsculas. Enquanto o termo ID geralmente é maiúsculo na programação, você deve usar o camel case Id ao usar este método. Caso contrário, este método não funcionará

Segundo , o ID você especificar não deve incluir uma hashtag. Considere este código:

Este exemplo pode dar a impressão de que obtém o elemento com o id mainButton, mas não é. Basta especificar o ID do item que você deseja recuperar:

Agora que está fora do caminho, podemos passar para a revisão de um exemplo.

Como usar getElementById

Ao navegar na web, você pode encontrar tags que dizem "Leia mais". solicitado a pressionar este botão para que você possa ver o restante do texto.

Vamos construir esta função usando o getter getElementB yId(). Você pode ver o código final deste tutorial em GitHub .

criação do front-end

Vamos começar criando um front-end simples usando HTML e CSS Crie um novo arquivo chamado index. html e cole o seguinte código:

JavaScript getElementById()

Quer saber mais sobre getElementById()? Você veio ao lugar certo.

Saiba mais

getElementById () é um método JavaScript que permite selecionar um elemento em uma faixa de página. Esse método é comumente chamado de "getter" porque "obtém" um elemento de uma página.