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 pathname Property
The HTML DOM Anchor pathname property is used to set or return the pathname portion of a link's href attribute. The pathname represents the path part of the URL, which comes after the domain name and before any query string or hash fragment.
Syntax
Following is the syntax to set the pathname property −
anchorObject.pathname = path
Following is the syntax to return the pathname property −
anchorObject.pathname
Parameters
path − A string that specifies the pathname of the URL. It should start with a forward slash (/) and represent the directory path on the server.
Return Value
The pathname property returns a string representing the pathname portion of the href attribute. If no pathname is specified in the URL, it returns "/" (root path).
Example − Getting the Pathname
Following example demonstrates how to retrieve the pathname from an anchor element −
<!DOCTYPE html>
<html>
<head>
<title>DOM Anchor pathname Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Company Website</h2>
<p><a id="myLink" href="https://www.example.com/products/electronics.html#featured">View Electronics</a></p>
<button onclick="displayPathname()">Display Pathname</button>
<button onclick="displayFullHref()">Display Full URL</button>
<h3 id="result"></h3>
<script>
function displayPathname() {
var anchor = document.getElementById("myLink");
var pathname = anchor.pathname;
document.getElementById("result").innerHTML = "Pathname: " + pathname;
}
function displayFullHref() {
var anchor = document.getElementById("myLink");
var fullUrl = anchor.href;
document.getElementById("result").innerHTML = "Full URL: " + fullUrl;
}
</script>
</body>
</html>
The output shows the pathname extracted from the URL −
Pathname: /products/electronics.html (when "Display Pathname" is clicked) Full URL: https://www.example.com/products/electronics.html#featured (when "Display Full URL" is clicked)
Example − Setting the Pathname
Following example demonstrates how to modify the pathname of an anchor element −
<!DOCTYPE html>
<html>
<head>
<title>Setting Anchor Pathname</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">Home Page</a></p>
<button onclick="changeToProducts()">Change to Products</button>
<button onclick="changeToAbout()">Change to About</button>
<button onclick="showCurrentPath()">Show Current Path</button>
<p id="display"></p>
<script>
function changeToProducts() {
var link = document.getElementById("navLink");
link.pathname = "/products/catalog.html";
link.textContent = "Products Catalog";
document.getElementById("display").innerHTML = "Link updated to: " + link.href;
}
function changeToAbout() {
var link = document.getElementById("navLink");
link.pathname = "/company/about.html";
link.textContent = "About Us";
document.getElementById("display").innerHTML = "Link updated to: " + link.href;
}
function showCurrentPath() {
var link = document.getElementById("navLink");
document.getElementById("display").innerHTML = "Current pathname: " + link.pathname;
}
</script>
</body>
</html>
The buttons dynamically change the anchor's pathname and update the link text accordingly.
Example − Multiple Links with Different Pathnames
Following example shows how to work with multiple anchor elements and extract their pathnames −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Anchor Pathnames</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Website Sections</h2>
<ul>
<li><a href="https://www.example.com/">Home</a></li>
<li><a href="https://www.example.com/tutorials/">Tutorials</a></li>
<li><a href="https://www.example.com/downloads/software.zip">Downloads</a></li>
<li><a href="https://www.example.com/contact/support.php">Contact</a></li>
</ul>
<button onclick="showAllPathnames()">Show All Pathnames</button>
<div id="pathList"></div>
<script>
function showAllPathnames() {
var links = document.querySelectorAll('a');
var output = "<h3>All Pathnames:</h3><ul>";
for (var i = 0; i < links.length; i++) {
var linkText = links[i].textContent;
var pathname = links[i].pathname;
output += "<li><strong>" + linkText + ":</strong> " + pathname + "</li>";
}
output += "</ul>";
document.getElementById("pathList").innerHTML = output;
}
</script>
</body>
</html>
This example extracts and displays the pathname from each anchor element on the page −
All Pathnames: ? Home: / ? Tutorials: /tutorials/ ? Downloads: /downloads/software.zip ? Contact: /contact/support.php
Key Points
The pathname property always starts with a forward slash (/) character.
For root URLs (like https://example.com/), the pathname returns just "/".
The pathname excludes the protocol, hostname, query string, and hash fragment.
When setting a new pathname, it automatically updates the href attribute of the anchor element.
The pathname property is read/write, allowing both retrieval and modification of the path.
Browser Compatibility
The pathname property is supported in all major browsers including Chrome, Firefox, Safari, Internet Explorer 8+, and Edge. It is part of the standard DOM Level 1 specification and has been widely supported for many years.
Conclusion
The HTML DOM Anchor pathname property provides a convenient way to access and modify the path portion of a link's URL. It is particularly useful for dynamic link manipulation, URL parsing, and creating interactive navigation systems. The property works seamlessly with both absolute and relative URLs, making it a valuable tool for web developers.
176 Views
