ZetCode

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.

index.html
<!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.

index.html
<!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.

index.html
<!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.

index.html
<!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.

index.html
<!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

My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.

List all JS DOM tutorials.