Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Javascript Javascriptexamples JavaScript getAttribute Href

Related Tutorials


 
 

Share on Google+Share on Google+

JavaScript getAttribute Href

Advertisement
This page discusses - JavaScript getAttribute Href

JavaScript getAttribute Href

        

In JavaScript we can get the URL value of the linked resource by getting the HREF value of the link. We can achieve this in two ways :

  • document.getElementById('myLink').href or
  • document.getElementById('myLink').getAttribute('href')

The first way returns the whole URL of the linked resource and another returns only the exact URL of the linked resource. To explain use of getAttribute("href") we have created a simple example here.

Explanation :

This HTML page contains one link and one button. On the click event of the button it calls a function getAttributeHREF() which is defined in the JavaScript in the <script></script> tag.  In this function first line will get the whole URL path of the linked resource by the "document.getElementById('myLink').href" and another line will show exact path in the alert message by the document.getElementById('myLink').getAttribute("href").

Here is the full code :

<html>
 <head>
  <title>
    getAttribute HREF Example
  </title>
  <script language="javascript" >
    function getAttributeHREF() {
      alert(document.getElementById('myLink').href);
      alert(document.getElementById('myLink').getAttribute("href")); 
    }
  </script>
 </head>
 <body>
<div style="background: #DFDFFF; width:'100%';" align="center">
 <font color="#000080" size="12pt">
  <b>getAttribute HREF</b>
 </font>
</div>
<center>
 <div style='float:inherit'>
	<a id="myLink" href="relativeURL" >
            This is the link with HREF="relativeURL"
        </a>
 </div>
</center>
<center>
<div>
 <input type="button" value="showHREF" 
    onClick="getAttributeHREF();">
</div>	 
</center>
</body>
</html>

Output :

Output page will be as given below :

When you click on the button "showHREF" it calls the function "getAttributeHREF()" defined in the JavaScript. URL fetched with "href" property holds full address as shown below :

URL fetched with the getAttribute("href") method would be a relative URL as below :

You can also download full code from the following link:

Download Source Code

        

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

Discuss: JavaScript getAttribute Href  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com