Método getElementById() do Documento HTML DOM

Definição e uso

getElementById() O método retorna o elemento com o valor de id especificado.

Se o elemento não existir:getElementById() O método retornará null.

getElementById() O método é um dos mais usados no HTML DOM. Praticamente sempre que você quiser ler ou editar um elemento HTML, usará isso.

Aviso

Qualquer id deve ser único, mas:

Se houver dois ou mais elementos com o mesmo id: getElementById() Retorna o primeiro.

Veja também:

Método getElementsByTagName()

Método getElementsByClassName()

Método querySelector()

Método querySelectorAll()

Exemplo

Exemplo 1

Obter o elemento com o id especificado:

document.getElementById("demo");

Experimente você mesmo

Exemplo 2

Obter o elemento e alterar sua cor:

const myElement = document.getElementById("demo");
myElement.style.color = "red";

Experimente você mesmo

Exemplo 3

ou apenas alterar sua cor:

document.getElementById("demo").style.color = "red";

Experimente você mesmo

sintaxe

document.getElementById(elementId)

parâmetro

parâmetro descrição
elementId obrigatório. O valor do id do elemento.

retorno

tipo descrição
objeto

elemento com o id especificado.

Se não encontrar, retornará null.

Detalhes técnicos

getElementById() Este método é um método importante e comum, pois fornece uma maneira conveniente de obter o objeto Element que representa o elemento do documento especificado.

Este método recuperará o valor do atributo id elementId Se não encontrar tal elemento Element, ele retornará null. O valor do atributo id é único no documento, se este método encontrar múltiplos nós Element com o id especificado, ele retornará elementId o nó Element, que retornará aleatoriamente um desses nós Element, ou retornará null.

Atenção:O nome deste método começa com Id ao final, não IDnão errou!

No documento HTML, este método sempre recupera o atributo com o id especificado. Use HTMLDocument.getElementByName() Método, que encontra elementos HTML com base no valor de sua propriedade name.

No documento XML, este método usa qualquer atributo do tipo id para encontrar, independentemente do nome do atributo. Se o tipo do atributo XML for desconhecido (como o analisador XML ignorou ou não pôde localizar o DTD do documento), o método sempre retorna nullNo JavaScript do cliente, este método não é frequentemente usado com documentos XML. De fato,getElementById() O método foi originalmente definido como um membro da interface HTMLDocument, mas foi adicionado ao interface Document no DOM nível 2.

Suporte do navegador

document.getElementById() é uma característica do DOM Level 2 (2001).

Todos os navegadores suportam isso:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte

Páginas relacionadas

Tutorial de CSS:Sintaxe do CSS

Manual de referência do CSS:Seletor #id do CSS

Manual de referência do HTML DOM:Propriedade id do HTML DOM

Manual de referência do HTML DOM:Objeto Style HTML DOM