Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to work with document.anchors in JavaScript?
In this tutorial, let us discuss how to work with the document's anchor in JavaScript.
The document.anchors property is a legacy feature that returns a collection of all anchor elements with a name attribute. While modern web development no longer recommends this property, some browsers still support it for compatibility reasons.
The anchor tag represents hyperlinks and navigation points within a document. For document.anchors to include an anchor element, it must have a name attribute ? elements with only href attributes are not included.
Syntax
let anchors = document.anchors;
Properties
length ? Returns the number of anchor elements with
nameattributes in the collection.
Return Value
The document.anchors property returns an HTMLCollection of anchor elements that have a name attribute, ordered by their appearance in the source code.
Example: Accessing Anchor Properties
The following example demonstrates how to access anchor element properties. Notice that only anchors with name attributes are included in the collection:
<html>
<body>
<h2>Working with document.anchors 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>
<button onclick="displayAnchorInfo()">Show Anchor Info</button>
<div id="output"></div>
<script>
function displayAnchorInfo() {
let anchors = document.anchors;
let output = document.getElementById("output");
let result = "";
try {
result += "<br><b>Total valid anchors: </b>" + anchors.length;
result += "<br><b>First anchor text: </b>" + anchors[0].innerHTML;
result += "<br><b>First anchor name: </b>" + anchors[0].name;
result += "<br><b>Second anchor name: </b>" + anchors[1].name;
result += "<br><b>Second anchor href: </b>" + anchors[1].href;
} catch (e) {
result += "<br>Error: " + e.message;
}
output.innerHTML = result;
}
</script>
</body>
</html>
In this example, only two anchors are included in the collection because the other two lack name attributes.
Methods
The document.anchors collection provides standard HTMLCollection methods:
[index] ? Returns the element at the specified position (zero-based index).
item(index) ? Returns the element at the specified position. Returns
nullif index is out of range.namedItem(name) ? Returns the element with the specified
nameattribute. Returnsnullif not found.
Example: Using Collection Methods
<html>
<body>
<h2>Working with document.anchors methods</h2>
<a name="ancMeth" href="https://www.tutorialspoint.com">TutorialsPoint</a><br><br>
<a name="anchor2">Second Anchor</a><br><br>
<button onclick="demonstrateMethods()">Show Methods</button>
<div id="methodOutput"></div>
<script>
function demonstrateMethods() {
let anchors = document.anchors;
let output = document.getElementById("methodOutput");
let result = "";
try {
result += "<br><b>Using [0]: </b>" + anchors[0].innerHTML;
result += "<br><b>Using item(0): </b>" + anchors.item(0).name;
result += "<br><b>Using namedItem('ancMeth'): </b>" + anchors.namedItem("ancMeth").href;
} catch (e) {
result += "<br>Error: " + e.message;
}
output.innerHTML = result;
}
</script>
</body>
</html>
Modern Alternative
Instead of using the deprecated document.anchors, consider using modern DOM methods:
// Modern approach - get all anchor elements
let allAnchors = document.querySelectorAll('a');
// Get anchors with name attribute specifically
let namedAnchors = document.querySelectorAll('a[name]');
// Get specific anchor by name
let specificAnchor = document.querySelector('a[name="myAnchor"]');
Conclusion
While document.anchors provides access to named anchor elements, it's considered legacy and should be avoided in modern web development. Use document.querySelectorAll() and other modern DOM methods for better compatibility and flexibility.
965 Views
