ブラウザ上のクリックした要素のXpathを取得する

Chrome DevToolsにあるCopy Xpathの機能を手元で実装したかった。このときのメモです。

ブラウザ上の要素をクリックしたときに、その要素のXpathを取得するように実装します。

ターゲットの要素から親を登っていって、兄弟要素があればそのindexを取得、というのを再帰していってタグ名を付け足していく感じです。

function getXpath(element) {
  if(element && element.parentNode) {
    var xpath = getXpath(element.parentNode) + '/' + element.tagName;
    var s = [];

    for(var i = 0; i < element.parentNode.childNodes.length; i++) {
      var e = element.parentNode.childNodes[i];
      if(e.tagName == element.tagName) {
        s.push(e);
      }
    }

    if(1 < s.length) {
      for(var i = 0; i < s.length; i++) {
        if(s[i] === element) {
          xpath += '[' + (i+1) + ']';
          break;
        }
      }
    }

    return xpath.toLowerCase();
  } else {
    return '';
  }
}

取得すると/html/body/div[2]/div[3]/div/div/div[1]/div[4]/div/div[2]/div/divって感じのXpathが取得できる。

あとはクリックイベントをつけるだけ。

document.addEventListener('click', function(e){
  console.log(getXpath(e.target));
});

これでどこをクリックしてもXpathが取得できるようになります。

これをブックマークレットにしておけば、非エンジニアでもXpathが扱えるようにできます。