Open In App

HTML | DOM Link rel Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The HTML | DOM Link rel Property in HTML DOM is used to set or return the value of the rel attribute of a linked document. The rel attribute is used to specify the relation between the current document and the linked document.

Syntax:  

  • It returns the rel property.
linkObject.rel
  • It is used to set the rel property.
linkObject.rel = relationship

Property Values:  

  • alternate: It defines an alternate version of the document i.e. print page, translated or mirror.
  • author: It defines the author of the document.
  • dns-prefetch: It is used to specify that the browser should preemptively perform DNS resolution for the target resource’s origin
  • help: It provides a help link.
  • icon: It is used to import an icon to represent the document.
  • license: It defines copyright information for the document.
  • next: It provides a link to the next document in a selection.
  • pingback: It is used to provides the address of pingback server which is used to handle pingbacks of the current document.
  • preconnect: It is used to specifies that the browser should preemptively connect to the target resource’s origin.
  • prefetch: It is used to specifies that the browser should preemptively fetch and cache the target resource, it is likely to be required for follow-up navigation
  • preload: It is used to specify the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination which is given by the “as” attribute.
  • prev: It specify the previous document in a selection.
  • search: It specify a link search through the document.
  • stylesheet:It is to import the style sheet.

Return value : It returns a  string value, which representing a space-separated list of relationship types

Example-1: This Example returns a rel Property. 

HTML




<!DOCTYPE html>
<html>
<head>
    <link id="linkid"
          rel="stylesheet"
          type="text/css"
          href="styles.css"
          sizes="16*16">
</head>
 
<body style="text-align:center;">
    <h1>GeeksForGeeks</h1>
    <h2>DOM Link rel Property</h2>
    <button onclick="gfg()">Get URL
    </button>
    <p id="pid"
       style="font-size:25px;
              color:green;">
      </p>
 
    <script>
        function gfg() {
 
            // Return  Link rel Property
            var NEW = document.getElementById(
                "linkid").rel;
            document.getElementById(
                "pid").innerHTML = NEW;
        }
    </script>
</body>
</html>


Output: 
Before Clicking On Button : 

After Clicking On Button : 

Example-2: This Example sets the rel Property. 

HTML




<!DOCTYPE html>
<html>
<head>
    <link id="linkid"
          rel="stylesheet"
          type="text/css"
          href="styles.css"
          sizes="16*16">
</head>
 
<body style="text-align:center;">
    <h1>GeeksForGeeks</h1>
    <h2>DOM Link rel Property</h2>
    <button onclick="gfg()">Get URL
    </button>
    <p id="pid"
       style="font-size:25px;
              color:green;">
      </p>
 
    <script>
        function gfg() {
 
            // Set  Link rel Property
            var NEW = document.getElementById(
                "linkid").rel = "alternate";
            document.getElementById(
                "pid").innerHTML =
        "The value of the rel attribute was changed to "
            + NEW;
        }
    </script>
</body>
</html>


Output : 
Before Clicking On Button: 

After Clicking On Button: 

Supported Browsers: 

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Safari
  • Opera


Last Updated : 22 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads