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属性。

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

在Javascript中访问<span>节点</span>

1 个答案: