How to find the href attribute of a link in a document in JavaScript?

Javascript Web Development Front End Technology

In this following article we are going to learn how to find the href attribute of a link in a document in JavaScript.

The DOM property in the JavaScript provides many properties like <head>, <title>, <body>, <link>, <a>, <style>. There are two ways we can represent the links in HTML DOM. The DOM object provides links property.

The href attribute in the anchor tag specifies the URL. To get the href attribute, we need to find the anchor object reference.

To get a better idea of this concept, let’s look into the syntax and usage of the href attribute of an anchor object further in the article.

Syntax

The syntax to get the href attribute of an anchor object is shown below.

anchorObject.href

Example 1

The following is an example program to get the href attribute of an anchor object by using getElementsByTagName() and getElementByID() methods.

<!DOCTYPE html>
<html>
<head>
   <title>To find the href attribute of a link in a document in JavaScript</title>
</head>
<body style="text-align : center">
   <h3>To find the href attribute of a link in a document in JavaScript</h3>
   <a name="Google" href="https://www.google.com/" title="Home page for Google">Google</a><br>
   <a name="Facebook" href="https://www.facebook.com/" title="Home Page for Facebook">Facebook</a><br>
   <a name="Youtube" href="https://www.youtube.com/" title="Home Page for Youtube">Youtube</a><br>
   <p id="text1"></p>
   <script>
      document.getElementById("text1").innerHTML = "The link for first anchor element is : "+document.getElementsByTagName("a")[0].href+"<br/>"+" The link for the id 'yo' is : "+document.getElementById('yo').href;
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 2

The following is an example program to get the href attribute of an anchor object by using querySelector() method.

<!DOCTYPE html>
<html>
<head>
   <title>To find the href attribute of a link in a document in JavaScript</title>
</head>
<body style="text-align : center">
   <h3>To find the href attribute of a link in a document in JavaScript</h3>
   <a name="Google" href="https://www.google.com/" title="Home page for Google">Google</a><br>
   <a name="Facebook" href="https://www.facebook.com/" title="Home Page for Facebook">Facebook</a><br>
   <a name="Youtube" href="https://www.youtube.com/" title="Home Page for Youtube">Youtube</a><br>
   <p id="text1"></p>
   <script>
      // The document.querySelector('a') will return the first element within the document that matches the specified selector.
      document.getElementById("text1").innerHTML = "The link for the first anchor element is : "+document.querySelector('a').href;
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 3

The following is an example program to get all the href tag links inside a document.

<!DOCTYPE html>
<html>
<head>
   <title>To get all the href links in a document in JavaScript</title>
</head>
<body style="text-align : center">
   <h3>To display all the href links in a document in JavaScript</h3>
   <a name="google" href="https://www.google.com/" title="Google Home Page">Google</a><br>
   <a name="Facebook" href="https://www.facebook.com/" title="Home Page for Facebook">Facebook</a><br>
   <a name="youtube" href="https://www.youtube.com/" title="Youtube Home Page">Youtube</a><br>
   <p id="text1"></p>
   <script>
      var result="";
      for(var i=0;i<document.links.length;i++){
         result += "Title "+(i+1)+" : "+document.getElementsByTagName('a')[i].title+"<br/>"+" Link "+(i+1)+" : "+document.links[i].href+"<br/>";
      }
      document.getElementById("text1").innerHTML = "The links in the document are : "+'<br/>'+result;
  </script>
</body>
</html>

On executing the above code, the following output is generated.