{"id":114732,"date":"2023-08-01T13:20:27","date_gmt":"2023-08-01T16:20:27","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/javascript-getelementbyid-acessando-elementos-do-dom-pelo-id-em-javascript\/"},"modified":"2023-08-01T13:20:27","modified_gmt":"2023-08-01T16:20:27","slug":"javascript-getelementbyid-acessando-elementos-do-dom-pelo-id-em-javascript","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/javascript-getelementbyid-acessando-elementos-do-dom-pelo-id-em-javascript\/","title":{"rendered":"JavaScript GetElementById: Acessando elementos do DOM pelo ID em JavaScript"},"content":{"rendered":"

<\/p>\n

Como acessar elementos do DOM pelo ID em JavaScript<\/h1>\n

O que \u00e9 o DOM?<\/h2>\n

Quando estamos escrevendo c\u00f3digo em JavaScript, uma das tarefas mais comuns \u00e9 acessar elementos espec\u00edficos do DOM (Documento Objeto Modelo). O DOM \u00e9 a representa\u00e7\u00e3o em mem\u00f3ria de uma p\u00e1gina HTML e nos permite manipular e interagir com seus elementos.<\/p>\n

Acessando elementos do DOM pelo ID<\/h2>\n

Para acessar elementos do DOM pelo ID em JavaScript, podemos usar o m\u00e9todo getElementById(). Esse m\u00e9todo retorna uma refer\u00eancia ao elemento que possui o ID especificado. \u00c9 uma maneira eficiente e conveniente de selecionar elementos espec\u00edficos na p\u00e1gina.<\/p>\n

Sintaxe b\u00e1sica do getElementById()<\/h3>\n
var elemento = document.getElementById('id-do-elemento');<\/code><\/pre>\n
Podemos ver que utilizamos a vari\u00e1vel elemento<\/code> para armazenar a refer\u00eancia ao elemento desejado. O par\u00e2metro passado para o m\u00e9todo getElementById()<\/code> \u00e9 o ID do elemento que queremos acessar. \u00c9 importante ressaltar que o ID deve ser \u00fanico na p\u00e1gina, pois o m\u00e9todo retornar\u00e1 o primeiro elemento que encontrar com o ID correspondente.<\/p>\n
Al\u00e9m disso, vale destacar que o getElementById()<\/code> \u00e9 case-sensitive, ou seja, diferencia letras mai\u00fasculas de min\u00fasculas. Portanto, \u00e9 importante garantir que o ID informado corresponda exatamente ao ID definido no elemento HTML.<\/p>\n
Documenta\u00e7\u00e3o do m\u00e9todo getElementById()<\/h3>\n
O m\u00e9todo getElementById()<\/code> faz parte do objeto document<\/code>, que representa o documento HTML atual. \u00c9 um m\u00e9todo amplamente suportado pelos navegadores e faz parte do padr\u00e3o JavaScript.<\/p>\n
Ao utilizar o getElementById()<\/code>, \u00e9 importante ter em mente que ele retorna null<\/code> caso nenhum elemento com o ID especificado seja encontrado. Portanto, \u00e9 sempre uma boa pr\u00e1tica verificar se o elemento foi encontrado antes de realizar qualquer opera\u00e7\u00e3o sobre ele.<\/p>\n
Uma forma comum de verificar se o elemento foi encontrado \u00e9 utilizando uma condicional, como no exemplo abaixo:<\/p>\n
var elemento = document.getElementById('id-do-elemento');\nif (elemento !== null) {\n  \/\/ Realizar opera\u00e7\u00f5es com o elemento encontrado\n}<\/code><\/pre>\n
Outro detalhe importante \u00e9 que o m\u00e9todo getElementById()<\/code> busca os elementos pelo seu atributo ID, sem considerar outros atributos, como classes, nome ou tag do elemento. Portanto, \u00e9 fundamental atribuir IDs \u00fanicos e significativos aos elementos que ser\u00e3o acessados via JavaScript.<\/p>\n
Exemplos de uso do m\u00e9todo getElementById()<\/h2>\n
Vamos agora ver alguns exemplos pr\u00e1ticos de como utilizar o m\u00e9todo getElementById()<\/code> para acessar elementos do DOM pelo ID em JavaScript.<\/p>\n
Exemplo 1: Alterando o conte\u00fado de um elemento<\/h3>\n
Suponha que temos um par\u00e1grafo com o ID “mensagem” e queremos alterar o seu conte\u00fado utilizando JavaScript. Podemos fazer da seguinte forma:<\/p>\n
var mensagemElemento = document.getElementById('mensagem');\nmensagemElemento.innerHTML = 'Novo conte\u00fado do par\u00e1grafo';<\/code><\/pre>\n
Neste exemplo, utilizamos o getElementById()<\/code> para obter a refer\u00eancia ao par\u00e1grafo com o ID “mensagem”. Em seguida, utilizamos a propriedade innerHTML<\/code> para alterar o conte\u00fado do par\u00e1grafo.<\/p>\n
Exemplo 2: Estilizando um elemento<\/h3>\n
Digamos que tenhamos um bot\u00e3o com o ID “botao” e queremos mudar sua cor de fundo atrav\u00e9s de JavaScript. Podemos fazer assim:<\/p>\n
var botaoElemento = document.getElementById('botao');\nbotaoElemento.style.backgroundColor = 'red';<\/code><\/pre>\n
Neste caso, utilizamos o getElementById()<\/code> para obter a refer\u00eancia ao bot\u00e3o com o ID “botao”. Em seguida, utilizamos a propriedade style<\/code> para modificar o estilo do bot\u00e3o, definindo a cor de fundo como vermelha.<\/p>\n
Dicas e melhores pr\u00e1ticas para utilizar o getElementById() em JavaScript<\/h2>\n
Agora que j\u00e1 vimos como utilizar o m\u00e9todo getElementById()<\/code> para acessar elementos do DOM pelo ID em JavaScript, vamos finalizar com algumas dicas e melhores pr\u00e1ticas para seu uso:<\/p>\n