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:
Example 1: Returning href value of base element.
html
<!DOCTYPE html> < html > < head > < base id = "Geek_Base" href = "https://www.w3wiki.net" > < title > HTML DOM Base Object </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >HTML DOM Base Object</ h2 > < button onclick = "myBeginner()" > Click </ button > < h4 > < p id = "Geek_p" style = "color:green" ></ p > </ h4 > < script > function myBeginner() { // 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;" > w3wiki </ h1 > < h2 >HTML DOM Base Object</ h2 > < button onclick = "myBeginner()" > Click </ button > < h4 > < p id = "Geek_p" style = "color:green" ></ p > </ h4 > < script > function myBeginner() { 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;" > w3wiki </ h1 > < h2 >HTML | DOM Base Object</ h2 > < button onclick = "myBeginner()" > Click </ button > < h4 >< p id = "Geek_p" style = "color:green" > </ p > </ h4 > < script > function myBeginner() { 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