Question

我需要将页面中具有特定字体的所有文本节点都添加到数组中。我试过..

textnodes = document.evaluate("//* [@style='font-family: foo;']//text()["
            + "not(ancestor::script) and not(ancestor::style)]", document,
            null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

和

textnodes = document.evaluate("//* [@face='foo']//text()["
            + "not(ancestor::script) and not(ancestor::style)]", document,
            null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

但这些不适用于由外部CSS文件设置样式的页面。似乎getComputedStyle（）是要走的路。我认为我需要的是像......

var tags = document.getElementsByTagName('*');
for (var i in tags) {
    var style = getComputedStyle(tags[i], '');
    if (style.fontFamily.match(/foo/i)) {
        textnodes.push(tags[i]);
        }
    }

但是在这种方法中没有返回文本节点。无论如何我可以使用xpath evaluate（）和getComputedStyle（）的混合或其他任何方式来实现这个目标吗？

Answer 1

一种简单的方法是查找所有文本节点：

textnodes = document.evaluate("//text()", document,
        null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

循环遍历找到的每个TextNode，然后您可以查找其父的computedStyle。如果是该字体，则可以将push TextNode设置为textnodes。

Answer 2

使用jQuery。 jQuery对于你的GM脚本将要做的其他事情将是有用的，而且，它更强大和跨浏览器能力。

（1）在// @include指令之后，将此行添加到Greasemonkey元数据部分：

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

（注意，您可能必须卸载然后重新安装脚本才能复制jQuery。）

（2）然后你可以使用这段代码来获取节点：

var jPrelimNodes    = $("*:not(html, head, title, meta, script, link, style, body)");

var aMyTextNodes    = jPrelimNodes.map 
                    (
                        function () 
                        {
                            var jThis   = $(this);
                            if (jThis.children().length <= 1)   //-- Ignore containers.
                            {
                                if (/^\bTimes New Roman\b/i.test (jThis.css ("font-family") ) )
                                    return jThis; // Or return "this" or "jThis.text()", as desired.
                            }
                            return null;
                        } 
                    ).get ();

这将检查计算的样式，在这种情况下，返回开始的节点与Times New Roman。

你可以see a version of this code, in action, at jsFiddle。

合并getComputedStyle并在Greasemonkey中进行评估

2 个答案: