The Anchor href Property in HTML DOM is used to set or return the value of href attribute of a link. The href attribute is used to specify the link’s destination.
Syntax:
-
It returns the href property.
anchorObject.href -
It is used to set the href property.
anchorObject.href = URL
Property Values: It contains the value i.e. URL which specify the URL of the link.
- absolute URL: It points to another website.
- relative URL: It points to a file within a website.
- anchor URL: It points to an anchor within a page.
Return value: It returns a string value which represents the entire URL of the link including the protocol.
Example 1: This example returns the href Property.
html
<!DOCTYPE html><html>
<head>
<title>
HTML DOM Anchor href Property
</title>
</head>
<body style="text-align: center;">
<h1>GeeksforGeeks</h1>
<h2>
DOM Anchor href Property
</h2>
<p>Welcome to
id="GFG" rel="nofollow" hreflang="en-us"
target="_self">
GeeksforGeeks
</a>
</p>
<button onclick="myGeeks()">
Submit
</button>
<p id="sudo"></p>
<script>
function myGeeks() {
let x = document.getElementById("GFG").href;
document.getElementById("sudo").innerHTML = x;
}
</script>
</body>
</html>
|
Output:
Example 2: This example sets the href property.
html
<!DOCTYPE html><html>
<head>
<title>
HTML DOM Anchor href Property
</title>
</head>
<body style="text-align: center;">
<h1>GeeksforGeeks</h1>
<h2>
DOM Anchor href Property
</h2>
<p>Welcome to
id="GFG">
GeeksforGeeks
</a>
</p>
<button onclick="myGeeks()">
Submit
</button>
<p id="sudo"></p>
<script>
function myGeeks() {
let x = document.getElementById("GFG").href
document.getElementById("sudo").innerHTML
= "href change to " + x;
}
</script>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer 10.0 +
- Firefox
- Opera
- Safari