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