How to get the value of the rel attribute of a link in JavaScript?

Javascript Web Development Front End Technology

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>