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
Share your thoughts in the comments
Please Login to comment...