How to get an element by its href attribute ?

The task is to select the <a> element by its href attribute. A few of the techniques are discussed below. Here we are going to use JQuery to solve the problem. 

Approach: Use JQuery selector $(‘a[href=link_to_site]’).

Example 1: This example using the approach discussed above. 

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<h1 id="h1" style="color:green;">
    GeeksforGeeks
</h1>
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
</p>
<a href="https://www.geeksforgeeks.org">GeeksforGeeks
</a>
<br>
<br>
<button onclick="gfg_Run()">
    Click here
</button>
<p id="GFG_DOWN" style="font-size: 23px;
    font-weight: bold; color: green; ">
</p>
<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    el_up.innerHTML =
    "Click on the button to select the element by HREF attribute.";
    function gfg_Run() {
        el_down.innerHTML =
            $('a[href="https://www.geeksforgeeks.org"]').text();
    }
</script>

Output:

How to get an element by its href attribute ?

Approach 2: Use JQuery selector $(‘a[href*=part_of_link]’). it will select the element if any part of the attribute matches with value.

Example 2: This example using the approach discussed above. 

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<h1 id="h1" style="color:green;">
    GeeksforGeeks
</h1>
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
</p>
<a href="https://www.geeksforgeeks.org"> GeeksforGeeks
</a>
<br>
<br>
<button onclick="gfg_Run()">
    Click here
</button>
<p id="GFG_DOWN" style="font-size: 23px;
        font-weight: bold; color: green; ">
</p>
<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    el_up.innerHTML =
    "Click on the button to select the element by HREF attribute.";
    function gfg_Run() {
        el_down.innerHTML = $('a[href*="geeks.org"]').text();
    }
</script>

Output:

How to get an element by its href attribute ?