Parse attributes of RSS feed with jquery

Question

I'm in the process of parsing the rss feed from a tumblr blog onto my website. What I'm try to do is using jQuery to parse some specfic information from the feed. Here's a snippet below:

<rss xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0">
<channel>
<atom:link xmlns:atom="http://www.w3.org/2005/Atom" rel="hub" href="http://tumblr.superfeedr.com/"/>
[lots of stuff]
</channel>
</rss>

Now, what I'd like to do is get href="http://tumblr.superfeedr.com/" from the feed since this will help me to confirm that the feed is actually from a tumblr blog.

The problem, however is that I'm a bit stuck with regards to how to do it. I've been trying to use the following:

$.get(blogUrl, 
function(data) {
    var xml = $(data);          
    var foo = xml.find('atom:link').attr('href');
    alert("link href=" + foo);
});

Where blogUrl is the url of the rss feed in question. I've tried numerous variation on this - so many so that I've started going in circles - so I thought I'd ask here. I've tried changing 'atom:link' to 'atom\:link' and adding '.text()' to the end of the find command, but with no luck. I can also get the full text of the entire channel except for the atom:link data at the start, which is close but not right either!

So, how can I get the information that I'm after? All of the code guides and previous questions I've seen focus on iterating through multiple repeated items in an rss feed (which of course makes sense since that's what you're supposed to do with rss feeds), but I'm just trying to confirm the selected feed is the right type of feed that is expected.

Thanks!

UPDATE: Thanks to the help below from Jasd, I was able to get this working. Here's the updated code.

$.get(blogUrl, 
    function(data) {    
        var doc = data.getElementsByTagNameNS("http://www.w3.org/2005/Atom", "link")[0];
        var href = dic.getAttribute("href");
    }

score 1 · Accepted Answer · edited May 23 '17 at 11:48

Because a colon separated tag name like atom:link refers to a tag defined in a different namespace (atom is the namespace) you can't query it without namespace. You additionally have to provide the URL of the namespace in which you are looking for the tag.

This is how it works in Chrome (and I think in all other browsers except IE) (error-checks omitted for brevity):

var xmlString = "<rss...>...</rss>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
var elem = doc.getElementsByTagNameNS("http://www.w3.org/2005/Atom", "link")[0];
var href = elem.getAttribute("href");

I don't know if jQuery offers a functionality which abstracts from this to work on all browsers. If not, use ActiveXObject instead of DOMParser in IE (see also XML parsing of a variable string in JavaScript).

UPDATE: When using jQuery you can use $(doc).find("atom\\:link").attr("href") for querying tags with namespaces (see http://www.rfk.id.au/blog/entry/xmlns-selectors-jquery/ for more details and a jQuery plugin which should make querying elements with namespaces even easier).

Thanks! This looks great - but unfortunately, I can't seem to get it to behave. Within the callback function for the $.get, the function receives "data", and when I use console.log(data), it comes up as a #document object which I can then browse correctly. However, when I try to use DOMParser() it then refuses to do anything and claims that the "document is empty". I'm thinking that I need to change the #document object that comes back to something more in line with what DOMParser is expecting - any thoughts? — plone, Jan 05 '13 at 14:55
Actually, scratch that - your approach worked! I'll update the code above to reflect what I did. Thanks again, you rock :D — plone, Jan 05 '13 at 15:09

Parse attributes of RSS feed with jquery

1 Answers1