The HTML DOM anchors collection is used to return the collection of all <a> elements. It only counts those <a> element that has the name attribute only. The name attribute of the anchor element does not support HTML 5. The elements in the collection are sorted that appear in the source code.
Syntax:
document.anchorsNote: The DOM anchor collection has been deprecated.
Property: The anchor collection property contains a value length that returns the number of <a> elements in the document.
Methods: The DOM anchors collection contains three methods which are given below:
- [index]: It is used to return the <a> element of the selected index. The index value starts with 0. It returns NULL if the index value is out of range.
- item(index): It is used to return the <a> element of selected index. The index value starts with 0. It returns NULL if the index value is out of range.
- namedItem(id): It is used to return the <a> element from the collection with the given id attribute. It returns NULL if the id is not valid.
Return Value: An HTMLCollection Object, representing all <a> elements in the document that have a name attribute. The elements in the collection are sorted as they appear in the source code
Example 1: In this example, we will use DOM anchors collection.
<!DOCTYPE html><html>
<head>
<title>DOM anchors collection</title>
</head>
<body style="text-align: center;">
<h1>GeeksforGeeks</h1>
<h2>DOM anchors Collection</h2>
<a name="">GeeksforGeeks</a><br>
<a name="">Sudo Placement</a><br>
<a name="">GFG</a><br><br>
<button onclick="Geeks()">
Submit
</button>
<p id="sudo"></p>
<script>
function Geeks() {
let x = document.anchors.length;
document.getElementById("sudo").innerHTML
= "Number of Anchors elements: " + x;
}
</script>
</body>
</html>
|
Output:
Example 2: In this example, we will use DOM anchors collection.
<!DOCTYPE html><html>
<head>
<title>DOM anchors collection</title>
</head>
<body style="text-align: center;">
<h1>GeeksforGeeks</h1>
<h2>DOM anchors Collection</h2>
<a name="">GeeksforGeeks</a><br>
<a name="">Sudo Placement</a><br>
<a name="">GFG</a><br><br>
<button onclick="Geeks()">
Submit
</button>
<p id="sudo"></p>
<script>
function Geeks() {
let x = document.anchors[1].innerHTML;
document.getElementById("sudo").innerHTML
= "Second Anchor element: " + x;
}
</script>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Firefox
- Opera
- Safari