Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Anchor target Property
The HTML DOM anchor target property specifies where to open the linked document when a user clicks on an anchor element. This property corresponds to the target attribute in HTML and can be accessed or modified using JavaScript.
The target property can have the following values −
- _blank − Opens the linked document in a new window or tab.
- _self − Opens the linked document in the same frame (this is the default).
- _parent − Opens the linked document in the parent frame.
- _top − Opens the linked document in the full body of the window.
- framename − Opens the linked document in the named frame.
Syntax
Following is the syntax for returning the target property −
anchorObject.target
Following is the syntax for setting the target property −
anchorObject.target = "_blank|_self|_parent|_top|framename"
Return Value
The target property returns a string that specifies where to open the linked document. If no target attribute is specified, it returns an empty string.
Example − Getting Target Property
Following example demonstrates how to get the target property value from an anchor element −
<!DOCTYPE html>
<html>
<head>
<title>Anchor Target Property - Get Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Get Target Property Example</h2>
<p><a id="myAnchor" target="_blank" href="https://www.tutorialspoint.com">TutorialsPoint</a></p>
<button onclick="getTarget()">Get Target Value</button>
<p id="result"></p>
<script>
function getTarget() {
var anchor = document.getElementById("myAnchor");
var targetValue = anchor.target;
document.getElementById("result").innerHTML = "Target value: " + targetValue;
}
</script>
</body>
</html>
The output of the above code is −
Get Target Property Example TutorialsPoint (link) [Get Target Value] After clicking the button: Target value: _blank
Example − Setting Target Property
Following example shows how to set the target property dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Anchor Target Property - Set Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Set Target Property Example</h2>
<p><a id="myLink" href="https://www.tutorialspoint.com">TutorialsPoint</a></p>
<button onclick="setBlank()">Open in New Tab</button>
<button onclick="setSelf()">Open in Same Tab</button>
<p id="status">Current target: (not set)</p>
<script>
function setBlank() {
var link = document.getElementById("myLink");
link.target = "_blank";
document.getElementById("status").innerHTML = "Current target: _blank";
}
function setSelf() {
var link = document.getElementById("myLink");
link.target = "_self";
document.getElementById("status").innerHTML = "Current target: _self";
}
</script>
</body>
</html>
The output of the above code is −
Set Target Property Example TutorialsPoint (link) [Open in New Tab] [Open in Same Tab] Current target: (not set) After clicking "Open in New Tab": Current target: _blank
Example − Complete Target Property Demo
Following example demonstrates both getting and setting the target property with multiple links −
<!DOCTYPE html>
<html>
<head>
<title>Complete Target Property Demo</title>
<style>
.link-container { margin: 10px 0; padding: 5px; border: 1px solid #ccc; }
button { margin: 5px; padding: 5px 10px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Target Property Complete Demo</h2>
<div class="link-container">
<p>Link 1: <a id="link1" target="_self" href="https://www.tutorialspoint.com">TutorialsPoint (Same Tab)</a></p>
</div>
<div class="link-container">
<p>Link 2: <a id="link2" href="https://www.w3schools.com">W3Schools (No Target Set)</a></p>
</div>
<button onclick="getTargets()">Get All Targets</button>
<button onclick="setAllBlank()">Set All to _blank</button>
<button onclick="setAllSelf()">Set All to _self</button>
<div id="output"></div>
<script>
function getTargets() {
var link1 = document.getElementById("link1").target || "(not set)";
var link2 = document.getElementById("link2").target || "(not set)";
document.getElementById("output").innerHTML =
"<p><strong>Current Targets:</strong></p>" +
"<p>Link 1: " + link1 + "</p>" +
"<p>Link 2: " + link2 + "</p>";
}
function setAllBlank() {
document.getElementById("link1").target = "_blank";
document.getElementById("link2").target = "_blank";
document.getElementById("output").innerHTML =
"<p style='color: green;'>All links set to open in new tab (_blank)</p>";
}
function setAllSelf() {
document.getElementById("link1").target = "_self";
document.getElementById("link2").target = "_self";
document.getElementById("output").innerHTML =
"<p style='color: blue;'>All links set to open in same tab (_self)</p>";
}
</script>
</body>
</html>
This example shows how to manage multiple links and their target properties dynamically.
Browser Compatibility
The anchor target property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the HTML standard since early versions and provides consistent behavior across different platforms.
Common Use Cases
The target property is commonly used in the following scenarios −
-
External links − Setting
target="_blank"for links to external websites to keep users on your site. - PDF documents − Opening PDF files in new tabs to allow users to easily return to the original page.
- Frame navigation − Controlling which frame displays the linked content in frameset layouts.
- Dynamic behavior − Changing link behavior based on user preferences or application state.
Conclusion
The HTML DOM anchor target property provides a simple way to control where linked documents open. It can be both retrieved and modified using JavaScript, making it useful for creating dynamic navigation behavior. The most common values are _blank for new tabs and _self for the current window.
388 Views
