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 get a particular anchor in a document in JavaScript?
In this article we will learn how to get a particular anchor in a document in JavaScript.
JavaScript provides multiple ways to access anchor elements (<a> tags) in a document. Anchor elements follow an array-like structure, allowing you to select specific anchors by index or use DOM methods to retrieve them.
There are two primary methods to get a particular anchor element: using document.anchors collection or document.getElementsByTagName("a") method.
Syntax
The syntax to get a particular anchor tag is shown below:
// Method 1: Using document.anchors collection
document.anchors[index].innerHTML
// Method 2: Using getElementsByTagName
document.getElementsByTagName("a")[index].innerHTML
Using document.anchors Collection
The document.anchors collection contains all anchor elements with a name attribute in the document.
<!DOCTYPE html>
<html>
<head>
<title>Getting Anchor Elements</title>
</head>
<body style="text-align: center">
<h1>Getting a Particular Anchor Element</h1>
<a name="google">Google</a><br>
<a name="facebook">Facebook</a><br>
<a name="youtube">Youtube</a><br>
<p id="result1"></p>
<script>
document.getElementById("result1").innerHTML =
"The second anchor element is: " + document.anchors[1].innerHTML;
</script>
</body>
</html>
The second anchor element is: Facebook
Using getElementsByTagName Method
The getElementsByTagName("a") method returns all anchor elements in the document, regardless of whether they have a name attribute.
<!DOCTYPE html>
<html>
<head>
<title>Getting Anchor Elements</title>
</head>
<body style="text-align: center">
<h1>Getting a Particular Anchor Element</h1>
<a name="google">Google</a><br>
<a name="facebook">Facebook</a><br>
<a name="youtube">Youtube</a><br>
<p id="result2"></p>
<script>
document.getElementById("result2").innerHTML =
"The third anchor element is: " + document.getElementsByTagName("a")[2].innerHTML;
</script>
</body>
</html>
The third anchor element is: Youtube
Accessing Anchor Properties
You can also access various properties of anchor elements like name, href, and title attributes using the getAttribute() method.
<!DOCTYPE html>
<html>
<head>
<title>Accessing Anchor Properties</title>
</head>
<body style="text-align: center">
<h1>Accessing Anchor Properties</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="result3"></p>
<script>
const thirdAnchor = document.getElementsByTagName("a")[2];
document.getElementById("result3").innerHTML =
"Anchor text: " + thirdAnchor.innerHTML + "<br/>" +
"Name attribute: " + thirdAnchor.getAttribute("name") + "<br/>" +
"Link URL: " + thirdAnchor.getAttribute("href") + "<br/>" +
"Title: " + thirdAnchor.getAttribute("title");
</script>
</body>
</html>
Anchor text: Youtube Name attribute: youtube Link URL: https://www.youtube.com/ Title: Youtube Home Page
Key Differences
| Method | Requirement | Returns |
|---|---|---|
document.anchors |
Anchor must have name attribute |
Only named anchors |
getElementsByTagName("a") |
Any <a> tag |
All anchor elements |
Conclusion
Use document.anchors for named anchors or getElementsByTagName("a") for all anchor elements. Both methods provide array-like access to retrieve specific anchor elements by index.
2K+ Views
