JavaScript getElementById
last modified April 2, 2025
In this article, we explore the document.getElementById method in
JavaScript. This method is essential for DOM manipulation, allowing developers
to access specific elements by their unique ID attribute.
Basic Definition
The document.getElementById method returns the element that has the
ID attribute with the specified value. This is one of the most common and
important methods for working with the DOM in JavaScript.
Element IDs should be unique within a page. If multiple elements share the same
ID, getElementById returns the first element it encounters with that
ID.
Basic getElementById
This example demonstrates how to access a simple div element by its ID.
<!DOCTYPE html>
<html>
<head>
<title>Basic getElementById</title>
</head>
<body>
<div id="content">Hello there!</div>
<script>
const element = document.getElementById('content');
console.log(element.textContent);
</script>
</body>
</html>
In this basic example, we have a div element with the ID "content". The
JavaScript code retrieves this element using getElementById and
logs its text content to the console.
This demonstrates the fundamental usage of getElementById to access
and work with DOM elements. The method returns the element object, which we can
then manipulate in various ways.
Changing Element Content
This example shows how to modify the content of an element using getElementById.
<!DOCTYPE html>
<html>
<head>
<title>Changing Content</title>
</head>
<body>
<h1 id="heading">Original Heading</h1>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
const heading = document.getElementById('heading');
heading.textContent = 'New Heading Text!';
}
</script>
</body>
</html>
Here we have a heading element and a button. When the button is clicked, the
changeText function is called, which uses
getElementById to find the heading and change its text content.
This demonstrates how getElementById can be used in event handlers
to dynamically modify page content. The textContent property is
used to safely set the text, avoiding potential XSS vulnerabilities that might
occur with innerHTML.
Changing Element Style
This example demonstrates how to change the style of an element using getElementById.
<!DOCTYPE html>
<html>
<head>
<title>Changing Style</title>
<style>
#colorBox {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="colorBox"></div>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
const box = document.getElementById('colorBox');
box.style.backgroundColor = 'red';
box.style.borderRadius = '50%';
}
</script>
</body>
</html>
In this example, we have a colored box and a button. When the button is clicked,
the changeColor function uses getElementById to access
the box and modify its style properties.
This shows how getElementById can be used to dynamically change CSS
properties of elements. The style property provides access to all
CSS properties of an element, allowing for rich visual changes.
Form Input Handling
This example demonstrates how to get values from form inputs using getElementById.
<!DOCTYPE html>
<html>
<head>
<title>Form Handling</title>
</head>
<body>
<input type="text" id="username" placeholder="Enter your name">
<button onclick="greetUser()">Greet</button>
<p id="greeting"></p>
<script>
function greetUser() {
const nameInput = document.getElementById('username');
const greetingElement = document.getElementById('greeting');
greetingElement.textContent = `Hello, ${nameInput.value}!`;
}
</script>
</body>
</html>
Here we have a text input field and a button. When the button is clicked, the
greetUser function retrieves the input value using
getElementById and displays a greeting message.
This demonstrates a common use case for getElementById in form
handling. The value property of input elements contains the current
user input, which can be accessed and processed as needed.
Event Listener Registration
This example shows how to register event listeners using getElementById.
<!DOCTYPE html>
<html>
<head>
<title>Event Listeners</title>
</head>
<body>
<button id="myButton">Click Me</button>
<p id="message"></p>
<script>
const button = document.getElementById('myButton');
const message = document.getElementById('message');
button.addEventListener('click', function() {
message.textContent = 'Button was clicked!';
});
</script>
</body>
</html>
In this example, we use getElementById to get references to a
button and a paragraph element. We then register a click event listener on the
button that updates the paragraph text when the button is clicked.
This demonstrates how getElementById is often used to get element
references for event listener registration. The addEventListener
method provides a flexible way to handle user interactions.
Source
MDN getElementById Documentation
In this article, we have shown how to use document.getElementById
in JavaScript. This method is fundamental for DOM manipulation and element
selection in web development.
Author
List all JS DOM tutorials.