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