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 rel attribute of a link in JavaScript?
In this tutorial, we will learn how to get the value of the rel attribute of a link in JavaScript.
The rel attribute expressed the relationship between the current document or website and the linked document or website. The search engine uses this attribute to get more information about the link, so it is important for the SEO of the website.
The rel attribute can have different values like alternate, author, external, nofollow, etc.; each value means different information about the link. For example, ‘alternate’ means the link represents an alternate version of the current document.
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 rel attribute value of that element by using the key ‘rel.’
Users can follow the below syntax to get the value of the rel attribute of a link.
Syntax
document.getElementById('mylink').rel
In the above syntax, ‘mylink’ is the link's id (anchor tag) and by using document.getElementById method and ‘rel’ key, we get the rel attribute value from that link.
Example
In the below example, we have used document.getElementById() method to get the value of the rel attribute of a link.
<html> <body> <div><a id="link1" rel="nofolloww" href="https://www.tutorialspoint.com/" >tutorialspoint</a></div> <br /> <div id="result"></div> <script> let rel1 = document.getElementById('link1').rel let root = document.getElementById('result') root.innerHTML = 'value of rel attribute: ' +rel1+ '<br>' </script> </body> </html>
In the above output, users can see that using document.getElementById method, we get the rel attribute value of the link.
Using document.getElementsByTagName() method
In JavaScript, the document.getElementsByTagName() method can be used to get the value of the rel 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 the rel attribute by using the key ‘rel.’
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 rel attribute from each element
let rel = links[index].rel
console.log(rel)
}
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 the rel 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 rel attribute from a link.
<html> <body> <div> <a rel="alternate" href="https://www.tutorialspoint.com/" >Link 1</a><br> <a rel="nofollow" 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 rel=links[index].rel root.innerHTML+='Link '+(index+1)+' rel attribute: '+rel+'<br>' } </script> </body> </html>
In the above output, users can see that using document.getElementByTagName method, we get the rel attribute value of all links.
Using document.querySelectorAll() Method
In JavaScript, the document.querySelectorAll() method can be used to get the value of the rel 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 the rel attribute by using the key ‘rel.’
In the document.getElementByTagName() method, we get all the anchor tags whether it has a rel attribute or not but using the document.querySelectorAll() method can only get the links or anchor tags with the rel attribute. This method will not select the links that don’t have a rel attribute.
Syntax
document.querySelectorAll('a[rel]')
In the above syntax, document.querySelectorAll() method takes ‘a[rel]’ as an argument, so it returns all of the elements, which is an anchor tag containing the rel attribute in a NodeList and looping through it, we can get all of the rel attribute values.
Example
In the below example, we have used document.querySelectorAll() method to get the value of the rel attribute of a link.
<html> <body> <h4>Get the value of the rel attribute of a link in JavaScript using <i>document.querySelectorAll()</i> method</h4> <div> <a rel="alternate" href="https://www.tutorialspoint.com/" >Link 1</a><br> <a rel="nofollow" href="https://www.tutorialspoint.com/" >Link 2</a><br> <a href="https://www.tutorialspoint.com/" >Link 3(no rel)</a> </div> <br /> <div id="root"></div> <script> let root=document.getElementById('root') let links=document.querySelectorAll('a[rel]') for (let index=0; index<links.length; index++){ let rel=links[index].rel root.innerHTML +='Link '+(index+1)+' rel: '+rel+'<br>' } </script> </body> </html>
In the above output, using document.querySelectorAll method, we get the rel attribute value of all links with the rel attribute.
2K+ Views
