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 port Property
The HTML DOM Anchor port property is used to set or return the port number of a URL in the href attribute of an anchor element. This property represents the port number portion of the URL, which appears after the hostname and is separated by a colon.
Syntax
Following is the syntax to set the port property −
anchorObj.port = portNumber
Following is the syntax to return the port property −
anchorObj.port
Here, portNumber is a string representing the port number of the URL. If no port is specified in the URL, this property returns an empty string.
Return Value
The port property returns a string representing the port number of the URL. If no port number is specified in the href attribute, it returns an empty string ("").
Example − Getting Port Number
Following example demonstrates how to get the port number from an anchor element's href attribute −
<!DOCTYPE html>
<html>
<head>
<title>Anchor Port Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Anchor Port Property Demo</h2>
<p><a id="mylink" href="https://tutorialspoint.com:8080/html/index.html">TutorialsPoint HTML Tutorial</a></p>
<button onclick="displayPort()">Display Port</button>
<button onclick="displayFullURL()">Display Full URL</button>
<h3 id="result"></h3>
<script>
function displayPort() {
var anchor = document.getElementById("mylink");
var port = anchor.port;
document.getElementById("result").innerHTML = "Port: " + (port || "No port specified");
}
function displayFullURL() {
var anchor = document.getElementById("mylink");
document.getElementById("result").innerHTML = "Full URL: " + anchor.href;
}
</script>
</body>
</html>
The output shows the port number when "Display Port" is clicked −
Anchor Port Property Demo TutorialsPoint HTML Tutorial (as a link) [Display Port] [Display Full URL] After clicking "Display Port": Port: 8080
Example − Setting Port Number
Following example shows how to dynamically change the port number of an anchor element −
<!DOCTYPE html>
<html>
<head>
<title>Setting Anchor Port</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Change Port Number</h2>
<p><a id="testLink" href="https://example.com:3000/page.html">Test Link</a></p>
<button onclick="changePort(8080)">Set Port to 8080</button>
<button onclick="changePort(9000)">Set Port to 9000</button>
<button onclick="removePort()">Remove Port</button>
<p>Current URL: <span id="currentURL"></span></p>
<p>Current Port: <span id="currentPort"></span></p>
<script>
function updateDisplay() {
var link = document.getElementById("testLink");
document.getElementById("currentURL").textContent = link.href;
document.getElementById("currentPort").textContent = link.port || "None";
}
function changePort(newPort) {
var link = document.getElementById("testLink");
link.port = newPort;
updateDisplay();
}
function removePort() {
var link = document.getElementById("testLink");
link.port = "";
updateDisplay();
}
// Initial display
updateDisplay();
</script>
</body>
</html>
The output demonstrates how the port can be modified dynamically −
Change Port Number Test Link (as a link) [Set Port to 8080] [Set Port to 9000] [Remove Port] Current URL: https://example.com:3000/page.html Current Port: 3000 (After clicking "Set Port to 8080"): Current URL: https://example.com:8080/page.html Current Port: 8080
Example − Multiple Anchor Elements
Following example shows how to work with multiple anchor elements and their port properties −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Anchors Port</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Multiple Links Port Analysis</h2>
<p><a href="https://site1.com:8080/page1.html">Site 1 (Port 8080)</a></p>
<p><a href="https://site2.com/page2.html">Site 2 (No Port)</a></p>
<p><a href="http://localhost:3000/app">Local Development (Port 3000)</a></p>
<button onclick="analyzeAllPorts()">Analyze All Ports</button>
<div id="analysis"></div>
<script>
function analyzeAllPorts() {
var links = document.getElementsByTagName("a");
var result = "<h3>Port Analysis Results:</h3>";
for (var i = 0; i < links.length; i++) {
var link = links[i];
var port = link.port || "Default port";
result += "<p><strong>" + link.textContent + ":</strong> " + port + "</p>";
}
document.getElementById("analysis").innerHTML = result;
}
</script>
</body>
</html>
The output shows port analysis for multiple links −
Multiple Links Port Analysis Site 1 (Port 8080) (as a link) Site 2 (No Port) (as a link) Local Development (Port 3000) (as a link) [Analyze All Ports] Port Analysis Results: Site 1 (Port 8080): 8080 Site 2 (No Port): Default port Local Development (Port 3000): 3000
Key Points
Following are the important points about the DOM Anchor port property −
-
The port property returns a string, not a number.
-
If no port is specified in the URL, the property returns an empty string ("").
-
Setting the port property to an empty string removes the port from the URL.
-
Default ports (80 for HTTP, 443 for HTTPS) are typically not shown in URLs and return empty strings.
-
The port property is part of the URL object model and works with both absolute and relative URLs.
Browser Compatibility
The DOM Anchor port property is supported in all major browsers including Chrome, Firefox, Safari, Internet Explorer, and Edge. It is part of the standard DOM Level 1 specification.
Conclusion
The HTML DOM Anchor port property provides a convenient way to get and set the port number portion of a URL in anchor elements. It returns a string representing the port number, or an empty string if no port is specified. This property is useful for URL manipulation and analysis in web applications.
176 Views
