HTML DOM Area search Property

Last Updated : 22 Jun, 2023

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

Syntax:

It returns the Area search property.

 areaObject.search

It is used to set the Area search property.

areaObject.search = querystring

Property Values: It contains a single value querystring that specifies the search part of the URL.

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

Example 1: This example returns the Area search Property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Area search Property
    </title>
</head>
 
<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.
            let x = document.getElementById("Geeks").search;
            document.getElementById("GEEK!").innerHTML = x;
        }
    </script>
</body>
 
</html>

Output:

Example 2: This example sets the Area search property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Area search Property
    </title>
</head>
 
<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.
            let x = document.getElementById("Geeks").search = "abc";
            document.getElementById("GEEK!").innerHTML =
                "The querystring has been changed to " + x;
        }
    </script>
</body>
 
</html>