XPath から CSS Selector への変換を真剣に検討するページ

XPath を IE8 で querySelector 出来るセレクタに変換する方法を考えよう」

HTML で使用することに特化していい

XPath から要素を取得する過程で使う目的

ブレスト

出来る系

//aaa//bbb//ccc
=> aaa bbb ccc

/aaa/bbb/ccc
=> html > bbb > ccc (ルートは html と決まっているから妥協）

id("hoge")
=> #hoge

id("hoge") | //aaa[@hoge="fuga"]
=> #hoge, aaa[hoge="fuga"]

//aaa/*[1]
=> aaa > *:first-child

//aaa[contains(@hoge, 'fuga')]
=> aaa[hoge*="fuga"]

//aaa[ends-with(@hoge, 'fuga')]
=> aaa[hoge$="fuga"]

(//aaa | //bbb)/ccc
=> aaa > ccc, bbb > ccc

//aaa[@hoge=1+1]
=> aaa[hoge="2"]   (パース時に定数を計算しているので）

出来ない系

aaa/bbb/ccc
=> child 軸から始まる (一時的に id を付けてやるのはどうか、パフォーマンス気になる）

./aaa/bbb/ccc
=> self 軸

..
=> parent 系の軸や兄要素にさかのぼる系

//aaa[.="hoge"]
=> 条件部に属性以外の条件

//aaa[@hoge=count(.//bbb//ccc)]
=> ネストしている (パース時に .//bbb//ccc をセレクタに直して実行し、 .//bbb//ccc の値が確定したら全体をセレクタに直して実行するのはどうか）

IE8 で対応するセレクタ

http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx

• Simple Selector
  • .value
  • #value
  • E
  • *
  • [att=val]
  • [att]
  • [att|=val]
  • [att~=val]
  • [att^=val]
  • [att*=val]
  • [att$=val]
• Combinator
  • E + F
  • E > F
  • E F
  • E ~ F

方法を考える

方法 1

1. XPath をパースする
   1. 定数に出来るところはする
2. 構文木を変換する
   1. 上から順に走査
   2. 変換出来る部分木を探す
      1. トップに descendant 軸がくる部分木
      2. ルートから始まる部分木
      3. id 関数を実行する部分木
         1. id 関数に値がパース時に決まっている場合
3. 実行する