Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 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 not have the same id.
The id attribute of a link can be found in different ways, and in this tutorial, we will discuss the most popular ways of doing it−
Using document.getElementById() method
Using document.getElementsByTagName() method
Using document.querySelectorAll() method
Using document.getElementById() Method
In JavaScript, The document.getElementById() method is useful for getting different attributes value of an element like link or anchor tag. It takes the id of an element in the parameter and returns an element object of that element (in this case, it is a link or anchor tag), and from that object, we can get the id of that element by using the key ‘id.’
Users can follow the below syntax to get the value of the id attribute of a link.
Syntax
document.getElementById('mylink').id
In the above syntax, ‘mylink’ is the id of a link(anchor tag) and by using document.getElementById method and ‘id’ key, we get the id attribute value from that link.
Example
In the below example, we have used document.getElementById() method to get the value of the id attribute a link.
<html> <body> <div><a id="home_page" href="https://www.tutorialspoint.com/" >tutorialspoint</a></div> <br /> <div id="root"></div> <script> let myId = document.getElementById('home_page').id let root = document.getElementById('root') root.innerHTML = 'value of id attribute: ' +myId+ '<br>' </script> </body> </html>
In the above output, users can see that using document.getElementById method, we get the id attribute value of different links.
Using document.getElementsByTagName() method
In JavaScript, The document.getElementsByTagName() method can be used to get the value of the id attribute of a link or anchor tag. It takes a tag name in the parameter and returns an HTMLCollection, similar to a list or array. It contains all of the element objects of that tag name, and from each object, we can also get the value of id by using the key ‘id.’
Syntax
// getting all anchor tags
let links = document.getElementsByTagName('a')
// looping through all the HTMLCollection links
for (let index=0; index < links.length; index++){
// accessing the id from each element
let id = links[index].id
// use id
}
In the above syntax, document.getElementByTagName() method takes ‘a’ as an argument, so it returns all of the elements, which is an anchor tag in an HTMLCollection, and looping through it, we are getting all of the id attributes values from all links and console logging it.
Example
In the below example, we have used document.getElementByTagName() method to get the value of the id attribute a link.
<html> <body> <h4>Get the value of the id attribute of a link in JavaScript using <i>document.getElementsByTagName()</i> 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="root"></div> <script> let root = document.getElementById('root') let links = document.getElementsByTagName('a') for (let index=0; index<links.length; index++){ let id = links[index].id // outputting the id value root.innerHTML+= 'Link '+(index+1)+' id: '+id+'<br>' } </script> </body> </html>
In the above output, users can see that using document.getElementByTagName method, we get the id attribute value of all links.
Using document.querySelectorAll() Method
In JavaScript, The document.querySelectorAll() method can be used to get the value of the id attribute of a link or anchor tag. It takes a tag name and CSS selectors in the parameter and returns a NodeList similar to a list or array. It contains all of the elements as node element objects of that tag name, and from each object, we can also get the value of id by using the key ‘id.’
In the document.getElementByTagName() method, we get all the anchor tags whether it has an id attribute or not but using the document.querySelectorAll() method, we can only get the links or anchor tags with the id attribute. The links which don’t have an id attribute will not be selected by this method.
Syntax
document.querySelectorAll('a[id]')
In the above syntax, document.querySelectorAll() method takes ‘a[id]’ as an argument, so it returns all of the elements, which is an anchor tag containing the id attribute in a NodeList, and looping through it, we can get all of the id attributes values.
Example
In the below example, we have used document.querySelectorAll() method to get the value of the id attribute a link.
<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="root"></div> <script> let root = document.getElementById('root') let links = document.querySelectorAll('a[id]') for (let index=0; index<links.length; index++){ let id=links[index].id // outputting the id value root.innerHTML+= 'Link '+(index+1)+' id: '+id+'<br>' } </script> </body> </html>
In the above output, using document.querySelectorAll method, we get the id attribute value of all links with the id attribute.
7K+ Views
