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 protocol Property
The HTML DOM Anchor protocol property sets or returns the protocol portion of a URL in an anchor element's href attribute. The protocol identifies the scheme used to access the resource, such as http:, https:, ftp:, or file:.
Syntax
Following is the syntax to set the protocol property −
anchorObject.protocol = "protocol:"
Following is the syntax to return the protocol property −
anchorObject.protocol
Parameters
The protocol property accepts a string value representing the URL protocol, including the colon (:). Common values include −
-
http:− Standard web protocol -
https:− Secure web protocol -
ftp:− File Transfer Protocol -
mailto:− Email protocol -
file:− Local file protocol
Return Value
The property returns a string containing the protocol portion of the URL, including the trailing colon. If no protocol is specified, it returns an empty string.
Example − Getting Protocol Property
Following example demonstrates how to retrieve the protocol from an anchor element −
<!DOCTYPE html>
<html>
<head>
<title>Anchor Protocol Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Link Protocol Example</h2>
<p>Website Link: <a id="websiteLink" href="https://www.tutorialspoint.com/html/index.htm">TutorialsPoint HTML Tutorial</a></p>
<p>FTP Link: <a id="ftpLink" href="ftp://files.example.com/documents/">File Server</a></p>
<button onclick="showProtocol()">Show Protocols</button>
<div id="result" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function showProtocol() {
var websiteProtocol = document.getElementById("websiteLink").protocol;
var ftpProtocol = document.getElementById("ftpLink").protocol;
document.getElementById("result").innerHTML =
"<strong>Website Protocol:</strong> " + websiteProtocol + "<br>" +
"<strong>FTP Protocol:</strong> " + ftpProtocol;
}
</script>
</body>
</html>
The output shows the protocol portions of different link types −
Website Protocol: https: FTP Protocol: ftp:
Example − Setting Protocol Property
Following example shows how to change the protocol of an existing link −
<!DOCTYPE html>
<html>
<head>
<title>Changing Protocol Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Protocol Modification Example</h2>
<p>Original Link: <a id="myLink" href="http://www.example.com/page.html">Example Website</a></p>
<button onclick="changeToHttps()">Change to HTTPS</button>
<button onclick="changeToFtp()">Change to FTP</button>
<button onclick="showCurrentUrl()">Show Current URL</button>
<div id="output" style="margin-top: 15px; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd;"></div>
<script>
function changeToHttps() {
var link = document.getElementById("myLink");
link.protocol = "https:";
document.getElementById("output").innerHTML = "Protocol changed to HTTPS";
}
function changeToFtp() {
var link = document.getElementById("myLink");
link.protocol = "ftp:";
document.getElementById("output").innerHTML = "Protocol changed to FTP";
}
function showCurrentUrl() {
var link = document.getElementById("myLink");
document.getElementById("output").innerHTML =
"<strong>Current URL:</strong> " + link.href + "<br>" +
"<strong>Protocol:</strong> " + link.protocol;
}
</script>
</body>
</html>
Clicking the buttons modifies the link's protocol and displays the updated URL information.
Example − Multiple Anchor Properties
Following example demonstrates accessing various anchor properties including protocol −
<!DOCTYPE html>
<html>
<head>
<title>Anchor Properties Demo</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>URL Component Analysis</h2>
<p>Sample Link: <a id="sampleLink" href="https://www.tutorialspoint.com:443/html/index.htm#introduction">HTML Tutorial</a></p>
<button onclick="showProtocol()">Show Protocol</button>
<button onclick="showHostname()">Show Hostname</button>
<button onclick="showPort()">Show Port</button>
<button onclick="showPathname()">Show Pathname</button>
<div id="display" style="margin-top: 15px; padding: 10px; background-color: #e8f4fd; border-left: 4px solid #007acc;">
Click a button to view URL components
</div>
<script>
function showProtocol() {
var protocol = document.getElementById("sampleLink").protocol;
document.getElementById("display").innerHTML = "<strong>Protocol:</strong> " + protocol;
}
function showHostname() {
var hostname = document.getElementById("sampleLink").hostname;
document.getElementById("display").innerHTML = "<strong>Hostname:</strong> " + hostname;
}
function showPort() {
var port = document.getElementById("sampleLink").port;
document.getElementById("display").innerHTML = "<strong>Port:</strong> " + (port || "default");
}
function showPathname() {
var pathname = document.getElementById("sampleLink").pathname;
document.getElementById("display").innerHTML = "<strong>Pathname:</strong> " + pathname;
}
</script>
</body>
</html>
This example shows how the protocol property works alongside other URL component properties.
Browser Compatibility
The protocol property is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the standard DOM Level 1 specification and has been available since the early versions of these browsers.
Key Points
- The protocol property always includes the trailing colon (
:) - Changing the protocol property updates the entire
hrefattribute - The property is case-insensitive when setting values
- If no protocol is specified in the original URL, the property returns an empty string
- The protocol property only affects the scheme portion of the URL, leaving other components unchanged
Conclusion
The HTML DOM Anchor protocol property provides a convenient way to access and modify the protocol portion of anchor links dynamically. It is essential for creating interactive web applications that need to manipulate URL schemes programmatically, such as switching between HTTP and HTTPS protocols or handling different types of links.
183 Views
