Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get the value of the id attribute a link in JavaScript?
In this tutorial, we will learn how to get the value of the id attribute of a link in JavaScript.
The id attribute stores a unique value for an HTML element. The id of an element must be unique, and no other elements should have the same id.
The id attribute of a link can be retrieved in different ways, and in this tutorial, we will discuss the most popular methods:
Using document.getElementById() method
Using document.getElementsByTagName() method
Using document.querySelectorAll() method
Using document.getElementById() Method
The document.getElementById() method is the most direct approach when you know the specific id of the link. It returns the element object, and you can access its id property directly.
Syntax
document.getElementById('linkId').id
In the above syntax, 'linkId' is the id of the link element, and by using the document.getElementById() method with the 'id' property, we get the id attribute value.
Example
In the below example, we use document.getElementById() method to get the value of the id attribute of a link.
<html>
<body>
<div>
<a id="home_page" href="https://www.tutorialspoint.com/">TutorialsPoint</a>
</div>
<br />
<div id="result"></div>
<script>
let myId = document.getElementById('home_page').id;
let result = document.getElementById('result');
result.innerHTML = 'Value of id attribute: ' + myId;
</script>
</body>
</html>
Value of id attribute: home_page
Using document.getElementsByTagName() Method
The document.getElementsByTagName() method retrieves all elements of a specific tag type. It returns an HTMLCollection that you can loop through to access each element's id attribute.
Syntax
// Getting all anchor tags
let links = document.getElementsByTagName('a');
// Looping through the HTMLCollection
for (let i = 0; i
Example
In the below example, we use document.getElementsByTagName() method to get the id attributes of all links.
<html>
<body>
<h4>Get id attributes using getElementsByTagName() method</h4>
<div>
<a id="mylink1" href="https://www.tutorialspoint.com/">Link 1</a><br>
<a id="mylink2" href="https://www.tutorix.com/">Link 2</a>
</div>
<br />
<div id="result"></div>
<script>
let result = document.getElementById('result');
let links = document.getElementsByTagName('a');
for (let i = 0; i
Link 1 id: mylink1
Link 2 id: mylink2
Using document.querySelectorAll() Method
The document.querySelectorAll() method provides more flexibility by using CSS selectors. You can specifically target anchor tags that have an id attribute using the selector 'a[id]'.
Unlike getElementsByTagName(), this method only selects links that actually have an id attribute, making it more efficient when you only need links with ids.
Syntax
document.querySelectorAll('a[id]')
Example
In the below example, we use document.querySelectorAll() method to get only the links that have an id attribute.
<html>
<body>
<div>
<a id="mylink1" href="https://www.tutorialspoint.com/">Link 1</a><br>
<a id="mylink2" href="https://www.tutorix.com/">Link 2</a><br>
<a href="https://www.tutorialspoint.com/">Link 3 (no id)</a>
</div>
<br />
<div id="result"></div>
<script>
let result = document.getElementById('result');
let linksWithId = document.querySelectorAll('a[id]');
for (let i = 0; i
Link 1 id: mylink1
Link 2 id: mylink2
Comparison
| Method | Use Case | Returns | Filters by ID |
|---|---|---|---|
| getElementById() | Get specific element by id | Single element | N/A |
| getElementsByTagName() | Get all elements of tag type | HTMLCollection | No |
| querySelectorAll() | Get elements matching CSS selector | NodeList | Yes (with 'a[id]') |
Conclusion
Use getElementById() for specific elements, getElementsByTagName() for all links, and querySelectorAll() when you need more precise selection criteria. Each method serves different scenarios effectively.
9K+ Views
