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
JavaScript - Get href value
JavaScript Get href Value is a useful tool for web developers and designers who need to quickly access the value of an HTML element's href attribute.
This article will provide step-by-step instructions on how to use JavaScript to get the value of an href attribute on a webpage, as well as some tips and tricks for getting the most out of this powerful feature. The ability to quickly obtain the values from an HTML element's attributes can help make development faster and more efficient, so let's get started!
The value of the href attribute in JavaScript is a URL that instructs the browser where to go when the link is clicked. The additional characteristics target="_blank" and rel="noopener" instruct the browser to open the website in a new tab, so take note of them.
Get href value using querySelector() in JavaScript
The querySelector() is a method in JavaScript used to query the DOM (Document Object Model) and return the first element that matches a given CSS selector. It can be used to select an element by its ID, class name, or any other valid CSS selector. This method returns NULL if there are no matches.
Syntax
element = document.querySelector(selectors);
Example 1: Using href Property
In the following example, we are using querySelector(), which returns the anchor tag within the document. Later, we will access the href property to get the value of the href attribute.
<!DOCTYPE html>
<html>
<body>
<a href="https://www.tutorialspoint.com/index.htm">Direct To Open</a>
<br><br>
<button id="submit">Click</button>
<script>
document.getElementById('submit').onclick = function() {
var href = document.querySelector('a').href;
alert(href);
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of an href link with the text "Direct To Open" along with a click button on the webpage. When the user clicks the button, the event gets triggered and displays an alert with the href value.
Example 2: Displaying href in Paragraph
Let's look into the following example, where we are using querySelector() to get the value of the href attribute and display it in a paragraph element.
<!DOCTYPE html>
<html>
<body>
<a href="https://www.google.com/">Open Google</a>
<br><br>
<button id="submit">Click</button>
<p id="tutorial"></p>
<script>
document.getElementById('submit').onclick = function() {
var anchor = document.querySelector("a")
document.getElementById("tutorial").innerHTML = anchor.getAttribute('href');
}
</script>
</body>
</html>
When the script is run, it will generate an output consisting of a link along with a click button. If the user clicks on the button, the event gets triggered and displays the value of the href attribute in the paragraph element.
Get href value using getAttribute() in JavaScript
The Element interface's getAttribute() method returns the value of the supplied attribute on the element. If the requested attribute does not exist, either null or "" (the empty string) will be delivered.
Syntax
getAttribute(attributeName)
Example
Considering the following example, where we are using getAttribute() to get the value of the href attribute on the specified anchor tag.
<!DOCTYPE html>
<html>
<body>
<a href="https://www.youtube.com/">Open YouTube</a>
<br><br>
<button id="submit">Click</button>
<p id="result"></p>
<script>
document.getElementById('submit').onclick = function() {
var href = document.querySelector('a').getAttribute('href');
document.getElementById('result').innerHTML = "href value: " + href;
}
</script>
</body>
</html>
On running the above script, the web-browser displays the href link along with the text and a click button on the webpage. If the user clicks the button, the event is triggered and the href value is displayed in the paragraph element.
Get href value using jQuery attr()
The attr() method is a jQuery method used to set or return attributes and their values for the selected elements. If it was used to return the attribute value, it returns the first matched element.
Syntax
$(selector).attr(attribute)
Example
Execute the below program, where we are running the script to get the value of the href attribute using jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get href with jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<ul class="getURLDemo">
<li>
<a class="demo" title="get the url" href="./mainPage.jsp/1245">Open Link</a>
</li>
</ul>
<p id="output"></p>
<script>
var hrefValue = $('ul.getURLDemo li a.demo').attr('href');
document.getElementById('output').innerHTML = "href value: " + hrefValue;
</script>
</body>
</html>
When the script gets executed, it displays the link and shows the href attribute value in the paragraph element using jQuery's attr() method.
Comparison of Methods
| Method | Library Required | Returns | Use Case |
|---|---|---|---|
element.href |
None | Absolute URL | Quick access to link URL |
getAttribute('href') |
None | Exact attribute value | Get raw href attribute |
$(selector).attr('href') |
jQuery | Exact attribute value | When using jQuery framework |
Conclusion
Getting href values in JavaScript is essential for dynamic web applications. Use querySelector() with .href property for absolute URLs, or getAttribute() for exact attribute values. jQuery's attr() method provides similar functionality when using the jQuery framework.
14K+ Views
