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

Question

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

How can I get the href attribute of this link tag without using the javascript library?

I am now using the code below to achieve this, but I want to know if there is a simpler solution.

 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; } } 

Answer 1

Modern browsers support querySelector () and querySelectorAll () :

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

See the browser support chart .

Answer 2

Source:

 <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; } } 

• The markup above is a link , not a link tag .

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

  In a web browser, which is the host environment, there can be no "pure javascript". Even document refers to an object (-provided) that is not part of any core language ( ECMAScript Language Specification, 5.1 Edition [ECMA-262-5.1] , section 4).

• Always declare your identifiers ( i not declared). Without declaring them and thereby not attaching them to the execution context, it has side effects ranging from leaks to calls to runtime contexts for runtime errors. Therefore, such code does not run in ECMAScript Ed. 5.x, it throws a ReferenceError exception (ECMA-262-5.1, sections 12.6.4 and 8.7.2).

• Never use a for - in statement with objects similar to an array, in particular outside of testing not with host objects ( links refers to one). Neither numeric property names nor iteration order are taken into account (ECMA-262-5.1, section 12.6.4).

• DRY : Avoid accessing the same property twice (you access links[i] twice). Otherwise, the result will be a great option in the program (the object may change at the same time), and this approach will be ineffective and more difficult to maintain unnecessarily.

• Avoid calling the getAttribute() and setAttribute() methods of getAttribute() objects in favor of accessing attribute properties that have getters and seters . The first of them are less compatible with feedback and, as you know, 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; } } 

• Use the id attribute and the document.getElementById() method if you want to quickly reference an element (but can also use the collections provided by the host):

   <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; 

• Do not use XHTML (syntax) if you do not need to (remove the trailing slash if it is still valid, see W3C Validator ). In particular, with link elements that should be located inside the HEAD element, this is a syntax error in HTML prior to version 4.01, which is not standardized to fix . HTML5 points it out , but it is still a working draft, and not yet fully implemented in user agents .

• People who satisfy themselves only with a “wine browser” do not have enough professional experience (see, for example, Countdown Internet Explorer 6, Microsoft , which still shows a large number of [currently 25.1%] IE 6 users on emerging markets). It will be very useful for you to ignore the first group on this topic.

Answer 3

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

Answer 4

You can use jQuery:

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