How to get attribute from a <link tag in pure javascript?

Question

How can I ge

Answer 1

You could use JQuery:

var url = $('link[rel=canonical]').attr("href");

Answer 2

Yes, by giving an ID tag. http://jsfiddle.net/Lc7ut/

Answer 3

Modern browsers support querySelector() and querySelectorAll():

document.querySelector("link[title=RSD]").getAttribute("href");

See browser support chart.

Answer 4

Original code:

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=7487871339000666216" />

…

var links = document.getElementsByTagName("link");
for (i in links){
  var title = links[i].getAttribute("title");
  if ( title == "RSD"){
    var href = links[i].getAttribute("href");
    break;
  }
}

1. The markup above is a link element, not a "link tag".

2. There is no "javascript", there are several different ECMAScript implementations. The term "javascript" is misleading and should not be used as an umbrella term for those programming languages.

   There cannot be "pure javascript" in a Web browser, which is a host environment. Even document refers to a host(-provided) object, which is not part of any core language (ECMAScript Language Specification, 5.1 Edition [ECMA-262-5.1], section 4).

3. Always declare your identifiers (i is undeclared). Not declaring them, and thereby not attaching them to an execution context, has side-effects ranging from leaks into calling execution contexts to runtime errors. Therefore, such code does not run in ECMAScript Ed. 5.x strict mode, it throws a ReferenceError exception (ECMA-262-5.1, sections 12.6.4 and 8.7.2).

4. Never use the for-in statement with array-like objects, in particular outside of testing not with host objects (links refers to one). Neither consideration of only numeric property names nor iteration order is guaranteed (ECMA-262-5.1, section 12.6.4).

5. DRY: Avoid accessing the same property twice (you are accessing links[i] twice). Else the result would be a greater variant in the program (the object may have changed in the meantime), and the approach would be inefficient and harder to maintain, unnecessarily.

6. Avoid calling the getAttribute() and setAttribute() methods of element objects in favor of accessing attribute properties that have getters and setters. The former are less backwards-compatible and known to be unreliable, in particular in MSHTML/IE where there is no proper distinction between attribute values and attribute property values.

   var links = document.getElementsByTagName("link");
   for (var i = 0, len = links && links.length; i < len; ++i)
   {
     var link = links[i];
     if (link.title == "RSD")
     {
       var href = link.href;
       break;
     }
   }
   

7. Use the id attribute and the document.getElementById() method if you want to refer an element quickly (but also consider using host-provided collections):

   <link rel="EditURI" type="application/rsd+xml" title="RSD"
         href="http://www.blogger.com/rsd.g?blogID=7487871339000666216"
         id="mylink" />
   

   ...

   var link = document.getElementById("mylink");
   var href = link && link.href;
   

8. Do not use XHTML (syntax) unless you have to (remove the trailing slash if it is still Valid, see the W3C Validator). With LINK elements in particular, which must be located within the HEAD element, it is a syntax error in HTML up to version 4.01 that has no standardized remedy. HTML5 specifies it but that is still a Working Draft, and not yet fully implemented in user agents.

9. People who satisfy themselves with saying only "screw $browser" have not had sufficient professional experience (see for example The Internet Explorer 6 Countdown, by Microsoft, which is still showing a large number [currently 25.1%] of IE 6 users in emerging markets). You would be well-advised to ignore the former group on this topic.