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.
<!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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
Output:
- Before click on the button:
- After click on the button:
Output:
- Google Chrome
- Mozilla Firefox
- Edge
- Safari
- Opera
Recommended Posts:
- HTML | base Tag
- HTML | <base> target Attribute
- HTML | DOM Base href Property
- HTML | <base> href Attribute
- HTML | DOM Base target Property
- HTML | DOM Object Object
- HTML | DOM Kbd Object
- HTML | DOM DD Object
- HTML | DOM Bdo Object
- HTML | DOM Ul Object
- HTML | DOM S Object
- HTML DOM Aside Object
- HTML | DOM Div Object
- HTML | DOM li Object
- HTML| DOM Ins Object
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.
