HTML | DOM Base Object - GeeksforGeeks

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

Recommended Posts: