javascriptで Document.getElementByXpath で検索したかった。

javascriptでXpathで検索したかった。

普段rubyでscrapingやcrawlerをつくるなどするときはRubyGemsの'capybara,Nokogiri,Mechanize'といったものを利用しているため大抵のDocument検索はXpathをつかって検索していました。

久しぶりにJavascriptを使ってJSを書くとき。 'あの要素Xpathでとれないかなと思い'おもむろに

document.getElementByXpath()

と実行したところ

VM324:1 Uncaught TypeError: document.getElementByXpath is not a function
    at <anonymous>:1:10

そんなものないよと怒られた。

G先生にきくと下記のようなfuncを定義すれば良いとのことなのでこれを使ってあげれば JavascriptにてXpathで要素取得が可能になります。

function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

-----追記

Githubで同じようなことをやっている人がいないかなと思い、検索したらまとめてる方がいました。

gist.github.com

document.getElementByXPath = function(sValue) { var a = this.evaluate(sValue, this, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); if (a.snapshotLength > 0) { return a.snapshotItem(0); } };
document.getElementsByXPath = function(sValue){ var aResult = new Array();var a = this.evaluate(sValue, this, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);for ( var i = 0 ; i < a.snapshotLength ; i++ ){aResult.push(a.snapshotItem(i));}return aResult;};
document.removeElementsByXPath = function(sValue) { var a = this.evaluate(sValue, this, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for ( var i = 0 ; i < a.snapshotLength ; i++ ) { a.snapshotItem(i).parentNode.removeChild(a.snapshotItem(i)); } };

---追記終わり

fumihumiサクッとメモでした。

参考： stackoverflow.com

追記

chromeにはwindow.$x というものがあり、

ƒ $x(xpath, [startNode]) { [Command Line API] }

となっていました。

ブラウザで検証等を使って試す時は

$x(xpath)

で良いようです。(chrome, safariにて動作を確認しました)