Shefarol Soluções Web

Método getElementById - Voltar

O método getElementById retorna um elemento com um valor especificado e retorna null se o elemento não existir

É um dos métodos mais comuns no HTML DOM. Ele é usado quase sempre que você deseja ler ou editar um elemento HTML.

Neste exemplo ao clicar no botão abaixo, as classes das DIVs serão alteradas.

Caixa 1
Caixa 2

 

Exemplo do HTML
<div id="caixa1">Caixa 1</div>
<div id="caixa2">Caixa 2</div>
<br> 
<button type="button" onclick="chamaDOM();">
	Chama DOM
</button>

 

Exemplo do CSS
#caixa1{
	background-color: aliceblue;
	width: 50%;
	margin-bottom: 20px;
	padding: 5px;
}
#caixa2{
	background-color: bisque;
	padding: 50px;
}

 

Exemplo do Javascript
function chamaDOM(){
	// Obtendo as DIVs
	var boxVerde = document.getElementById('caixa1');
	var boxAzul = document.getElementById('caixa2');

	boxVerde.style.backgroundColor = 'green';
	boxVerde.style.padding = '30px';
	boxVerde.style.color = '#FFF';
	boxVerde.style.width = '300px';
	boxVerde.style.marginBottom = '100px';

	boxAzul.style.backgroundColor = 'blue';
	boxAzul.style.color = '#FFF';
	boxAzul.style.width = '300px';
	boxAzul.style.position = 'relative';
	boxAzul.style.left = '20px';
	boxAzul.innerHTML = 'Obrigado por usar o DOM';
}