HTML | DOM Base href Property

The DOM Base href Property in HTML DOM is used to set or return the value of the href attribute of a <base> element. The href attribute is used to specify the base URL for all the relative URL in the webpage.

Syntax:

  • It returns the href property.
    baseObject.href
  • It is used to set the href property.
    baseObject.href = URL
  • Property Values: It contains the value i.e URL which specifies the base URL of a webpage.

    Return Value: It returns a string value which represents the base URL of the webpage including the name of the protocol.

    Example:This Example returns the href Property.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <base id="Geek_Base" 
              href="https://www.geeksforgeeks.org">
        <title>
            HTML | DOM Base href Property
        </title>
    </head>
      
    <body style="text-align:center;">
      
        <h1 style="color:green;"
                GeeksForGeeks 
            </h1>
      
        <h2>
          HTML | DOM Base href Property
      </h2>
      
        <button onclick="myGeeks()">
            Click
        </button>
        <h4><p id="Geek_p" 
               style="color:green;
                      font-size:24px;">
          </p>
      </h4>
      
        <script>
            function myGeeks() {
      
                // returninh the href Propertyt. 
                var x =
                    document.getElementById(
                        "Geek_Base").href;
      
                document.getElementById(
                    "Geek_p").innerHTML = x;
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Before Clicking On Button :

    After Clicking On Button :

    Example-2 : This Example sets the href Property.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <base id="Geek_Base"
              href="https://www.geeksforgeeks.org">
        <title>
            HTML | DOM Base href Property
        </title>
    </head>
      
    <body style="text-align:center;">
      
        <h1 style="color:green;"
                GeeksForGeeks 
            </h1>
      
        <h2>
          HTML | DOM Base href Property
      </h2>
      
        <button onclick="myGeeks()">
            Click
        </button>
        <h4><p id="Geek_p"
               style="color:green;
                      font-size:24px;">
          </p>
      </h4>
      
        <script>
            function myGeeks() {
      
                // returninh the href Propertyt. 
                var x =
                    document.getElementById(
                    "Geek_Base").href = "https://www.finecomb.com/";
      
                document.getElementById(
                    "Geek_p").innerHTML = 
                "the value of the href attribute was changed to " + x;
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

    Output :
    Before Clicking On Button:

    After Clicking On Button:

    Supported Browsers: The browser supported by DOM base href property are listed below:

    • Google Chrome
    • Internet Explorer 10.0 +
    • Firefox
    • Opera
    • Safari


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



    Improved By : shubham_singh



    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.