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 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 expresses 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="nofollow" 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>
value of rel attribute: nofollow
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.getElementsByTagName() 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.getElementsByTagName() 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>
Link 1 rel attribute: alternate Link 2 rel attribute: nofollow
In the above output, users can see that using document.getElementsByTagName 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.getElementsByTagName() 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>
Get the value of the rel attribute of a link in JavaScript using document.querySelectorAll() method Link 1 rel: alternate Link 2 rel: nofollow
In the above output, using document.querySelectorAll method, we get the rel attribute value of all links with the rel attribute. Notice that Link 3 (no rel) was not processed because it doesn't have a rel attribute.
Conclusion
JavaScript provides three effective methods to access the rel attribute: getElementById() for specific elements, getElementsByTagName() for all anchor tags, and querySelectorAll() for filtering only links with rel attributes. Choose the method that best fits your specific use case.
3K+ Views
