What is HTML DOM Element Base href Property in JavaScript

HTML “base” element specifies the document base URL in the “href” attribute that is used for accessing all the included URLs in the document. The “Base URL” is the domain part of the website address i.e., http://www.YourDomain.com. The remaining path after it such as “/home”, or “/contact_us” are relative URLs. JavaScript provides the built-in “href” property to access and return the base element “href” attribute.

This guide provides a detailed view of the HTML DOM Element Base “href” property in JavaScript.

What is HTML DOM Element Base “href” Property in JavaScript?

The base “href” property sets and returns the “<base>” element “href” attribute value. The “href” attribute i.e., similar entity, however, specifies the link’s destination for all the relative URLs in the webpage.

Syntax (Set the “href” Property)

In the above syntax:

• baseObject: Refers to the HTML “<base>” element.
• URL: Corresponds to the base URL of the document.

Syntax (Return the “href” Property)

This syntax returns the string value that is the “base URL” of the webpage defined in the base href attribute.

Let’s use the above-defined syntaxes practically.

HTML Code

First, start with the HTML code:

In the above code snippet:

• The “<base>” tag in the “head” section adds a base element with an assigned id “myBase” that specifies the “base URL” using the “href” attribute.
• After that in the body section, the “<h2>” tag specifies the subheading.
• The “<button>” tag creates a button with an attached “onclick” event to execute the function “myFunc()” at a button click.
• Lastly, the “<p>” tag adds an empty paragraph having the id “demo” to display the base element’s href attribute value.

Note: The above HTML code is followed in all examples of this guide.

Example 1: Applying the Base “href” Property to Return the Value of the Base Element’s href Attribute

This example applies the “href” property to retrieve the given base element href attribute value. 

JavaScript Code

Consider the given JavaScript code:

In the above code lines:

• The function named “myFunc()” is defined.
• In its definition, the declared variable “t” utilizes the “getElementById()” method to access the given base element through its id “myBase” and applies the “href” property on it.
• The “getElementById()” method is applied again to access the empty paragraph having the id “demo” to display the returned value of the base href property.

Output

Here, the “href” attribute value i.e., “base URL” displays upon the button click.

Example 2: Applying the Base “href” Property to Change the Value of the Base Element’s href Attribute

This example utilizes the “href” property to change the existing base element’s href attribute value:

Here, the “getElementById()” method is applied with the associated “href” property that sets the new value of the base href attribute and then displays it in the appended empty paragraph.

Output

The output changes the value of the base element’s href attribute upon the button click accordingly.

 Conclusion

JavaScript comes with a special DOM Base “href” property that allows the users to access and modify the base element href attribute value i.e., “base URL”. It follows simple and basic syntaxes to perform this task. It also helps to identify the root of the hyperlink. This guide provided a brief description of the HTML DOM element Base “href” property in JavaScript.