Para obter um elemento por id, você usa o getElementById()
método do Document
objeto:
let element = document.getElementById(id);
Linguagem de código: JavaScript ( javascript )
O método retorna um elemento cujo id corresponde a uma string especificada.
O id
faz distinção entre maiúsculas e minúsculas. Se nenhum elemento correspondente for encontrado, o método retornará null
.
Como o id
é suposto ser único, usar o getElementById()
método é uma maneira rápida de selecionar um elemento.
Se o elemento não tiver um ID, você poderá usar querySelector()
para localizar o elemento usando qualquer seletor CSS.
Veja o exemplo a seguir:
<html>
<head>
<title>JavaScript getElementById() example</title>
</head>
<body>
<h1 id="message">JavaScript getElementById() Demo</h1>
<div id="btn">
<button id="btnRed">Red</button>
<button id="btnGreen">Green</button>
<button id="btnBlue">Blue</button>
</div>
<script src="js/app.js"></script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
JavaScript
const changeColor = (newColor) => {
const element = document.getElementById('message');
element.style.color = newColor;
}
let div = document.getElementById('btn');
div.addEventListener('click', (event) => {
let target = event.target;
switch (target.id) {
case 'btnRed':
changeColor('red');
break;
case 'btnGreen':
changeColor('green ');
break;
case 'btnBlue':
changeColor('blue');
break;
}
});
Linguagem de código: JavaScript ( javascript )