XPath および CSS セレクター_html/css_WEB-ITnose

[翻訳]XPath と CSS セレクター

原文: http://ejohn.org/blog/xpath-css-selectors

最近、私は XPath と CSS 3 の両方をサポートするパーサーを実装するために多くの作業を行ってきました。私が驚いたのは、これらはある点では非常に似ていて、別の点ではまったく異なるということです。違いは、CSS を使用して HTML を操作できること、#id を使用して ID に基づいて要素を取得できること、および .class を使用して要素を取得できることです。クラスに基づいて要素を取得します。一方、XPath を使用して実装すると、DOM ツリーの上位ノードに戻ることができ、また、foo[bar] を使用して要素を取得することもできます。 bar サブ要素を持つ foo 要素では、CSS セレクターはこれをまったく行うことができません。 要約すると、CSS セレクターは通常は短いですが、残念ながら、これら 2 つのオプションは十分強力ではないと思います。デバイスの記述方法を比較することは非常に価値があります。

子 を持つすべての P 要素

構文的には、これら 2 つのセレクター、特に '>' と '/' の類似点に非常に驚きましたが、これらは常に同じ機能を持っているわけではありません (XPath (軸に依存します)。また、空白文字 ' ' と '//' はどちらも現在の要素のすべての子孫要素を意味します。これは同様にアスタリスク '*' です。

1 この書き方は、必要な 'foo bar' に一致するだけでなく、誤って 'foobar' にも一致してしまうため、実際には正しくありません。正しい書き方は非常に複雑で、完了するには複数の式が必要になる場合があります。

以下は翻訳者のメモです:

上記の表の XPath が間違っています:

//*[contains(@class,'foo')]

私が実装した書き方は次のとおりです:

//*[@class='foo' or contains(@class,' foo ') or starts-with(@class,'foo ') or substring(@class,string-length(@class)-3)=' foo']<br />

CSS .foo と比較すると、非常に複雑です。要素の class 属性に 'foo' が含まれる場合、次の 4 つの状況が考えられます。 //*[@class='foo']

ターゲット	CSS 3	XPath
すべての要素	*	//*
すべてのP要素	p	//p
すべての p 要素 子要素	p > *	//p/*
IDに基づいて要素を取得	#foo	//*[@id='foo']
クラスに基づいて要素を取得します	.foo	//*[@ title]
すべてのP要素の最初の子要素	p *:第一子	//p/*[ 0]
	Unachievable	//p[a]
次の兄弟要素 p + *	//p/following-sibling::*[0 ]

class 属性の値は 1 つだけ fooclass 属性内value、foo は他の 2 つの辺の値の真ん中にありますclass="foo bar"//*[starts-with(@class,'foo ')] class属性値のうち、foo は一番右にあります。XPath 1.0 には end-with 関数はありませんが、現在ブラウザーは 1.0 を実装しています。

那么我们能在网页开发中用上XPath吗?最初,jQuery是支持XPath选择器的,但后来,由于效率问题,jQuery放弃了对XPath的支持.刚好,谷歌在上个月发布了Wicked Good XPath，这是一个DOM Level 3 XPath规范的纯JavaScript实现,也是目前同类实现中最快的,我们可以把这个脚本和jQuery结合起来使用.

jQuery.getScript("http://wicked-good-xpath.googlecode.com/files/wgxpath.install.js").success( () {        wgxpath.install();        jQuery.xpath =  elements = [];                        xpathResult = document.evaluate(xpath, document, , 6,  ( i = 0; i < xpathResult.snapshotLength; i++ jQuery(elements);

这样就能通过$.xpath()静态方法来选择元素了,该方法返回的也是一个jQuery对象,和使用$()没什么差别.本页面已经加载了这个脚本,你可以现在打开控制台试验一下$.xpath方法.

那我们有了CSS选择器,为什么还要用XPath呢,答案是:有些时候,XPath更强大一点.比如:

在上面John Resig总结的表中,有一个CSS无法实现的功能,就是查找包含某个子元素的父元素.的确,目前的CSS还无法实现,不过在未来CSS4的选择器中,将会有一个父选择器

E! > F    //注意,2011年的时候,父选择器的语法是$E > F,今年草案又改了.网上有些介绍CSS4选择器的博文还是旧的,这里有一个能在CSS文件中使用父选择器的polyfill https://github.com/Idered/cssParentSelector

该选择器可以选取到那些包含子元素F的E元素.但即便以后实现了CSS4,稍微改变一下需求,查找那些包含后代元素F的E元素,CSS选择器又怎么写呢?应该是没什么办法实现.熟悉jQuery的朋友可能会说,jQuery里有:has伪类,可以这么写E:has(F),的确,如果使用jQuery自定义的过滤器,几乎任何需求都可以用遍历DOM的方法实现,但效率绝对会很低.而XPath就不一样了,毕竟Firefox和chrome都已经实现了XPath的接口document.evaluate方法(Wicked Good XPath应该主要是努力在IE上实现统一的接口),速度肯定比手动遍历DOM来的快.XPath的写法是这样的//E[.//F],怎么样,也挺简单明了的.

另外很重要的一点是,CSS本来是用于给HTML添加样式的,12种节点类型中,只有元素节点(nodetype等于1)才有样式这一说,因此,CSS选择器只能选取到页面中的元素节点,而XPath就不是了,它不光可以用在HTML中,还可以用在XML中,除了元素节点,而可以选择属性节点(//@*)或者文本节点(//text())等,如果未来XPath2.0实现了,它会变的更加强大.

	class="foobar foo bar"	//*[@class =' foo ']
Inクラス属性値、foo は左端にあります	class="bar foo"	//*[substring(@class,string-length(@class)-3)=' foo']