getElementsByTagName Namespace Prefix Strangeness in Safari/Chrome/WebKit
by Rob Larsen
Is It Me or the Browser?
I had a Safari bug on a project I’m rushing to get out the door. We’re using a Flickr feed to populate a div with link+thumbnail to some flickr images. In Firefox/Internet Explorer I simply did the following to build the links:
flickr : function(obj) {
//get the full list of items
var items = obj.getElementsByTagName("item");
//make sure it's not empty
if (items.length > 0 ) {
//start the HTML block
var blob = "<div id='flickrFeed'>";
//loop through the items (we only want 5) and build some links)
for (var i = 0; i< 5 ; i++) {
//get the link
var flink = items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
//get the thumbnail
var flurl = items[i].getElementsByTagName("media:thumbnail")[0].getAttribute("url");
//smash them into the string
blob+="<a href='"+flink+"'><img height='75' width='75' src='"+flurl+"' /></a>";
};
//close the div
blob+="</div>";
//pop it onto the shelf, for later use
$("hyperspace").innerHTML+=blob;
} else {
//if there's somethign wrong with the feed, go to default contentk
social.fallBack.flickr();
}
}
For some reason the var flurl = items[i].getElementsByTagName("media:thumbnail")[0].getAttribute("url"); line failed in Safari. In fact, items[i].getElementsByTagName("media:thumbnail").length returned 0.
In the name of time, I put together this beast:
flickr : function(obj) {
var items = obj.getElementsByTagName("item");
if (items.length > 0 ) {
var blob = "<div id='flickrFeed'>";
for (var i = 0; i< 5 ; i++) {
var flink = items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
//Does it return 0?
if (items[i].getElementsByTagName("media:thumbnail").length == 0) {
//if so, we use this hand rolled getElementsByTagName (and weep about it)
var test= items[i].childNodes.length;
for (var j=0; j <test; j ++ ) {
if (items[i].childNodes[j].nodeName == "media:thumbnail") {
var flurl = items[i].childNodes[j].getAttribute("url")
}
}
} else {
var flurl = items[i].getElementsByTagName("media:thumbnail")[0].getAttribute("url");
}
blob+="<a href='"+flink+"'><img height='75' width='75' src='"+flurl+"' /></a>";
};
blob+="</div>";
$("hyperspace").innerHTML+=blob;
} else {
social.fallBack.flickr();
}
}
The question is- am I missing something simple that I could have done to fix it without the hand rolled getElementsByTagName? Or is there a bug in Webkit’s implementation of getElementsByTagName that chokes on the namespace prefix? A quick Google search looks at first looks promising, but doesn’t seem to hit this specific problem. Which seems impossible.
Anyone have any insight?
[Edited to Add...]
Since I sometimes can’t let these things go, I did some further research. It seems like getElementsByTagNameNS seems to be the standard way to go. Which means I have another rewrite to do.
Which would be annoying if I didn’t love this stuff. I’ll report on that tomorrow.
Follow @robreact
Ryan Says:
November 16th, 2009 at 6:21 pm
I believe getElementsByTagNameNS isn’t supported by IE so you might need to have some browser detection to use getElementsByTagNameNS with Safari
Rob Larsen Says:
November 17th, 2009 at 11:25 am
Hey ryan, I actually covered that in a later post.
Russell Says:
January 31st, 2012 at 6:08 am
This works on FF and Chrome for the node “media:thumbnail”:
elBoard.getElementsByTagNameNS(“*”,”thumbnail”);