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 hostname Property
The HTML DOM Anchor hostname property returns or sets the hostname portion of a URL. The hostname is the domain name part of the URL, excluding the protocol, port number, path, and hash fragments.
Syntax
Following is the syntax to return the hostname property −
anchorObj.hostname
Following is the syntax to set the hostname property −
anchorObj.hostname = hostname
Here, hostname is a string representing the domain name of the URL.
Return Value
The hostname property returns a string containing the hostname of the URL. For example, if the URL is http://www.example.com:8080/page.html, the hostname would be www.example.com.
Difference Between host and hostname
It's important to understand the difference between the host and hostname properties −
-
hostname − Returns only the domain name (e.g.,
www.example.com) -
host − Returns the domain name plus the port number if specified (e.g.,
www.example.com:8080)
Example − Getting Hostname Property
Following example demonstrates how to get the hostname from an anchor element −
<!DOCTYPE html>
<html>
<head>
<title>Anchor Hostname Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Company Website</h1>
<p><a id="mylink" href="http://www.demo.com:6064/abc/def.html#myteam">Our Team</a></p>
<h2 id="result"></h2>
<button onclick="displayHash()">Display Anchor Part</button>
<button onclick="displayHost()">Display Host Part</button>
<button onclick="displayHostname()">Display Hostname</button>
<script>
function displayHash() {
var anchor = document.getElementById("mylink").hash;
document.getElementById("result").innerHTML = "Hash: " + anchor;
}
function displayHost() {
var host = document.getElementById("mylink").host;
document.getElementById("result").innerHTML = "Host: " + host;
}
function displayHostname() {
var hostname = document.getElementById("mylink").hostname;
document.getElementById("result").innerHTML = "Hostname: " + hostname;
}
</script>
</body>
</html>
The output shows different URL components based on which button is clicked −
Initially: Company Website with "Our Team" link and three buttons After clicking "Display Hostname": Hostname: www.demo.com After clicking "Display Host Part": Host: www.demo.com:6064 After clicking "Display Anchor Part": Hash: #myteam
Example − Setting Hostname Property
Following example shows how to modify the hostname of an anchor element −
<!DOCTYPE html>
<html>
<head>
<title>Setting Anchor Hostname</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change Hostname Example</h2>
<p>Original Link: <a id="changeLink" href="http://www.oldsite.com/page.html">Visit Page</a></p>
<button onclick="changeHostname()">Change Hostname</button>
<button onclick="showCurrentUrl()">Show Current URL</button>
<p id="output"></p>
<script>
function changeHostname() {
var link = document.getElementById("changeLink");
link.hostname = "www.newsite.com";
document.getElementById("output").innerHTML = "Hostname changed successfully!";
}
function showCurrentUrl() {
var link = document.getElementById("changeLink");
document.getElementById("output").innerHTML = "Current URL: " + link.href;
}
</script>
</body>
</html>
After changing the hostname, the complete URL is updated while preserving the path −
Before change: http://www.oldsite.com/page.html After change: http://www.newsite.com/page.html
URL Component Comparison
Following table shows how different URL properties extract various parts from the same URL −
| Property | Value from "http://www.demo.com:6064/abc/def.html#myteam" |
|---|---|
hostname |
www.demo.com |
host |
www.demo.com:6064 |
protocol |
http: |
pathname |
/abc/def.html |
hash |
#myteam |
port |
6064 |
Common Use Cases
The hostname property is commonly used for −
- Domain validation − Checking if links point to trusted domains
- Cross-domain detection − Identifying external links for special handling
- Dynamic link modification − Changing domains based on environment (development vs production)
- Analytics tracking − Categorizing clicks by destination domain
Browser Compatibility
The hostname property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It's part of the standard DOM Level 1 specification and has been available since early browser versions.
Conclusion
The HTML DOM Anchor hostname property provides a simple way to access and modify the domain name portion of a URL in anchor elements. Unlike the host property, hostname returns only the domain name without the port number, making it useful for domain-specific operations and validations.
169 Views
