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
Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
anchor and link object

Last accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (46841)
  2. Convert XML to JSON in JavaScript (17992)
  3. Get Duration of Audio /Video file before Upload (6242)
  4. Read Excel file data in PHP - PhpExcelReader (58996)
  5. Ajax-PHP Chat Script (37151)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (524)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (451)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (329)
  4. Insert, Select and Update NULL value in MySQL (316)
  5. PHP getElementById and getElementsByTagName (307)