Accessing <span> node in Javascript

Question

I'm trying to write a greasemonkey script that only displays photos with the tags bacon.

The site it runs on is written like so:

<div class="photos">
<ul>
...
<li>
<a href="photo1"> <img src="http://somesite.co/photo1.jpg" </a> <br /> <a href="tags_photo1"> <span class="tags">&nbsp;bacon, delicious&nbsp;</span> </a>
</li>
...
</ul>
</div>

At first I tried using DOM by acessing div and then using childNodes. I could access the img and both href nodes, but not span.

Next I tried using this to get the tags from the span:

tagNodes=document.getElementsByClassName('tags');

And it returned a XPCNativeWrapper collection all of whose elements were undefined.

Any ideas as to how to get at the tags?I'm fairly new to javascript, so I'm sorry if my question is stupid.

[Edit]

var spans, tags;    
spans = document.getElementsByTagName('span');
for (var i = spans.length - 1; i >= 0; --i)
{
    tags = spans[i];
    alert(tags.wrappedJSObject.nodeValue);
}

Returns as null, even with wrappedJSObject. Is it because Object.prototype doesn't work for XPCNativeWrapper? Or am I missing something?

Answer 1

Using pure Javascript (rather than using a library like jQuery - which I don't think you can use in a greasemonkey script), this should work:

var spans = document.getElementsByTagName("span");
for(var i = spans.length - 1; i >= 0; i--) {
    if(spans[i].className == "tags") {
        var span = spans[i];
        // do something to span
    }
}

You might want to look into using jQuery, if you can, because the code in jQuery would be:

$("span.tags").each(function() {
    var span = this;
    // do something to span
});

[EDIT]

You might be having problems because your img tag isn't closed.

Once you get access to the span with the tags in it, you just need to get it's innerHTML property.

This code will remove the whole list item, if the tags element doesn't contain "bacon":

var spans = document.getElementsByTagName("span");
for(var i = spans.length - 1; i >= 0; i--) {
    if(spans[i].className == "tags") {
        var span = spans[i];
        if (!span.innerHTML.match(/bacon/i)) {
            var li = span.parentElement.parentElement;
            li.style.display = "none";
        }
    }
}