素のJavaScriptでXPathを使う

今どきのJavaScriptは、document.querySelectorAllがあるから、jQueryがいらない。

ただ、querySelectorAll はCSSセレクタしばり。ほとんどの場合の要素指定はCSSセレクタでいけるんだけど、CSSだとテキストノードのマッチ機能がない。

ページングの「次へ」リンクなどが、CSSセレクタとして特定できなくても、「次へ」の文字列の一致で特定したいときはある。その場合はCSSセレクタではなくXPathのほうが便利。

ちょっとコツが要るが、「クラス名がc-paging__pagenavi-itemのテキストが">"というアンカーをクリックしなさい」というソースは以下のスニペットでいける。

var nodesSnapshot = document.evaluate('//a[@class="c-paging__pagenavi-item" and text() = ">"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
nodesSnapshot.snapshotItem(0).click();

document.evaluate の第一引数がXPathセレクタなので、そこだけ差し替えればいろいろ遊べる。