Title: Merging getComputedStyle and evaluate in Greasemonkey
Tags: javascript;css;greasemonkey;xpath
Question: I need to get all the text nodes with a certain font-face in a page to an array. I tried..

```textnodes = document.evaluate("//* [@style='font-family: foo;']//text()["
            + "not(ancestor181a:6c1c:918f:f3a4:2e8c:61d6:1a08:6b16script) and not(ancestor181a:6c1c:918f:f3a4:2e8c:61d6:1a08:6b16style)]", document,
            null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
```

and

```textnodes = document.evaluate("//* [@face='foo']//text()["
            + "not(ancestor181a:6c1c:918f:f3a4:2e8c:61d6:1a08:6b16script) and not(ancestor181a:6c1c:918f:f3a4:2e8c:61d6:1a08:6b16style)]", document,
            null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
```

But these does not work with pages that is styled by external CSS files. Seems getComputedStyle() is the way to go. I think what I need is something like..

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

But text nodes were not returned in this method. Is there anyway I can use a hybrid of xpath evaluate() and getComputedStyle() or any other way to achieve this?

Comment: @Brock-Adams: This question seems a lot more about DOM and CSS and their particular implementation. An XPath expression is one that presents a specific XML document, defines what nodes are to be selected and asks for an XPath expression that selects exactly these nodes. There is no XML document provided in this question and it is impossible to verify whether the proposed expressions select (what???) nodes. Please, read the questions tagged xpath to see how they differ from this question.

Comment: @Brock-Adams: As you can see, the answers have nothing to do with XPath. Maybe it isn't exactly "xpathengines", maybe it is "xpath-histing-languages-and-apis", but for now the closest to these is "xpathengines". As for "most XPath users are in a similar state", well, I'd value the opinion of other experts, such as @Alejandro and @LarsH and @Tomalak and @Abel.

Comment: @Dimitre Novatchev: Why was this changed from [xpath], which seems appropriate, to [xpathengines], which seems incorrect?

Comment: @Dimitre Novatchev:  I've a working knowledge of XPath and have perused many [xpath] questions since I browncarol@example.org.  Still not clear on the difference.  Judging by all the retagging that seems to be occurring, I'd wager most XPath users are in a similar state.  Perhaps if you created the [xpathengines wiki](http://stackoverflow.com/tags/xpathengines/info), you could explain the difference between the new tags more clearly.

Here is the accepted answer: Use jQuery.  jQuery will be dead useful for the other things your GM script will do, plus, it's much more robust and cross-browser capable.

(1) Add this line to the Greasemonkey metadata section, just after the ```// @include``` directive(s):

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

(Note you may have to uninstall and then reinstall the script to get jQuery copied over.)
(2) Then you can use this code to get the nodes:

```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 ();
```


This checks the computed style, and in this case returns nodes that start with Times New Roman.

You can see a version of this code, in action, at jsFiddle.


Here is another answer: One easy way to do is to find all text nodes:

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

Looping through each TextNode found, you can then look up its parent's computedStyle. If it's that font, you can then ```push``` the TextNode to ```textnodes```.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 4, 'ContentLicense': 'CC BY-SA 2.5', 'CreationDate': '2011:00:01/03/11', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><css><greasemonkey><xpath>', 'Title': 'Merging getComputedStyle and evaluate in Greasemonkey', 'ViewCount': 521, 'id': 4581875, 'user_AboutMe': "<p>Graduate Student in Software Engineering. Rejoices in making people's lives easier, better and happier using technology. Loves boxes with blinking lights.</p>\n", 'user_AccountId': 215269.0, 'user_DisplayName': 'keheliya', 'user_Reputation': 2293.0, 'user_Views': 211.0, 'user_id': 469794.0}}