Javascript: use xpath in jQuery

Question

I have, for example, the next XPath query:

//div[span="something"]/parent::div/child::div[@class=\"someClass\"]

I want to use this XPath query in JavaScript:

return $("a:contains('Fruits')").mouseover();

I tried this:

return $("div[span=\"something\"]/parent::div/child::div[@class=\"someClass\"]").mouseover();

But it didn't work. Is there another semantic for XPath queries in order to use them in JavaScript?

score 25 · Answer 1 · answered Dec 10 '13 at 13:32

You could add the results of an existing XPath evaluation to a jQuery selection, I threw together this jquery extension that seems does it all for you.

Example usage:

$(document).xpathEvaluate('//body/div').remove()

Here's the add-in.

$.fn.xpathEvaluate = function (xpathExpression) {
   // NOTE: vars not declared local for debug purposes
   $this = this.first(); // Don't make me deal with multiples before coffee

   // Evaluate xpath and retrieve matching nodes
   xpathResult = this[0].evaluate(xpathExpression, this[0], null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

   result = [];
   while (elem = xpathResult.iterateNext()) {
      result.push(elem);
   }

   $result = jQuery([]).pushStack( result );
   return $result;
}

did not work for me in Chrome, had to change this = this.first(); to $this = $this.first(); — rickdog, Jul 08 '17 at 23:55

georgebrock · Accepted Answer · 2012-09-03T10:07:17.953

You can re-write your xpath queries as CSS selectors:

$('div:has(> div > span:contains(something)) > div.someClass');

You can achieve the same effect as parent:: using the :has pseduo selector to select an element based on its children: div.foo:has(> div.bar) will select all div elements with class foo that have a child div with class bar. This is equivalent to div[@class="bar"]/parent::div[@class="foo"].

See:

You could probably approach this in several other ways using various combinations jQuery's DOM traversal methods. For example, this would be a very direct translation of your xpath query:

$('div:has(> span:contains(something))')  // //div[span="something"]
    .parent('div')                        // /parent::div
    .children('div.someClass');           // /child::div[@class="someClass"]

It's worth noting that div.someClass in CSS isn't the exact equivalent of div[@class="someClass"] in xpath. The CSS will match <div class='foo someClass bar'>, but the xpath won't. See Brian Suda's article on parsing microformats with XSLT for more detail.

My xpath to CSS translation was wrong, I've corrected it and explained how `parent::div` is reproduced. — georgebrock, Sep 03 '12 at 09:29
What if the class name has space in it say - div[@class="bar"]/parent::div[@class="foo bar"] — Ulysses, Jun 20 '18 at 11:08

Dominator008 · Answer 3 · 2015-04-07T18:15:40.717

4

As the co-author of Wicked Good XPath, I certainly recommend it for cross browser XPath support (on HTML documents, you can try using it with XML documents but the support is incomplete).

We welcome any sort of correctness test / performance benchmark on our library. During development, the library has been tested on IE 7 through 10 plus the Android 2.2 browser which doesn't have native XPath support.

edited Apr 07 '15 at 18:15

answered Sep 07 '12 at 19:32

Dominator008

339
4
9

score 2 · Answer 4 · edited Apr 07 '15 at 18:29

2

There is no Cross-browser implementation as far as I know. There is a xpath plugin for jQuery which says is still in developement.

Other than that there is a Google-authored pure JavaScript implementation of the DOM Level 3 XPath specification called wicked-good-xpath which is good.

edited Apr 07 '15 at 18:29

Dominator008

339
4
9

answered Sep 03 '12 at 07:51

sv_in

13,929
9
34
55

score 2 · Answer 5 · answered Aug 24 '14 at 18:15

if you want to select an element inside an iframe, from parent window, you should change second parameter of evaulate() function to iframe's document element, like :

var iFrameDocument = $('iframe#myPage').get(0).contentWindow.document;
xpathResult = this[0].evaluate(xpathExpression, iFrameDocument, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

score 1 · Answer 6 · answered Sep 03 '12 at 07:42

1

I'm not sure about the parent::div clause, but without it it should look like this:

$('div[span="something"] div.someClass');

answered Sep 03 '12 at 07:42

Constantinius

34,183
8
77
85

1

In xpath `div[span="something"]` selects `div` elements with a child `span` that has the text value `something`, it doesn't look for a `span` attribute. I think you're mixing it up with the (very similar looking) `div[@span="something"]`. See examples: http://www.w3.org/TR/xpath/#path-abbrev – georgebrock Sep 03 '12 at 09:41

score 0 · Answer 7 · answered Sep 03 '12 at 07:41

0

read from here about the evaluate method : https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );

answered Sep 03 '12 at 07:41

CosminO

5,018
6
28
50

score 0 · Answer 8 · edited May 23 '17 at 12:17

0

jQuery only has limited support for XPath. You can see what it does support here: http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors

As mentioned by @Ameoo you can use the evaluate method, which is available in most modern browsers - except, predictably, IE: jquery select element by xpath

edited May 23 '17 at 12:17

Community

1
1

answered Sep 03 '12 at 07:43

Robin Winslow

10,908
8
62
91

Javascript: use xpath in jQuery

8 Answers8

Linked