JavaScript - Get href value

Javascript Web Development Front End Technology

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.

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

Following is the syntax for querySelector()

element = document.querySelector(selectors);

Example

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 the alert of href value on the webpage.

Example

Let’s look into the following example, where we are using querySelector() to get the value of the href attribute.

<!DOCTYPE html>
<html>
<body>
   <a href="https://www.google.com/">Open</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 on the web-browser.

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

Following is the syntax for getAttribute()

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/">Direct To Open</a>
   <br><br>
   <button id="submit">Click</button>
   <script>
      document.getElementById('submit').onclick = function() {
         var href = document.querySelector('a').getAttribute('href');
         document.write(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 on the web-browser.

Using attr()

The attr() method is 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

Following is the syntax for attr()

$(selector).attr(attribute)

Example

Execute the below program, where we are running the script to get the value of the href attribute.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
   <ul class="getURLDemo">
      <li>
         <a class="demo" title="get the url" href="./mainPage.jsp/1245">Open</a>
      </li>
   </ul>
   <script>
      var hrefValue = $('ul.getURLDemo li a.demo').attr('href');
      document.write(hrefValue);
   </script>
</body>
</html>

When the script gets executed, the event gets triggered and displays the link along with a href attribute value.