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).
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.
<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:
<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>
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net