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