从锚点 (a) 标签获取本地 href 值

Question

I have an anchor tag that has a local href value, and a JavaScript function that uses the href value but directs it to a slightly different place than it would normally go. The tag looks like

<a onclick="return follow(this);" href="sec/IF00.html"></a>

and a JavaScript function that looks like

baseURL = 'http://www.someotherdomain.com/';
function follow(item) {
    location.href = baseURL + item.href;
}

I would expect that item.href would just return a short string of "sec/IF00.html", but instead it returns the full href, "http://www.thecurrentdomain.com/sec/IF00.html". Is there a way that I can pull out just the short href as put in the anchor <a> tag? Or do I lose that by natural HTML behavior?

I suppose I could use a string manipulation to do this, but it gets tricky because my local page may actually be "http://www.thecurrentdomain.com/somedir/somepath/sec/IF00.html", and my href field may or may not have a subdirectory in it (for ex href="page.html" vs. href="sub/page.html" ), so I cannot always just remove every thing before the last slash.

You may wonder why I am requesting this, and it is because it will just make the page a lot cleaner. If it is not possible to get just the short href (as put in the anchor <a> tag), then I could probably just insert an extra field into the tag, like link="sec/IF00.html" , but again, that would be a little messier.

Answer 1

The below code gets the full path, where the anchor points:

document.getElementById("aaa").href; // http://example.com/sec/IF00.html

while the one below gets the value of the href attribute:

document.getElementById("aaa").getAttribute("href"); // sec/IF00.html

Answer 2

document.getElementById("link").getAttribute("href"); If you have more than one <a> tag, for example:

 <ul> <li> <a href="1"></a> </li> <li> <a href="2"></a> </li> <li> <a href="3"></a> </li> </ul>

You can do it like this: document.getElementById("link")[0].getAttribute("href"); to access the first array of <a> tags, or depends on the condition you make.

Answer 3

This code works for me to get all links of the document

var links=document.getElementsByTagName('a'), hrefs = [];
for (var i = 0; i<links.length; i++)
{   
    hrefs.push(links[i].href);
}

Answer 4

In my case I had a href with a # and target.href was returning me the complete url. Target.hash did the work for me.

$(".test a").on('click', function(e) {
    console.log(e.target.href); // logs https://www.test.com/#test
    console.log(e.target.hash); // logs #test
  });

Answer 5

The href property sets or returns the value of the href attribute of a link.

  var hello = domains[i].getElementsByTagName('a')[0].getAttribute('href');
    var url="https://www.google.com/";
    console.log( url+hello);

Answer 6

document.getElementById("aaa").href; //for example: http://example.com/sec/IF00.html

Answer 7

Sad to see how many people gave such uncomfortable and inconvenient answers. Here is the easiest way to retrieve href:

 $("a").click(function(e){ var hash = this.hash; alert(hash); }); 

All done in just one line of code. This is flexible and doesn't rely on getting elementId like previous answers.