ブラウザ上のjavascriptでxpathを操作する。XPathResult.resultType定数表示

 なんとなくchrome pluginを作りたくなった。

ブラウザ上のjavascriptでxpathの返値タイプ種別。

devtoolでやると結果が数字で帰ってくるので、定数を見やすくするため列挙。

<XPathResult.resultType>

0: XPathResult.ANY_TYPE

1: XPathResult.NUMBER_TYPE

3: XPathResult.BOOLEAN_TYPE

4: XPathResult.UNORDERED_NODE_ITERATOR_TYPE

5: XPathResult.ORDERED_NODE_ITERATOR_TYPE

6: XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE

7: XPathResult.ORDERED_NODE_SNAPSHOT_TYPE

8: XPathResult.ANY_UNORDERED_NODE_TYPE

9: XPathResult.FIRST_ORDERED_NODE_TYPE

＜参考＞

https://uhyohyo.net/javascript/10_2.html

devtoolコンソール上でザックリ見るにはmap使えばいいが、js経由で変数代入するとできなくなる。

＜devtoolコンソール上での出力＞

$x('//div[contains(@class, "roads") and contains(@class, "left")]//*[text()="B" or text()="P" or text()="T"]').map(function(el){return el.textContent}).join("");

＜jsでの操作 テスト＞

var res1 = document.evaluate('//html', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);

console.log(res1.singleNodeValue);

var res2 = document.evaluate('//span', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);

console.log(res2.singleNodeValue);

var res3 = document.evaluate('//div[contains(@class, "roads") and contains(@class, "left")]//*[text()="B" or text()="P" or text()="T"]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);

console.log(res3.singleNodeValue); //type:9

＜まともに使える書き方＞

  var nodesSnapshot = document.evaluate('//div', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)

  for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ){

    alert( nodesSnapshot.snapshotItem(i).textContent );

  }