HTML DOM Base Object: Accessing and Manipulating Base Elements
The HTML <base> element specifies the base URL for all relative URLs in a document. This is useful when you have resources like images, stylesheets, or scripts located in different directories from your HTML file. The HTML DOM provides the base object, which allows you to access and modify the properties of the <base> element using JavaScript. This article will guide you through the usage of the base object, demonstrating how to access and manipulate <base> elements dynamically.
What is the <base> element?
The <base> element is an HTML element that defines the base URL for all relative URLs within a document. It is typically placed within the <head> section of an HTML document. When browsers encounter a relative URL in an HTML document, they resolve that URL against the base URL defined by the <base> element. If there is no <base> element, the base URL defaults to the URL of the HTML document itself.
Purpose of the HTML DOM base Object
The HTML DOM base object allows JavaScript to:
- Access the
hrefattribute of the<base>element. - Access the
targetattribute of the<base>element. - Modify the
hrefandtargetattributes, dynamically changing the base URL and default browsing context of the document. - Create and insert a new
<base>element programmatically. - Remove the
<base>element, potentially reverting to the document URL as the base URL.
Accessing Base Elements
To access a <base> element in the DOM, you typically use the document.querySelector() or document.getElementsByTagName() methods:
<!DOCTYPE html>
<html>
<head>
<title>Base Element Example</title>
<base id="myBase" href="https://example.com/" target="_blank">
</head>
<body>
<p>This is a sample page.</p>
<a href="/about">About Us</a>
<script>
const baseElement_1 = document.getElementById("myBase");
console.log("Base Href:", baseElement_1.href);
console.log("Base Target:", baseElement_1.target);
</script>
</body>
</html>
In the above example, we retrieve the base element using document.getElementById('myBase') and log its href and target properties to the console.
Output:
Base Href: https://example.com/
Base Target: _blank
Base Object Properties
The HTML DOM base object has the following key properties:
| Property | Type | Description |
|---|---|---|
| `href` | String | Gets or sets the base URL for all relative URLs in the document. |
| `target` | String | Gets or sets the default browsing context (e.g., `_blank`, `_self`, `_parent`, `_top`) for all hyperlinks in the document. |
| `id` | String | Gets or sets the unique id of the base element. |
| `tagName` | String | Returns the tag name of the element, which is always “BASE”. |
| `attributes` | NamedNodeMap | Returns a live collection of all attributes of the element, including `href`, `target` and `id`. |
Examples
Let’s explore some practical examples of using the HTML DOM base object to modify the base element.
Modifying Base URL
Here’s how to change the base URL of a document dynamically:
<!DOCTYPE html>
<html>
<head>
<title>Modify Base URL</title>
<base id="myBase2" href="https://old-example.com/">
</head>
<body>
<p>Current Base URL: <span id="currentBase2"></span></p>
<button onclick="changeBaseUrl2()">Change Base URL</button>
<script>
const baseElement_2 = document.getElementById("myBase2");
const currentBaseSpan_2 = document.getElementById("currentBase2");
currentBaseSpan_2.textContent = baseElement_2.href;
function changeBaseUrl2() {
baseElement_2.href = "https://new-example.com/";
currentBaseSpan_2.textContent = baseElement_2.href;
}
</script>
</body>
</html>
In this example, the changeBaseUrl2() function updates the base URL to https://new-example.com/. Clicking the button dynamically updates the current base URL displayed on the page.
Modifying the Default Target
This example demonstrates how to modify the default browsing context of all hyperlinks using the target property:
<!DOCTYPE html>
<html>
<head>
<title>Modify Base Target</title>
<base id="myBase3" href="/" target="_self">
</head>
<body>
<p>Current Target: <span id="currentBaseTarget3"></span></p>
<button onclick="changeBaseTarget3()">Change Target to _blank</button>
<br>
<a href="/about">About Us</a>
<script>
const baseElement_3 = document.getElementById("myBase3");
const currentBaseTargetSpan_3 = document.getElementById("currentBaseTarget3");
currentBaseTargetSpan_3.textContent = baseElement_3.target;
function changeBaseTarget3() {
baseElement_3.target = "_blank";
currentBaseTargetSpan_3.textContent = baseElement_3.target;
}
</script>
</body>
</html>
Here, clicking the button changes the default target of links from _self to _blank, causing all links to open in a new tab or window.
Dynamically Creating and Appending a Base Element
This example demonstrates how to dynamically create and add a <base> element to the document’s <head>:
<!DOCTYPE html>
<html>
<head>
<title>Add Base Dynamically</title>
</head>
<body>
<p id="baseStatus4">No Base Element Yet</p>
<button onclick="addBase4()">Add Base Element</button>
<script>
function addBase4() {
const headElement_4 = document.getElementsByTagName('head')[0];
const newBase_4 = document.createElement('base');
newBase_4.href = 'https://dynamic-base.com/';
newBase_4.target = "_blank";
headElement_4.appendChild(newBase_4);
document.getElementById('baseStatus4').textContent = "Base Element Added with href: https://dynamic-base.com/ and target:_blank";
}
</script>
</body>
</html>
In this example, clicking the button creates a new base element with specified href and target and appends it to the <head> section, dynamically altering how relative URLs and links are handled.
Removing Base Element
This example shows how to remove base element from the document header:
<!DOCTYPE html>
<html>
<head>
<title>Remove Base Dynamically</title>
<base id="myBase5" href="https://remove-base.com/" target="_blank">
</head>
<body>
<p id="baseStatus5">Base Element exists.</p>
<button onclick="removeBase5()">Remove Base Element</button>
<script>
const baseElement_5 = document.getElementById('myBase5');
function removeBase5() {
if (baseElement_5) {
baseElement_5.parentNode.removeChild(baseElement_5);
document.getElementById('baseStatus5').textContent = "Base element removed";
} else {
document.getElementById('baseStatus5').textContent = "No base element to remove";
}
}
</script>
</body>
</html>
This example shows how to remove the <base> element dynamically, potentially reverting to the default base URL of the document itself.
Real-World Use Cases
The base object is useful in various scenarios:
- Dynamic Content Loading: Change base URL for loading content from different sources without modifying all URLs.
- Single-Page Applications (SPAs): Set a base URL for consistent navigation within the SPA.
- Content Management Systems (CMS): Set different base URLs based on the context of the content being displayed.
- Theming: Set different base URLs for resources based on the theme being applied.
Browser Support
The <base> element and its corresponding DOM object are supported by all modern web browsers.
Note: While widely supported, always test your code across different browsers to ensure consistent behavior. 🧐
Conclusion
The HTML DOM base object provides essential functionality for controlling the base URL and default browsing context of a document dynamically. By understanding how to access and manipulate the <base> element using JavaScript, you gain fine-grained control over how your web page handles URLs, contributing to more flexible, robust, and dynamic web applications. This article has provided you with a comprehensive guide to using the base object, including practical examples and real-world use cases. Happy coding!
“`
