Open In App

HTML DOM Base Object

Improve
Improve
Like Article
Like
Save
Share
Report

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. 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <base id="Geek_Base" href=
    <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. 
 

html




<!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. 
 

html




<!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: 
     

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


Last Updated : 07 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads