在 Javascript 中访问 <span> 节点

Question

我正在尝试编写一个仅显示带有培根标签的照片的greasemonkey 脚本。

它运行的网站是这样写的：

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

起初我尝试通过访问 div 然后使用 childNodes 来使用 DOM。我可以访问 img 和两个 href 节点，但不能访问 span。

接下来我尝试使用它从跨度中获取标签：

tagNodes=document.getElementsByClassName('tags');

它返回了一个 XPCNativeWrapper 集合，其中所有的元素都是未定义的。

关于如何获取标签的任何想法？我对javascript相当陌生，所以如果我的问题很愚蠢，我很抱歉。

[编辑]

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

返回为 null，即使使用 WrappedJSObject。是因为 Object.prototype 不适用于 XPCNativeWrapper 吗？还是我错过了什么？

Answer 1

使用纯 Javascript（而不是使用像 jQuery 之类的库——我认为你不能在greasemonkey 脚本中使用它），这应该可以工作：

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

如果可以的话，您可能想研究一下使用 jQuery，因为 jQuery 中的代码是：

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

[编辑]

您可能会遇到问题，因为您的 img 标签未关闭。

一旦您可以访问包含标签的跨度，您只需要获取它的innerHTML 属性。

如果标签元素不包含“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";
        }
    }
}