JavaScript GetElementById

Para acessar o elemento DOM (Modelo de Objeto do Documento é um API de programação), você pode aplicar várias técnicas. Um dos métodos mais úteis e populares é utilizar o método JavaScript GetElementById (). Todos os navegadores suportam JavaScript GetElementById (), incluindo Firefox, Internet Explorer, Chrome e assim por diante.

Este artigo discutirá o método getElementById () em JavaScript.

O que é getElementById () em JavaScript?

Buscar um objeto de um elemento HTML com a ajuda de seu “eu ia", use o "documento.getElementById ()”Método.É a técnica mais rápida e eficiente para acessar um elemento DOM. É usado principalmente para manipular ou obter informações de um elemento em seu documento.

Observação: O ID de um elemento deve ser único em um documento HTML. Se houver muitos elementos com o mesmo ID no documento HTML, o método fornece o primeiro elemento que ele detecta. Ele produz nulo se não puder localizar um elemento no DOM com o ID especificado.

Como usar getElementById () em javascript?

Siga a sintaxe abaixo para usar o método getElementById ():

documento.getElementById (id);

Aceita um “eu ia”Do elemento em que você precisa realizar alguma operação. Este ID adicionado deve ser único em um documento e sensível ao caso.

Exemplo 1: Altere a cor do texto

Neste exemplo, clicar em um botão fará com que a cor do cabeçalho mude. Para fazer isso, criaremos o título usando

Tag and Set “Bem-vindo”Como seu ID que ajudará a obter este elemento:

Bem -vindo ao Linuxhint

Em seguida, crie um botão onde o evento onclick () está anexado, que invocará a função definida pelo usuário JavaScript chamada “mudar cor()”, Acione quando o botão for clicado:

Clique aqui

No arquivo JavaScript, defina uma função chamada “mudar cor()”Isso primeiro obterá o título adicionado usando o“getElementById ()”Método e depois chama o atributo de estilo para definir a cor é igual a“magenta”:

função chanGecolor ()
documento.getElementById ("Welcome").estilo.color = "magenta";

Pode ser visto na saída quando o botão é clicado, a cor do cabeçalho adicional é alterada:

Exemplo 2: Alterar texto

Aqui, mudaremos o texto inteiro do cabeçalho no botão Clique. Primeiro, vamos criar um título usando

tag Definindo ID como “chngtxt”:

Bem -vindo ao Linuxhint

Em seguida, anexe um evento onclick () com o botão que chamará o “ChanGeText ()”Função para alterar o texto adicionado:

Clique aqui

Defina a "ChanGeText ()”Funciona de tal maneira que ele buscará o cabeçalho usando o documento.getElementById () Método e altere seu texto quando o botão é clicado:

function chanGeText ()
var demo = documento.getElementById ("chngtxt").INNERHTML = "O melhor site para habilidades de aprendizado";

Como você pode ver na saída, quando clicarmos no botão, o texto é alterado:

Cobrimos todos os detalhes sobre o método getElementById () em JavaScript.

Conclusão

O getElementById () é o método JavaScript usado para buscar o elemento html dom. É a técnica mais eficiente para acessar um elemento DOM. Ele procura o elemento com a ajuda do ID atribuído a ele. Se o ID especificado não estiver localizado no DOM, ele retornará nulo. Este manual discutiu o método javascript getElementById () com exemplos detalhados.