HTML | DOM Base Object
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" <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:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Edge
- Safari
- Opera
Please Login to comment...