HTML DOM Base target Property

The HTML DOM Base target property is associated with the HTML <base> element. It is used to set or return the value of the target attribute of the <base> element. The target attribute is used to specify where the hyperlink will open. It can open in the page itself or in a new page.

Properties

Following are the values for the target properties −

Property Values	Description
_blank	To open link in new window.
_self	To open link in the same frame in which it was clicked. It I the default behaviour.
_parent	To open link in the parent frameset.
_top	To open link in the fully body of the window.
framename	To open link in the specified frame name.

Syntax

Following is the syntax for −

Returning the target property −

baseObject.target

Setting the target property −

baseObject.target = "_blank|_self|_parent|_top|framename"

Example

Let us see an example for HTML DOM target property −

<!DOCTYPE html>
<html>
<head>
<base id="Base" target="newframe1" href="https://www.example.com">
</head>
<body>
<p>Click the below button to get the target attribute value</p>
<button onclick="getTarget()">GET TARGET</button>
<p>Click the below button to set the target attribute value</p>
<button onclick="setTarget()">SET TARGET</button>
<p id="Sample"></p>
<script>
   function getTarget() {
      var x = document.getElementById("Base").target;
      document.getElementById("Sample").innerHTML = "Base target for all links is: " + x;
   }
   function setTarget(){
      document.getElementById("Base").target="_blank"
      document.getElementById("Sample").innerHTML="Target has been changed from
      newframe1 to _blank"
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Base target Property

On clicking GET TARGET −

HTML DOM Base target Property

On clicking SET TARGET −

HTML DOM Base target Property

In the above example −

We have first created two buttons GET TARGET and SET TARGET to execute functions getTarget() and setTarget() respectively −

<button onclick="getTarget()">GET TARGET</button>
<button onclick="setTarget()">SET TARGET</button>

The getTarget() function gets the element with id “Base” which is the <base> element in our case. The base element target property is assigned to a variable x. The target property value is then displayed in the paragraph with id “Sample” using the innerHTML() property.

function getTarget() {
   var x = document.getElementById("Base").target;
   document.getElementById("Sample").innerHTML = "Base target for all links is: " + x;
}

The setTarget() function gets the element with id “Base” which is the <base> element in our case. The target property of the <base> element is then set to “_blank” meaning it will open in new tab. The “Target has been changed from newframe1 to _blank” is then displayed in the paragraph with id “Sample” associated with it.