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
HTML DOM Anchor hash Property
The HTML DOM Anchor hash property is used to set or return the anchor part of the href attribute value. The anchor part is the portion of the URL that comes after the # symbol, which is used for navigation to specific sections within a page.
Syntax
Following is the syntax to set the hash property −
anchorObject.hash = anchor_part
Above, anchor_part is the anchor part of the URL including the # symbol.
Following is the syntax to return the hash property −
anchorObject.hash
Return Value
The hash property returns a string representing the anchor part of the URL, including the # character. If there is no anchor part in the URL, it returns an empty string.
Example − Getting the Hash Property
Following example demonstrates how to get the anchor part of a link using the hash property −
<!DOCTYPE html>
<html>
<head>
<title>DOM Anchor Hash Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Company Website</h2>
<p><a id="mylink" href="http://www.demo.com/abc/def.html#myteam">Our Team</a></p>
<p>Click the button to get the anchor part of the link:</p>
<button onclick="display()" style="padding: 8px 16px; background-color: #4CAF50; color: white; border: none; cursor: pointer;">Display Anchor Part</button>
<h3 id="result" style="color: #333; margin-top: 20px;"></h3>
<script>
function display() {
var anchor = document.getElementById("mylink").hash;
document.getElementById("result").innerHTML = "Anchor part: " + anchor;
}
</script>
</body>
</html>
The output shows the anchor part #myteam when the button is clicked −
Company Website Our Team Click the button to get the anchor part of the link: [Display Anchor Part] (After clicking: Anchor part: #myteam)
Example − Setting the Hash Property
Following example demonstrates how to set the anchor part of a link using the hash property −
<!DOCTYPE html>
<html>
<head>
<title>Set Anchor Hash Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Navigation Links</h2>
<p><a id="navlink" href="https://www.tutorialspoint.com/index.html">TutorialsPoint Home</a></p>
<button onclick="addHash()" style="padding: 8px 16px; background-color: #008CBA; color: white; border: none; cursor: pointer; margin-right: 10px;">Add Hash</button>
<button onclick="showLink()" style="padding: 8px 16px; background-color: #f44336; color: white; border: none; cursor: pointer;">Show Full Link</button>
<p id="linkDisplay" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0; border-left: 4px solid #4CAF50;"></p>
<script>
function addHash() {
document.getElementById("navlink").hash = "#tutorials";
document.getElementById("linkDisplay").innerHTML = "Hash added successfully!";
}
function showLink() {
var link = document.getElementById("navlink").href;
document.getElementById("linkDisplay").innerHTML = "Full URL: " + link;
}
</script>
</body>
</html>
Clicking "Add Hash" modifies the link to include #tutorials, and "Show Full Link" displays the complete URL −
Navigation Links TutorialsPoint Home [Add Hash] [Show Full Link] (After clicking Add Hash then Show Full Link: Full URL: https://www.tutorialspoint.com/index.html#tutorials)
Example − Working with Multiple Anchors
Following example shows how to work with multiple anchor links and their hash properties −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Anchor Hash Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Table of Contents</h2>
<p><a id="link1" href="page.html#introduction">Introduction</a></p>
<p><a id="link2" href="page.html#examples">Examples</a></p>
<p><a id="link3" href="page.html#conclusion">Conclusion</a></p>
<button onclick="showAllHashes()" style="padding: 8px 16px; background-color: #FF9800; color: white; border: none; cursor: pointer;">Show All Hash Values</button>
<div id="hashList" style="margin-top: 20px; padding: 15px; background-color: #e7f3ff; border: 1px solid #b3d9ff;"></div>
<script>
function showAllHashes() {
var hash1 = document.getElementById("link1").hash;
var hash2 = document.getElementById("link2").hash;
var hash3 = document.getElementById("link3").hash;
document.getElementById("hashList").innerHTML =
"<strong>Hash Values:</strong><br>" +
"Link 1: " + hash1 + "<br>" +
"Link 2: " + hash2 + "<br>" +
"Link 3: " + hash3;
}
</script>
</body>
</html>
This displays all hash values from multiple anchor links −
Table of Contents Introduction Examples Conclusion [Show All Hash Values] (After clicking: Hash Values: Link 1: #introduction Link 2: #examples Link 3: #conclusion)
Key Points
-
The hash property always includes the
#symbol when returning a value. -
If no anchor part exists in the URL, the property returns an empty string
"". -
Setting the hash property automatically updates the href attribute of the anchor element.
-
The hash property is commonly used for single-page navigation and bookmarking specific sections.
Conclusion
The DOM Anchor hash property provides a simple way to access and modify the anchor portion of URLs. It returns the hash part including the # symbol, making it useful for navigation within pages and dynamic link manipulation. This property is essential for creating interactive web applications with section-based navigation.
243 Views
