How to Select an Element by ID in JavaScript ? Last Updated : 05 Feb, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report In JavaScript, we can use the "id" attribute to interact with HTML elements. The "id" attribute in HTML assigns a unique identifier to an element. This uniqueness makes it easy for JavaScript to precisely target and manipulate specific elements on a webpage. Selecting elements by ID helps in dynamic content updates, event handling, and DOM manipulation. Table of Content Using getElementById MethodUsing the query selector methodUsing getElementById methodJavaScript hase getElementById method to access and retrieve a reference to an HTML element by its unique identifier. This method enables dynamic interaction with the Document Object Model (DOM) by allowing direct manipulation of specific elements on a web page. Syntax:let element = document.getElementById("myElement");Example: To demonstrate selecting an HTML element by ID in JavaScript and then using it for updating the state of another HTML element. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Selecting by ID in JavaScript</title> </head> <body> <div style="margin: 80px"> <h1 id="myElement">Hello, World!</h1> <button onclick="changeColor()">Change Color</button> </div> <script> function changeColor() { // Selecting element by ID let element = document.getElementById("myElement"); // Manipulating the selected element element.style.color = "red"; } </script> </body> </html> Output: Using the query selector methodThe querySelector method is a more flexible and versatile approach to element selection. In this case, the CSS selector #myElement targets the element with the specified ID. While querySelector is powerful, it's essential to note that if multiple elements share the same ID, it will only return the first one encountered in the document. Syntax:let element = document.querySelector("#myElement");Example: This HTML example creates a webpage with a heading and a button. Clicking the button triggers a JavaScript function that changes the text color of the heading to blue. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Selecting by ID in JavaScript</title> </head> <body> <div style="margin: 80px"> <h1 id="myElement">Hello, World!</h1> <button onclick="changeColor()">Change Color</button> </div> <script> function changeColor() { // Selecting element by ID let element = document.querySelector("#myElement"); // Manipulating the selected element element.style.color = "blue"; } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to select DOM Elements in JavaScript ? R rudra1807raj Follow Improve Article Tags : JavaScript Web Technologies Geeks Premier League Geeks Premier League 2023 Similar Reads How to select DOM Elements in JavaScript ? Selecting DOM (Document Object Model) elements is a fundamental aspect of web development with JavaScript. It allows developers to interact with and manipulate elements on a webpage dynamically. Proper selection of elements is crucial for tasks such as updating content, adding event listeners, or mo 3 min read How to Add an ID to Element in JavaScript ? In JavaScript, the ID is the unique identifier through which the elements can be identified and manipulated if required. We can add an ID to an element in JavaScript using various approaches that are explored in this article with practical demonstration. Below are the possible approaches: Table of C 2 min read How to select element by ID in jQuery ? In this article, we are going to see how to select the element by its id using jQuery. To learn about this topic one should have prior knowledge about HTML, CSS, JavaScript and jQuery. Using JavaScript: This question is also solved by a popular JavaScript method called document.getElementById() whic 2 min read How to get an Element by ID in ReactJS ? ReactJS, a popular JavaScript library for user interfaces, empowers developers with tools, such as the ref system, to manipulate the DOM by accessing elements using their unique IDs. This article explores the process of obtaining elements by ID in ReactJS for effective component interaction and mani 4 min read How to select elements by attribute in jQuery ? jQuery is a lightweight JavaScript library. In the vanilla JavaScript language, the getElementById method is used to select an element. However, jQuery provides a much lighter alternative for the same purpose. The 'jQuery Selector' allows the user to manipulate HTML elements and the data inside it(D 2 min read How to Change the ID of Element using JavaScript? We are given an element and the task is to change the ID of elements using JavaScript. ID is unique for any element and it can be assigned to an element only once. JavaScript provides a method to access this id and also to manipulate the id. Syntax:Selected_element.id = newID;Below are the appraoche 2 min read Like