HTML DOM Anchor rel Property

HTMLWeb DevelopmentFront End Technology

<p style="">The HTML DOM Anchor Rel property returns the rel attribute of a link. The rel attribute describes the association between the running document and the linked document.</p><h2 style="">Syntax</h2><p>Following is the syntax to &minus;</p><ul class="list"><li><p>a) Return the rel property &minus;</p></li></ul><pre class="result notranslate">anchorObject.rel</pre><ul class="list"><li><p>b) Set the rel property &amp;minus</p></li></ul><pre class="result notranslate">anchorObject.rel = &quot;value&quot;</pre><h2>Example</h2><p>Let us see an example of the HTML DOM anchor rel property &minus;</p><p><a class="demo" href="http://tpcg.io/LdIbIsHd" rel="nofollow" target="_blank">Live Demo</a></p><pre class="prettyprint" style="">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;h1&gt;Example&lt;/h1&gt; &lt;p&gt;&lt;a id=&quot;anchorExample&quot; rel=&quot;Rel Property&quot; href=&quot;https://www.examplesite.com/&quot;&gt; Anchor Rel Property&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Click on the button&lt;/p&gt; &lt;button onclick=&quot;display()&quot;&gt;Click me!&lt;/button&gt; &lt;p id=&quot;show&quot;&gt;&lt;/p&gt; &lt;script&gt; &nbsp; &nbsp;function display() { &nbsp; &nbsp; &nbsp; var docs = document.getElementById(&quot;anchorExample&quot;).rel; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;show&quot;).innerHTML = docs; &nbsp; &nbsp;} &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2 style="">Output</h2><p>This will produce the following output &minus;</p><p style=""><img src="https://www.tutorialspoint.com/assets/questions/media/26302/anchor_rel.jpg" class="fr-fic fr-dib" style="width:500px; height:249px; border:1px solid black;" width="500" height="249"></p><p>Click on the &ldquo;Click me!&rdquo; button to get the HTML DOM Anchor rel property &minus;</p><p style=""><img src="https://www.tutorialspoint.com/assets/questions/media/26302/anchor_rel_property.jpg" class="fr-fic fr-dib" style="width:500px; height:280px; border:1px solid black;" width="500" height="280"></p><p>In the above example &minus;</p><p style="">We have taken an anchor tag with rel property used for specifying the type of relation to the linked document which in the above code is https://www.examplesite.com/</p><pre class="result notranslate">&lt;p&gt; &lt;a id=&quot;anchorExample&quot; rel=&quot;Rel Property&quot; href=&quot;https://www.examplesite.com/&quot;&gt;Anchor Rel Property&lt;/a&gt; &lt;/p&gt;</pre><p>We have then created a button named &ldquo;Click Me&rdquo; to execute the display function &minus;</p><pre class="result notranslate">&lt;button onclick=&quot;display()&quot;&gt;Click me!&lt;/button&gt;</pre><p>The display function gets the rel property of the element with id=&rdquo; Anchor example&rdquo; &minus;</p><pre class="result notranslate" style="">function display() { &nbsp; &nbsp;var docs = document.getElementById(&quot;anchorExample&quot;).rel; &nbsp; &nbsp;document.getElementById(&quot;show&quot;).innerHTML = docs; }</pre><p>We have then created a button named &ldquo;Click Me&rdquo; to execute the display function &minus;</p>
raja
Updated on 20-Feb-2021 06:35:51

Advertisements