Work with Document Anchors in JavaScript

In this tutorial, let us discuss how to work with the document's anchor in JavaScript.

Relevant web technologies no longer recommend this property. Some browsers still recommend it for compatibility reasons.

The document anchor property is a read-only feature that returns all the anchor tags. The anchor tag represents the start and end of a hyperlink.

The anchor tag attributes are name, href, rel, rev, title, urn, and method. All attributes are optional. But a name attribute is mandatory for document anchors to work.

Working with anchor's properties

Let us learn to work with an anchor's properties.

Users can follow the syntax below to work with the anchor's properties.

Syntax

let anchorTag = document.anchors;
anchorTag.propertyName;

The above syntax returns the anchor node and properties.

Properties

  • length ? The length is the number of elements in an HTML collection.

Return Value

The anchor property returns the HTML anchor object collection. The object follows the source code order.

Example

The program below tries to access all the anchor element's properties. The code uses a try-catch block to handle errors when we access invalid anchor tag properties.

We have four anchor tags in this example. But the property returns only two because the remaining anchor tags do not have a name attribute.

Open Compiler

<html>
<body>
   <h2> Working with the document anchor's properties </h2>
   <a name="docAnc1"> Anchor1 </a><br><br>
   <a href="https://tutorialspoint.com"> Anchor2 </a><br><br>
   <a name="docAnc3" href="https://tutorix.com"> Anchor3 </a><br><br>
   <a id="docAnc4"> Anchor4 </a><br><br>
   <div id="docAncBtnWrap">
      <button id="docAncBtn"> Click Me </button>
   </div>
   <p id="docAncOut"> </p>
   <script>
      var docAncInp = document.getElementById("docAncInp");
      var docAncOut = document.getElementById("docAncOut");
      var docAncBtnWrap = document.getElementById("docAncBtnWrap");
      var docAncBtn = document.getElementById("docAncBtn");
      var docAncInpStr = "";
      docAncBtn.onclick = function() {
         docAncInpStr = "";
         let docAncNode = document.anchors;
         
         //docAncBtnWrap.style.display = "none";
         try {
            docAncInpStr += "<br><br><b>The total valid anchors using length property = </b>" + docAncNode.length;
            docAncInpStr += "<br><br><b>The first valid anchor innerHTML = </b>" + docAncNode[0].innerHTML;
            docAncInpStr += "<br><br><b>The first valid anchor href = </b>" + docAncNode[0].href;
            docAncInpStr += "<br><br><b>The first valid anchor inner text = </b>" + docAncNode[0].innerText;
            docAncInpStr += "<br><br><b>The second valid anchor name = </b>" + docAncNode[1].name;
            docAncInpStr += "<br><br><b>The second valid anchor text = </b>" + docAncNode[1].text;
         } catch (e) {
            docAncInpStr += "<br><br>" + e;
         }
         docAncOut.innerHTML = docAncInpStr;
      };
   </script>
</body>
</html>

Working with anchor's methods

Let us learn to work with an anchor's methods.

Users can follow the syntax below to work with the anchor's methods.

Syntax

let anchorTag = document.anchors;
anchorTag.methodName;

The above syntax returns the anchor node and methods.

Methods

  • [index] ? The index method returns the element at the specific position. The index starts from zero. The method returns "null" if the index is out of range.

  • item(index) ? Returns the element at the specific position. The index starts from zero. The method returns "null" if the index is out of range.

  • namedItem(id) ? Returns the element with the specific id. The method returns "null" if the id is wrong.

Example

The program below tries to access the anchor element's properties using the methods available.

Open Compiler

<html>
<body>
   <h2> Working with the document anchor's methods </h2>
   <a name="ancMeth" href="https://www.tutorialspoint.com"> Anchor </a> <br> <br>
   <div id="ancMethBtnWrap">
      <button id="ancMethBtn"> Click Me </button>
   </div>
   <p id="ancMethOut"></p>
   <script>
      var ancMethInp = document.getElementById("ancMethInp");
      var ancMethOut = document.getElementById("ancMethOut");
      var ancMethBtnWrap = document.getElementById("ancMethBtnWrap");
      var ancMethBtn = document.getElementById("ancMethBtn");
      var ancMethInpStr = "";
      ancMethBtn.onclick = function() {
         ancMethInpStr = "";
         let ancMethNode = document.anchors;
         
         //ancMethBtnWrap.style.display = "none";
         try {
            ancMethInpStr += "<br><br><b>The anchor text using [index] = </b>" + ancMethNode[0].text;
            ancMethInpStr += "<br><br><b>The anchor href using namedItem() </b>" + ancMethNode.namedItem("ancMeth").href;
            ancMethInpStr += "<br><br><b>The anchor name using item() </b>" + ancMethNode.item(0).name;
         } catch (e) {
            ancMethInpStr += "<br><br>" + e;
         }
         ancMethOut.innerHTML = ancMethInpStr;
      };
   </script>
</body>
</html>

This tutorial taught us to work with an anchor tag's properties and methods. All the properties and methods are built-in by JavaScript. As you know, we can not recommend using this property. You can use the document links property as an alternative.

Updated on: 2022-11-15T09:12:14+05:30

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements