HTML | DOM Area search Property

Last Updated : 31 May, 2019

The Area search Property in HTML DOM is used to set or return the querystring part of the href attribute. It is the part of the URL after the question mark.
Syntax:

It return the Area search property.
```
 areaObject.search
```
It is used to set the Area search property.
```
areaObject.search = querystring 
```

Property Values: It contains single value querystring which specify the search part of the URL.

Return Value: It returns a string value which represents the querystring of the URL including (?) question mark.

Example 1: This example returns the Area search Property.

<!DOCTYPE html> 
<html> 
<title> 
    HTML DOM Area search Property 
</title> 
  
<body> 
    <h4> HTML DOM Area search Property </h4> 
    <button onclick="GFG()">Click Here! 
    </button> 
    <map name="Geeks1"> 
        <area id="Geeks"
            shape="rect"
            coords="0, 0, 110, 100"
            alt="Geeks"
            href= 
     https://manaschhabra:manaschhabra499@www.geeksforgeeks.org?id=Geeks/
                        target="_self"
    </map> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
        width="300"
        height="100"
        alt="Geeksforgeeks"
        usemap="#Geeks1"> 
    </br>
    <p id="GEEK!"></p> 
      
    <script> 
        function GFG() { 
              
        // Return search property. 
            var x = document.getElementById("Geeks").search; 
        document.getElementById("GEEK!").innerHTML = x; 
        } 
    </script> 
</body> 
  
</html>                    

Output:
Before Clicking on Button:

After Clicking on Button:

Example 2: This example sets the Area search property.

<!DOCTYPE html> 
<html> 
<title> 
    HTML DOM Area search Property 
</title> 
  
<body> 
    <h4> HTML DOM Area search Property </h4> 
    <button onclick="GFG()">Click Here! 
    </button> 
    <map name="Geeks1"> 
        <area id="Geeks"
            shape="rect"
            coords="0, 0, 110, 100"
            alt="Geeks"
            href= 
        https://manaschhabra:manaschhabra499@www.geeksforgeeks.org:80/
                       target="_self"
    </map> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
        width="300"
        height="100"
        alt="Geeksforgeeks"
        usemap="#Geeks1"> 
    </br>
    <p id="GEEK!"></p> 
      
    <script> 
        function GFG() { 
              
        // Set search property. 
            var x = document.getElementById("Geeks").search = "abc"; 
        document.getElementById("GEEK!").innerHTML = 
                "The querystring has been changed to " + x; 
        } 
    </script> 
</body> 
  
</html>                     

Output:
Before Clicking on Button:

After Clicking on Button:

Supported Browsers:

Google Chrome
Firefox
Internet Explorer
Opera
Safari

My Personal Notes

Related Articles