The anchor object represents the <a> HTML elements (used for links).
In addition to the properties and methods specific to html elements (presented at: //coursesweb.net/javascript/properties-methods-html-elements ), the anchor object contains its own properties, useful for working with URL addresses (links added in <a> tags).


Properties of the anchor object

The properties of the anchor object are similar to those of the navigator object, but they sre applied to the <a> elements in JavaScrip.

download - returns or sets the value of the 'download' attribute from a link.
- This attribute indicates that the link is for download, the resource will be downloaded when the link is pressed.
<p>Example link with download attribute.<br>
 - When you click on the following link, the resource from URL in 'href' will be downloaded.</p>
 <a href='/imgs/smile_gift.png' title='Image' id='lnk1' download='Smile'><img src='/imgs/smile_gift.png' alt='Smile' width='40' height='35'> Link image</a>
<p>When you click on the following button, it adds in #resp the value of the download attribute.</p>
 <button id='btn1'>Attr download</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var dwl = document.getElementById('lnk1').download;
 document.getElementById('resp').innerHTML = dwl;
});
</script>
hash - sets or returns the anchor part of the href attribute value (the string after #).
<p>Example #hash.<br>
 <a href='/javascript/properties-methods-html-elements#hshmoh' title='Metods for html objects' id='lnk1'>/javascript/properties-methods-html-elements#hshmoh</a>
</p>
<p>The 'hash' part from the link above: <em id='resp'>hash</em></p>

<script>
var hash = document.getElementById('lnk1').hash;
document.getElementById('resp').innerHTML = hash;
</script>
host - sets or returns the hostname and port part of the href attribute value.
<p>Example link.host<br>
 <a href='https://coursesweb.net/javascript' title='JavaScript Course' id='lnk1'>https://coursesweb.net/javascript</a>
</p>
<p>The 'host' property contains: <em id='resp'>host</em></p>

<script>
var host = document.getElementById('lnk1').host;
document.getElementById('resp').innerHTML = host;
</script>
hostname - sets or returns the hostname part of the href attribute value.
<p>Example link.hostname<br>
 <a href='https://coursesweb.net/html' title='HTML Course' id='lnk1'>https://coursesweb.net/html</a>
</p>
<p>The 'hostname' property contains: <em id='resp'>host</em></p>

<script>
var hostn = document.getElementById('lnk1').hostname;
document.getElementById('resp').innerHTML = hostn;
</script>
href - sets or returns the value of the href attribute of a link.
<p>Example link.href<br>
 <a href='//coursesweb.net/javascript' title='JavaScrip Course' id='lnk1'>Test Link</a>
</p>
<p>When you click the following button, it adds at #resp the value from 'href', then adds another address.<br>
 - The second click on the button it displays the new address.</p>
 <button id='btn1'>Attr href</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.href;
 lnk.href ='//gamv.eu/';
});
</script>
origin - contains the protocol, hostname and port part of the href attribute value.
<p>Example link.origin<br>
 <a href='https://coursesweb.net/javascript' title='JavaScrip Course' id='lnk1'>https://coursesweb.net/javascript</a>
</p>
<p>The origin property contains: <em id='resp'>origin</em></p>

<script>
var org = document.getElementById('lnk1').origin;
document.getElementById('resp').innerHTML = org;
</script>
password - sets or returns the password part of the href attribute value.
<p>Example link.password<br>
 <a href='//user_name:pass@coursesweb.net/ajax' title='Ajax Course' id='lnk1'>//user_name:pass@coursesweb.net/ajax</a>
</p>
<p>When you click the following button, it adds at #resp the value from 'password', then it adds another password.<br>
 - The second click on the button it displays the new password.</p>
 <button id='btn1'>password</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.password;
 lnk.password ='another-pass';
});
</script>
pathname - sets or returns the pathname part of the href attribute value (the string after domain name).
<p>Example pathname.<br>
 <a href='//coursesweb.net/javascript/javascript-syntax' title='JS Syntaxa' id='lnk1'>coursesweb.net/javascript/javascript-syntax</a>
</p>
<p>When you click the following button, it adds at #resp the value of the 'pathname' property, then it sets another 'pathname'.<br>
 - The second click on the button it displays the new address.</p>
 <button id='btn1'>pathname</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.pathname;
 lnk.pathname ='/javascript/strings';
});
</script>
port - sets or returns the port part of the link address.
<p>Example link.port<br>
 <a href='https://coursesweb.net:4097/html' title='HTML Course' id='lnk1'>https://coursesweb.net:4097/html</a>
</p>
<p>The 'port' property contains: <em id='resp'>port</em></p>

<script>
var port = document.getElementById('lnk1').port;
document.getElementById('resp').innerHTML = port;
</script>
protocol - sets or returns the protocol part of the href attribute value.
<p>Example protocol.<br>
 <a href='https://coursesweb.net/javascript' title='JavaScrip Course' id='lnk1'>https://coursesweb.net/javascript</a>
</p>
<p>The protocol property contains: <em id='resp'>protocol</em></p>

<script>
var protocol = document.getElementById('lnk1').protocol;
document.getElementById('resp').innerHTML = protocol;
</script>
referrerPolicy - returns or sets the value of the referrerpolicy. You can set the following values:
- no-referrer - HTTP referrer header will not be sent.
- origin - the referrer is the page origin (protocol, domein and port).
- unsafe-url - the referrer will contains the page origin and the 'pathname'.
<p>Example referrerPolicy.<br>
 <a href='//coursesweb.net/html/hyperlinks-links' title='Creating links' id='lnk1' referrerpolicy='origin'>Link with referrerpolicy attribute</a>
</p>
<p>When you click the following button, it adds at #resp the value of the 'referrerPolicy', then it sets another value.<br>
 - The second click on the button it shows the added value.</p>
 <button id='btn1'>referrerPolicy</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.referrerPolicy;
 lnk.referrerPolicy ='no-referrer';
});
</script>
rel - sets or returns the value of the rel attribute of a link.
<p>Example link.rel<br>
 <a href='//coursesweb.net/html/hyperlinks-links' title='Creating links' id='lnk1' rel='nofollow'>Link with rel attribute</a>
</p>
<p>When you click the following button, it adds at #resp the value of the 'rel' attribute, then it sets another value.<br>
 - The second click on the button it shows the added value.</p>
 <button id='btn1'>Sets rel</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.rel;
 lnk.rel ='follow';
});
</script>
search - sets or returns the querystring part of the href attribute value (the parameters after '?', including '?').
<p>Example link.search<br>
 <a href='//coursesweb.net/stay-quiet.htm?id=1&pg=page' title='Stay quiet' id='lnk1'>coursesweb.net/stay-quiet.htm?id=1&pg=page</a>
</p>
<p>The search property contains: <em id='resp'>search</em></p>

<script>
var src = document.getElementById('lnk1').search;
document.getElementById('resp').innerHTML = src;
</script>
target - sets or returns the value of the target attribute of a link.
<p>Example link.target<br>
 <a href='//coursesweb.net/css' title='css course' target='_blank' id='lnk1'>CSS Course</a>
</p>
<p>The target property contains the value: <em id='resp'>target</em></p>

<script>
var target = document.getElementById('lnk1').target;
document.getElementById('resp').innerHTML = target;
</script>
title - returns or sets the value of the 'title' attribute.
<p>Example link.title<br>
 <a href='//coursesweb.net/stay-quiet.htm' title='Peace is Good. Stay quiet' id='lnk1'>Test link</a>
</p>
<p>The title property contains: <em id='resp'>title</em></p>

<script>
var title = document.getElementById('lnk1').title;
document.getElementById('resp').innerHTML = title;
</script>
text - sets or returns the text content of a link.
<p>Example link.text.<br>
 <a href='//coursesweb.net/html/hyperlinks-links' title='Creating links' id='lnk1'>coursesweb.net/html/hyperlinks-links</a>
</p>
<p>When you click the following button, it adds at #resp the text content of the link, then it sets the text with the value from 'title'.<br>
 - The second click on the button it shows the added text.</p>
 <button id='btn1'>Sets link text</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.text;
 lnk.text = lnk.title;
});
</script>
username - sets or returns the username part of the href attribute value.
<p>Example link.username<br>
 <a href='//user_name:pass@coursesweb.net/ajax' title='Ajax Course' id='lnk1'>//user_name:pass@coursesweb.net/ajax</a>
</p>
<p>When you click the following button, it adds at #resp the value from 'username', then it adds another name.<br>
 - The second click on the button it shows the added name.</p>
 <button id='btn1'>username</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk = document.getElementById('lnk1');
 document.getElementById('resp').innerHTML = lnk.username;
 lnk.username ='alt_nume';
});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Click on the HTML tag which creates an horizontal line in web page.
<br /> <em> <hr />
Some content ...
<hr />
Content under line ...
Which CSS property defines the text color?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Click on the function which searches if a character, or text exists in a string.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// isn`t in string");
else alert("http:// is in string");
Which function splits a string into an array of strings based on a separator?
array_merge() explode() implode()
$str = "apple,banana,melon,pear";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"apple", 1=>"banana", 2=>"melon", 3=>"pear")
anchor and link object

Last accessed pages

  1. Sending Email, Mailables (240)
  2. Define Custom List-item Markers, Bullets for UL, OL Lists (3680)
  3. SHA256 Encrypt hash in JavaScript (7023)
  4. Input text fields (2285)
  5. Insert, Select and Update NULL value in MySQL (30219)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (515)
  2. Read Excel file data in PHP - PhpExcelReader (430)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (319)
  4. PHP getElementById and getElementsByTagName (255)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (234)