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 tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
anchor and link object

Last accessed pages

  1. Multiple Select Dropdown List with AJAX (16370)
  2. Read Excel file data in PHP - PhpExcelReader (69213)
  3. AJAX with POST and PHP (13049)
  4. PHP MySQL - WHERE and LIKE (20781)
  5. PHP MySQL - INSERT INTO (12050)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2005)
  2. Tabs effect with CSS (1954)
  3. Contact page - CoursesWeb (1951)
  4. Insert, Select and Update NULL value in MySQL (1012)
  5. PHP getElementById and getElementsByTagName (596)