Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to 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.
<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.
<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.
536 Views
