Select an element that matches the id using the getElementById() method.
To get an element by id, you use the getElementById() method of the Document object:
let element = document.getElementById(id);The method returns an element whose id matches a specified string.
The id is case-sensitive. If no matching element was found, the method returns null.
Since the id is supposed to be unique, using the getElementById() method is a fast way to select an element.
If the element does not have an ID, you can use the querySelector() to find the element using any CSS selector.
See the following example:
<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>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;
}
});