JavaScript document.getElementById

Complete guide to JavaScript's document.getElementById method covering usage, best practices, and practical examples

dom

Aug 29, 2025

JavaScript document.getElementById

last modified April 2, 2025

The document.getElementById method is one of the fundamental DOM manipulation methods in JavaScript. It allows you to select and manipulate HTML elements by their unique ID attribute. This guide covers everything from basic usage to advanced techniques, performance considerations, and best practices. Understanding this method is essential for interactive web development.

Basic Usage

The getElementById method returns the element that has the specified ID attribute. IDs must be unique in a document. This example demonstrates basic selection and manipulation of elements by ID.

basic_usage.html <!DOCTYPE html> <html> <body> <div id=“header”>Welcome to my site</div> <button id=“changeButton”>Change Header</button>

// 2. Modifying element content header.textContent = “New Welcome Message”;

// 3. Changing styles header.style.color = “blue”; header.style.fontSize = “24px”;

// 4. Event handling document.getElementById(‘changeButton’).addEventListener(‘click’, function() { header.textContent = “Header Changed!”; header.style.backgroundColor = “yellow”; }); </script> </body> </html>

Example 1 shows basic element selection. Example 2 modifies the text content. Example 3 demonstrates style changes. Example 4 adds an event listener to a button that modifies the header when clicked. The method returns null if no element with the specified ID exists.

When to Use getElementById

getElementById is ideal when you need to work with a specific, unique element in the DOM. These examples compare it with other selection methods and demonstrate appropriate use cases.

when_to_use.html <!DOCTYPE html> <html> <body> <div id=“userProfile”>User: John Doe</div> <div class=“item”>Item 1</div> <div class=“item”>Item 2</div>

// 6. When NOT to use getElementById (selecting multiple elements) const items = document.getElementsByClassName(‘item’); // Better than querySelectorAll here items[0].style.color = “red”;

// 7. Checking for element existence const nonExistent = document.getElementById(‘doesNotExist’); if (nonExistent) { console.log(“Element exists”); } else { console.log(“Element not found”); // This will execute }

// 8. Performance comparison console.time(‘getElementById’); for (let i = 0; i < 1000; i++) { document.getElementById(‘userProfile’); } console.timeEnd(‘getElementById’);

console.time(‘querySelector’); for (let i = 0; i < 1000; i++) { document.querySelector(’#userProfile’); } console.timeEnd(‘querySelector’); </script> </body> </html>

Example 5 shows equivalent selection with querySelector. Example 6 demonstrates when to use other methods for multiple elements. Example 7 checks for element existence. Example 8 shows getElementById is generally faster than querySelector for ID selection.

Working with Form Elements

getElementById is particularly useful for working with form elements. These examples demonstrate common form manipulation techniques.

form_elements.html <!DOCTYPE html> <html> <body> <form id=“userForm”> <input type=“text” id=“username” placeholder=“Username”> <input type=“password” id=“password” placeholder=“Password”> <button type=“submit”>Submit</button> </form> <div id=“output”></div>

// 10. Validating input
if (username.length &lt; 3) {
    document.getElementById('output').textContent = "Username too short";
    return;
}

// 11. Form reset
this.reset();
document.getElementById('output').textContent = `Welcome ${username}!`;

});

// 12. Programmatic focus document.getElementById(‘username’).focus();

// 13. Disabling elements document.getElementById(‘password’).disabled = true; setTimeout(() => { document.getElementById(‘password’).disabled = false; }, 2000); </script> </body> </html>

Example 9 shows getting form values. Example 10 demonstrates validation. Example 11 resets the form. Example 12 sets focus programmatically. Example 13 temporarily disables an input field.

Dynamic Content Manipulation

These examples show how to use getElementById to dynamically modify page content in response to user actions or other events.

dynamic_content.html <!DOCTYPE html> <html> <body> <div id=“content”>Initial Content</div> <button id=“addButton”>Add Item</button> <ul id=“itemList”></ul>

document.getElementById(‘addButton’).addEventListener(‘click’, function() { const li = document.createElement(’li’); li.textContent = Item ${counter++}; itemList.appendChild(li); });

// 15. Toggling visibility document.getElementById(‘content’).addEventListener(‘click’, function() { this.style.display = this.style.display === ’none’ ? ‘block’ : ’none’; });

// 16. Modifying attributes const image = document.createElement(‘img’); image.id = ‘dynamicImage’; image.src = ‘placeholder.jpg’; image.alt = ‘Dynamic image’; document.body.appendChild(image);

setTimeout(() => { document.getElementById(‘dynamicImage’).src = ‘real-image.jpg’; }, 1500);

// 17. Adding/removing classes const contentDiv = document.getElementById(‘content’); contentDiv.classList.add(‘highlight’);

setTimeout(() => { contentDiv.classList.remove(‘highlight’); contentDiv.classList.add(‘fade’); }, 1000); </script> </body> </html>

Example 14 dynamically adds list items. Example 15 toggles element visibility. Example 16 modifies image attributes. Example 17 demonstrates class list manipulation.

Advanced Techniques

These examples demonstrate more advanced uses of getElementById including working with SVG, canvas, and custom data attributes.

advanced_techniques.html <!DOCTYPE html> <html> <body> <svg id=“mySvg” width=“200” height=“200”> <circle id=“myCircle” cx=“50” cy=“50” r=“40” fill=“red”/> </svg>

// 19. Canvas manipulation const canvas = document.getElementById(‘myCanvas’); const ctx = canvas.getContext(‘2d’); ctx.fillStyle = ‘green’; ctx.fillRect(10, 10, 150, 80);

// 20. Accessing data attributes const dataEl = document.getElementById(‘dataElement’); console.log(dataEl.dataset.userId); // “12345” dataEl.dataset.userStatus = “active”; </script> </body> </html>

Example 18 manipulates SVG elements. Example 19 demonstrates canvas drawing. Example 20 shows how to work with custom data attributes.

Best Practices

Always check if the element exists before manipulating it. Cache frequently accessed elements in variables. Prefer getElementById over more generic selectors when working with unique elements. Use meaningful, descriptive IDs. Avoid overusing IDs for styling purposes (use classes instead). Remember that IDs are case-sensitive in HTML5.

Performance Considerations

getElementById is one of the fastest DOM selection methods because browsers typically maintain a global map of IDs. However, excessive DOM manipulation can still impact performance. Batch your DOM changes when possible. Use event delegation for dynamic content rather than attaching handlers to individual elements.

Source References

Learn more from these resources: MDN document.getElementById, W3Schools getElementById, and MDN DOM Documentation.

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.