Javascript Obter Elemento por Id
exp |
find |
JavaScript |
open |
sin
Michael Zippo
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.
