Tutorials using JS
Find Element by ID
to find an element in the document using id
attribute, use Document.getElementById()
function
Syntax
The syntax of getElementById()
function is
document.getElementById("id_value");
where
document
object is the root node of the HTML documentgetElementById
is the function nameid_value
is the value of the id which is used for searching the document
Examples
1. find element whose id is myPara
in the following document, we have two paragraphs, of which one has an id of 'myPara'
. when user clicks on Click Me
button, we find the element by id 'myPara'
and change its background color
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Tutorial</h1>
<h2>Find Element by ID</h2>
<button id="myBtn">Click Me</button>
<p id="myPara">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
//set onclick listener for #myBtn
document.getElementById("myBtn").addEventListener("click", function() {
//create list-item
const myPara = document.getElementById('myPara');
myPara.style.background = 'yellow';
});
</script>
</body>
</html>