Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Base Object
  • Last Updated : 31 Jan, 2019

The Base Object in HTML DOM is used to represent the HTML <base> element.
This tag is used to set or get the properties of < base > element. This element can be accessed by using getElementById() method.

Syntax:

document.getElementById("Base_ID");

This “Base_ID” is assigned to HTML < base > element.

Object Properties:

  • href: Used to set or return the href attribute in base element.
  • target: Used to set or return the target attribute in a base element.

Example-1: Returning href value of base element.






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

Output:

  • Before click on the button:
  • After click on the button:

Example-2: Returning target value of base element, which is _blank in this case.




<!DOCTYPE html>
<html>
  
<head>
    <base id="Geek_Base" target="_blank">
    <title>
        HTML | DOM Base Object
    </title>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
  
    <h2>HTML | DOM Base Object</h2>
  
    <button onclick="myGeeks()">
        Click
    </button>
    <h4><p id="Geek_p" style="color:green"></p></h4>
  
    <script>
        function myGeeks() {
            var x = 
            document.getElementById(
              "Geek_Base").target;
            
            document.getElementById(
              "Geek_p").innerHTML = x;
        }
    </script>
</body>
  
</html>

Output:

  • Before click on the button:
  • After click on the button:

Example-3: Returning target value of base element.




<!DOCTYPE html>
<html>
  
<head>
    <base id="Geek_Base" 
          target="_parent">
    <title>
        HTML | DOM Base Object
    </title>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
  
    <h2>HTML | DOM Base Object</h2>
  
    <button onclick="myGeeks()">
        Click
    </button>
    <h4><p id="Geek_p" style="color:green">
      </p></h4>
  
    <script>
        function myGeeks() {
            var x = 
            document.getElementById(
              "Geek_Base").target;
            
            document.getElementById(
              "Geek_p").innerHTML = x;
        }
    </script>
</body>
  
</html>

Output:

  • Before click on the button:
  • After click on the button:

Output:

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Safari
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :