How to Get the ID of an Element with JavaScript?

How to Get the ID of an Element with JavaScript?

To get an element by id in javascript, we can use the getElementById() inbuilt function to get any HTML element simply by providing their id tag. If there is no element with the id that is given, then it will return null. As we know, the id of an element is unique in HTML. So, it provides us a faster way to access an element by document.getElementById().

The querySelector() method selects all the elements, whereas the advantage of getElementById() is it selects only the element available on the document object.

Using .attr() or .prop() Method to Get the Id of the Element

The attributes and values of the chosen items are set or returned using the .attr() or .prop() methods.

• When the attribute value is returned using this method, the value of the FIRST matched element is given.
• This method sets one or more attribute/value pairs for the collection of matched elements when used to set attribute values.
• The attribute can be returned using the "alert" method.

Example

To get an element by id in javascript, the code is:

Output

Note: You can add your own image by adding the link in src in the img tag. Explanation

In the above code, we have made a button element that is used in javascript as .click() to take a response from the user, and when it is pressed, it changes the width of the image; after that, we have used .attr() method to set the width of the image. At, last, when the button is clicked, we will observe a change in the image that the width of the image is changed to the value which is set in the .attr() method.

Syntax of the getElementById() Method

In the above syntax, the id is a string that represents the id of the element which is selected. We know that id is case-sensitive that, is 'img' and 'Img' are both different things.

We also know that id in HTML is unique, but if a user makes different elements with the same id, then the document.getElementById(id) method will return the first element it encounters.

JavaScript getElementById() Method Example

In the code below, we will see how we can get an element by id in javascript using getElementById(): get element by id in javascript

Code

Output

Explanation:

In the above code, we first made an element of p tag in HTML, which has an id='msg', and wrote a sentence inside the tag; after that, we used the script function in which we used the "document.getElementById('id')" method which is used to select the id which is provided in the HTML element after that console.log will print the output on the display screen.