document.evaluate - Cross browser?

Question

I have been looking for a CSS selector function other than Sizzle and I have come across this function.

function SparkEn(xpath,root) {
  xpath = xpath
    .replace(/((^|\|)\s*)([^/|\s]+)/g,'$2.//$3')
    .replace(/\.([\w-]+)(?!([^\]]*]))/g, '[@class="$1" or @class$=" $1" or @class^="$1 " or @class~=" $1 "]')
    .replace(/#([\w-]+)/g, '[@id="$1"]')
    .replace(/\/\[/g,'/*[');
  str = '(@\\w+|"[^"]*"|\'[^\']*\')';
  xpath = xpath
    .replace(new RegExp(str+'\\s*~=\\s*'+str,'g'), 'contains($1,$2)')
    .replace(new RegExp(str+'\\s*\\^=\\s*'+str,'g'), 'starts-with($1,$2)')
    .replace(new RegExp(str+'\\s*\\$=\\s*'+str,'g'), 'substring($1,string-length($1)-string-length($2)+1)=$2');
  var got = document.evaluate(xpath, root||document, null, 5, null);
  var result=[];
  while (next = got.iterateNext())
    result.push(next);
  return result;
}

I just feel like it is too good to be true, is this a firefox only function (xpath?) or is it slow? Basically why would I use Sizzle over this?

I think it is firefox only, how disappointing. Apparently IE can do it on XML documents. — Olical, Jan 13 '11 at 15:58
o my god at last i found someone think same way as iam :))))))))))))) http://stackoverflow.com/questions/15310502/how-to-create-a-javascript-selector-engine — Marwan, Mar 10 '13 at 11:37

score 10 · Accepted Answer · edited Aug 31 '16 at 04:43

10

I believe no stable version of IE supports document.evaluate, so you're limited to every other browser. It's not slow since it's a native implementation of XPath.

Sizzle is useful because it uses the native support browsers offer when available (such as document.getElementsByClassName), but falls back to doing it itself when unavailable (IE). It's also used by jQuery and Prototype, so it's heavily, heavily tested and is unlikely to give you any trouble. Sizzle is also heavily speed-tested and optimized (they have a whole speed test suite), which is more work you don't have to do.

I'd say go with jQuery, Prototype, or just Sizzle by itself unless you are doing something incredibly performance-sensitive (which, honestly, is probably an indicator that you've structured your application poorly).

edited Aug 31 '16 at 04:43

Nate Anderson

18,334
18
100
135

answered Jan 13 '11 at 16:00

Brian Donovan

8,274
1
26
25

A great answer, just one more question. Due to `querySelectorAll()` being native, is it faster than Sizzle. I know IE does not support this either, but in supported browsers should you go for `querySelectorAll()`? – Olical Jan 13 '11 at 16:07
1

There's little reason to use `querySelectorAll()` directly either, since [Sizzle uses it if it's available](https://github.com/jeresig/sizzle/blob/master/sizzle.js#L1077). It also normalizes weirdnesses around that function in different browsers so you can just worry about coding your application and not about whether IE 8's implementation is slightly buggy. – Brian Donovan Jan 13 '11 at 16:10

score 2 · Answer 2 · answered Jan 30 '13 at 23:07

2

I just have found http://sourceforge.net/projects/js-xpath/, which claims to be

an implementation of DOM Level 3 XPath for Internet Explorer 5+

See their implementation at http://nchc.dl.sourceforge.net/project/js-xpath/js-xpath/1.0.0/xpath.js

answered Jan 30 '13 at 23:07

Bergi

630,263
148
957
1,375

score 0 · Answer 3 · answered Jul 05 '14 at 10:51

It is a DOM3 W3C Working Group Note: http://www.w3.org/TR/2004/NOTE-DOM-Level-3-XPath-20040226/xpath.html#XPathEvaluator-evaluate

Implementation status: https://developer.mozilla.org/en-US/docs/Web/API/document.evaluate#Browser_compatibility Today only not in IE 10 on latest stable desktop browsers.

document.evaluate - Cross browser?

3 Answers3

Linked