How to get a particular anchor in a document in JavaScript?

Javascript Web Development Front End Technology

In this article we will learn how to get a particular anchor in a document in JavaScript.

The Javascript anchor tags follow an array-like structure. When we try to display a particular anchor tag we have to use ,document.anchors.innerHTML method. This method works the same as array methods which are used to display a particular element.

To get a better understanding let’s look into the usage and syntax of anchor tag in JavaScript.

Syntax

The syntax to get a particular anchor tag is shown below.

document.anchors[i].innerHTML or document.getElementsByTagName(“a”)[i].innerHTML

Example 1

The following is an example program to get a particular anchor tag.

<!DOCTYPE html>
<html>
<head>
   <title>To get a particular anchor in a document</title>
</head>
<body style="text-align : center">
   <h1>To get a particular anchor in a document.</h1>
   <a name="google">Google</a><br>
   <a name="facebook">Facebook</a><br>
   <a name="youtube">Youtube</a><br>
   <p id="text1"></p>
   <script>
      document.getElementById("text1").innerHTML = "The second anchor element is : "+document.anchors[1].innerHTML;
   </script>
</body>
</html>

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

Example 2

The another way of accessing the anchor tag content is through document.getElementsByTagName(“a”)[i].innerHTML.

<!DOCTYPE html>
<html>
<head>
   <title>To get a particular anchor in a document</title>
</head>
   <body style="text-align : center">
      <h1>To get a particular anchor in a document.</h1>
      <a name="google">Google</a><br>
      <a name="facebook">Facebook</a><br>
      <a name="youtube">Youtube</a><br>
      <p id="text1"></p>
      <script>
         document.getElementById("text1").innerHTML = "The third anchor element is : "+document.getElementByTagName("a")[2].innerHTML;
      </script>
   </body>
</html>

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

Example 3

The following is an example program to access the properties and content inside an anchor tag.

<!DOCTYPE html>
<html>
<head>
   <title>To get a particular anchor in a document</title>
</head>
<body style="text-align : center">
   <h1>To get a particular anchor in a document.</h1>
   <a name="google" href="https://www.google.com/" title="Google Home Page">Google</a><br>
   <a name="facebook" href="https://www.facebook.com/" title="Facebook Home Page">Facebook</a><br>
   <a name="youtube" href="https://www.youtube.com/" title="Youtube Home Page">Youtube</a><br>
   <p id="text1"></p>
   <script>
      document.getElementById("text1").innerHTML = "The third anchor element is : "+document.getElementsByTagName("a")[2].innerHTML+"<br/>"+"The name for : the third anchor element is "+document.getElementsByTagName("a")[2].getAttribute("name")+"<br/> "+"The link for the third anchor tag element is : "+document.getElementsByTagName("a")[2].getAttribute("href")+"<br/> "+"The Title for the third anchor tag element link is : "+document.getElementsByTagName("a")[2].getAttribute("title");
   </script>
</body>
</html>

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